2016-03-22 17 views
0

Ich habe Formular, in dem Benutzer Eingabeformulare duplizieren kann, und ich habe ein Problem mit einem Radio-Tasten. Wenn ich zu verwenden versuchen:Mehrere Eingänge mit dem gleichen Namen

$('form').serialize(); 

In Chrome Dev-Tools

Ich habe:

"text-field%5B%5D=%D0%98%D0%B2%D0%B0%D0%BD%D0%BE%D0%B2+%D0%98%D0%B2%D0%B0%D0%BD+%D0%98%D0%B2%D0%B0%D0%BD%D0%BE%D0%B2%D0%B8%D1%87&text-h-alignment%5B%5D=42&text-v-alignment%5B%5D=42&text-field%5B%5D=(000)+000+00+00&text-alignment%5B%5D=center& text-h-alignment%5B%5D=42&text-v-alignment%5B%5D=42" 

Wie Sie sehen können, Optionsfelder sind nicht in "Array", ist es ein eindeutige Variable. Aber ich benutze die "[]" Symbole am Ende des Variablennamens.

Hier ist mein HTML:

<form> 
    <div class="row"> 
    <div class="col-lg-4"> 
     <div class="input-group"> 
     <div class="input-group-btn"> 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Шаблон <span class="caret"></span> 
      </button> 
      <ul class="dropdown-menu"> 
      <li><a href="#" onclick="$(this).closest('.input-group').find('input[type=text]').val('Иванов Иван Иванович');">Имя</a></li> 
      <li><a href="#" onclick="$(this).closest('.input-group').find('input[type=text]').val('(000) 000 00 00');">Телефон</a></li> 
      <li><a href="#" onclick="$(this).closest('.input-group').find('input[type=text]').val('[email protected]');">E-mail</a></li> 
      <li><a href="#" onclick="$(this).closest('.input-group').find('input[type=text]').val('г. Город, ул. Улица 1');">Адрес</a></li> 
      <li><a href="#" onclick="$(this).closest('.input-group').find('input[type=text]').val('example.com');">Сайт</a></li> 
      </ul> 
     </div> 
     <input type="text" class="form-control" name="text-field[]"> 
     </div> 
    </div> 
    <div class="btn-group" data-toggle="buttons"> 
     <label class="btn btn-default active"> 
     <input type="radio" checked="checked" name="text-alignment[]" value="left"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> 
     </label> 
     <label class="btn btn-default"> 
     <input type="radio" name="text-alignment[]" value="center"><span class="glyphicon glyphicon-align-center" aria-hidden="true"></span> 
     </label> 
     <label class="btn btn-default"> 
     <input type="radio" name="text-alignment[]" value="right"><span class="glyphicon glyphicon-align-right" aria-hidden="true"></span> 
     </label> 
    </div> 

    <div class="input-group spinner padding-15 pull-left"> 
     <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span></span> 
     <input type="text" class="form-control" value="42" name="text-h-alignment[]"> 
     <div class="input-group-btn-vertical"> 
     <button class="btn btn-default" type="button"><i class="glyphicon glyphicon-chevron-up"></i></button> 
     <button class="btn btn-default" type="button"><i class="glyphicon glyphicon-chevron-down"></i></button> 
     </div> 
    </div> 

    <div class="input-group spinner padding-15 pull-left"> 
     <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span></span> 
     <input type="text" class="form-control" value="42" name="text-v-alignment[]"> 
     <div class="input-group-btn-vertical"> 
     <button class="btn btn-default" type="button"><i class="glyphicon glyphicon-chevron-up"></i> 
     </button> 
     <button class="btn btn-default" type="button"><i class="glyphicon glyphicon-chevron-down"></i> 
     </button> 
     </div> 
    </div> 

    </div> 
    <div class="row margin-top-15"> 
    <div class="col-lg-4"> 
     <a href="#" class="color-green" onclick="$(this).closest('.container-fluid').find('.row:eq(0)').clone().prependTo($(this).closest('.container-fluid form'))"> 
     <div class="circle green-circle circle-position pull-left"><span class="glyphicon glyphicon glyphicon-plus color-white circle-plus" aria-hidden="true"></span>  </div>Добавить еще поля</a> 
    </div> 
    </div> 
</form> 
+0

[] macht es nur ein Array auf dem Server – mplungjan

+0

@mplungjan Angenommen, aber ich bin mir nicht sicher. Aber wie "spalte" ich meine Radiobuttons, dachten sie auch an ein Array? –

+2

Warum willst du es zu einem Array machen? Wenn eine Optionsfeldgruppe denselben Namen hat, wird einer von ihnen ausgewählt, und das würde der Wert werden. Es sollte kein Array sein –

Antwort

0

ich nicht eine native Lösung in HTML gefunden.

Deshalb war es notwendig, eine solche Lösung für das JS zu verwenden:

$(this).closest('.container-fluid').find('.row:eq(0)').clone(true).find('input[type=radio]').attr('name', function(i, val){return val.replace(/(\d+)/, function(n){ return ++n })}); 

Als Ergebnis, wenn Sie auf „duplicate Feld“ klicken, erscheint Radio-Buttons mit den Namen: Text-Ausrichtung [1] , text-alignment [2] ...

Verwandte Themen