Dynamisches Formular mit Eingabe Typ Nummer und onchange Ereignis

Question

Ich habe das Formular auf dem Bild, und ich möchte das "Numero de Cuartos" -Feld, um die gleiche Anzahl von Eingaben von "numero de personas adulates" und "numero de niños" Zusätzlich muss der "numero de niños" -Eingang die gleiche Menge an "edad de niños" -Eingängen anhängen.

Ich habe es wie folgt aus:

<!--INPUT TYPE NUMBER OF Numero de cuartos--> 
 
<div class="col-md-6 col-sm-6"> 
 
    <div class="form-group"> 
 
    <label>Numero de cuartos</label> 
 
    <input required type="number" id="cuartos" name="cuartos" onchange="insertarCampos();" class="form-control" min="0"/> 
 
</div> 
 
</div> 
 

 
<!--Place to append--> 
 
<div id="contenidoPersonas"> 
 
</div> 
 

 
<!-- This form is appended depending on the number of "numero de cuartos" input --> 
 
<div id="rooms" style="display:none;"> 
 
           <div class="row"> 
 
            <div class="col-md-4 col-sm-4"> 
 
             <div class="form-group"> 
 
              <label>Numero de personas adultas</label> 
 
              <input required type="number" id="adulto" name="adulto[]" class="form-control" min="1" max="6"/> 
 
             </div> 
 
            </div> 
 
            <div class="col-md-4 col-sm-4"> 
 
             <div class="form-group"> 
 
              <label>Numero de niños</label> 
 
              <input required type="number" id="nino" name="nino[]" class="form-control" min="0" max="6" onchange="insertarEdadesNinos();"/> 
 
             </div> 
 
            </div> 
 
            <div class="col-md-4 col-sm-4"> 
 
             <!-- Inside edadNinos div goes the div with id "ninos"--> 
 
             <div id="edadNinos"> 
 
             </div> 
 
            </div> 
 
           </div> 
 
          </div> 
 
           
 
<!-- This form is appended on the "edadNinos" div depending on the number of "numero de niños" input --> 
 
           <div id="ninos" style="display:none;"> 
 
            <div class="form-group"> 
 
             <label>Edad de niños</label> 
 
            <input required type="number" id="edadNino" name="edadNino[]" class="form-control" min="0" max="12"/> 
 
            </div> 
 
           </div>

DIE javascript:

function insertarCampos(){ 
      var personasSingle = $('#cuartos').val(); 

      for(i = 0;i < personasSingle;i++){ 
       $('#contenidoPersonas').append($('#rooms').html()); 
       $('#contenidoPersonas').append("<hr>"); 
      } 
     } 

     function insertarEdadesNinos(){ 
      var numNinos = $('#nino').val(); 
      $('#edadNinos').empty(); 
      for(i = 0;i < numNinos;i++){ 
       $('#edadNinos').append($('#ninos').html()); 
      } 
     } 

Dies hängt die Dinge richtig, wie auf dem Bild, aber Da sind Som e Probleme:

• Wenn ich meine Meinung ändern und statt „2“, habe ich 1, werden die Eingaben gelöscht und wieder wegen der leeren Funktion angehängt, und ich weiß nicht, wie das zu korrigieren. Die andere Sache ist, dass der "numero de niños" Eingang nur auf dem ersten funktioniert, der zweite "numero de niños" Eingang tut nichts, weil er dieselbe ID wie der erste hat, ich don Ich weiß auch nicht, wie ich das korrigieren soll.

Ich muss auch diese Eingaben an ein PHP-Skript getrennt senden, wird die Trennung visuell auf der Form des Bildes mit dem Tag

<hr> 

Dank markiert!

Answer 1

Was Sie versuchen zu emulieren, wie Vorlagen arbeiten, ist aber keine sehr gute Idee, verwenden Sie einfach den HTML-Code von DOM-Elementen, die bereits im Dokument sind (vielleicht können Sie ersetzen, um die HTML zu ändern, aber das wäre eine sehr unangenehme Lösung), empfehle ich Ihnen, einen Blick darauf zu werfen, wie jQuery Templates funktionieren http://jsfiddle.net/zarjay/ZAkM7/ in der Zwischenzeit wird dieser Code tun, was Sie versuchen zu erreichen:

(Sie müssen auch die Referenz die jQuery Vorlagen einstecken hinzufügen) http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js)

<!--INPUT TYPE NUMBER OF Numero de cuartos--> 
<div class="col-md-6 col-sm-6"> 
    <div class="form-group"> 
     <label> 
      Numero de cuartos 
     </label> 
     <input required type="number" id="cuartos" name="cuartos" onchange="insertarCampos();" class="form-control" min="0" /> 
    </div> 
</div> 
<br /> 
<!--Place to append--> 
<div id="contenidoPersonas"> 
</div> 
<!-- This form is appended depending on the number of "numero de cuartos" input --> 
<script id="roomsTemplate" type="x/jquery-tmpl"> 
    <div class="room" room-number="${roomNumber}"> 
     <div class="row"> 
      <div class="col-md-4 col-sm-4"> 
       <div class="form-group"> 
        <label> 
         Numero de personas adultas 
        </label> 
        <input required type="number" id="adulto" name="adulto[]" class="form-control" min="1" max="6" /> 
       </div> 
      </div> 
      <div class="col-md-4 col-sm-4"> 
       <div class="form-group"> 
        <label> 
         Numero de ni�os 
        </label> 
        <input required type="number" name="nino[]" class="nino form-control" min="0" max="6" onchange="insertarEdadesNinos(${roomNumber});" /> 
       </div> 
      </div> 
      <div class="col-md-4 col-sm-4"> 
       <!-- Inside edadNinos div goes the div with id "ninos"--> 
       <div class="edadNinos"> 
       </div> 
      </div> 
     </div> 
    </div> 
    <hr room-number="${roomNumber}" /> 
</script> 
<!-- This form is appended on the "edadNinos" div depending on the number of "numero de ni�os" input --> 
<script id="ninosTemplate" type="x/jquery-tmpl"> 
    <div class="ninos" nino-number="${ninoNumber}"> 
     <div class="form-group"> 
      <label> 
       Edad de ni�os 
      </label> 
      <input required type="number" class="edadNino" name="edadNino[]" class="form-control" min="0" max="12" /> 
     </div> 
    </div> 
</script> 

Die javascript:

Auch dieser Ansatz ist ein wenig veraltet, Sie können auch einige MVC-Framework wie http://knockoutjs.com suchen, die nicht sehr kompliziert ist.

Answer 2

Ok, es gibt einige Probleme in diesem Skript.

Erstens: ein ID ist einzigartig!

Das globale ID-Attribut definiert eine eindeutige ID (ID), die im gesamten Dokument eindeutig sein muss.

Sie könnten Klassen für Elemente verwenden, die Sie kopieren/klonen möchten. Um diese Elemente auszuwählen, hat JQuery diese wunderbaren Class Selectors.

Oder Sie könnten die Id dieser Elemente ändern:

$('#rooms').clone().attr('id', 'rooms' + myIndex) 

Wenn Sie Elemente anhängen in die DOM kopieren, müssen Sie Verweise auf diese Elemente speichern, so dass Sie in der Lage sind zu remove sie später. Dies kann geschehen, indem man sie in ein array setzen:

var rooms = new Array(); 
.... 
for(....) { 
    var ref = $('#rooms').clone().attr('id', 'rooms' + myIndex); 
    rooms.push(ref); 
} 

Oder Sie arbeiten mit den generierten IDs und die ID-Selector ... Ihrer Wahl.

Um das Eingabefeld "Numero de niños" in einem der geklonten Bäume auszuwählen, können Sie ein JQuery Child Selector verwenden. Auf der Referenz könnten Sie eine change event handler registrieren.Dort können Sie eine Funktion registrieren, die jedes Mal aufgerufen wird, wenn das Eingabefeld geändert wird.