Dynamische Input-Text-Feldern mit jQuery Mobile?

Möchte ich hinzufügen, dynamische input-text-Felder, die basierend auf dem Wert, der Anwender wählt aus einer select-Menü mit Hilfe von jQuery Mobile.

Ich bin erstellen einer app wo, wenn ein Benutzer wählen Sie die Anzahl der Kinder, zwei neue input-Feld angezeigt werden soll, der fragt nach dem Namen und Geburtstag des Kindes.

Diesen beiden Feldern angezeigt werden sollen, basierend auf dem Wert, der Benutzer wählt für die zB, wenn ein Benutzer wählt 2 als vier Eingabefelder angezeigt werden sollen.

Außerdem möchte ich wissen, wie kann ich Lesen Sie die Werte aus dieser input-Boxen usinh jQuery Mobile. Hier finden Sie einige HTML-code

    <li data-role="fieldcontain"> 
       <label for="children" class="select">Number of Kids</label>
       <select name="children" id="children" data-mini="true">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
       </select> 
   </li>
InformationsquelleAutor Vineet Sharma | 2012-05-17
  1. 2

    Erstellen die Anzahl der Eingänge abhängig, wie viele Kinder werden ausgewählt, können Sie das folgende tun:

    $(document).on('pageinit',function(){ //use this instead of dom ready, .on is dependent upon jQuery 1.7 + use bind or delegate if you have older version
    $('#children').on('change',function(){ //this function runs each time the select menu is changed
        children = $(this).val(); //set variable for number of children

        while(i <= children){ //loop through as long as i is less than number of children
            $('form').append('<label>Name</label><input type="text" name="child'+i+'Name" /><label>Age</label><input type="text" name="child'+i+'Age" />'); //append the input to form
            i++ //add one to our incremnt variable  
        }

        $('.ui-content').append('<input type="submit" value="Submit" />'); //add our submit button on end
        $('.ui-page').trigger('create'); //then tell JQM to recreate page because we added new content
    });
});​

    Hier ist ein funktionierendes Beispiel dafür -> http://jsfiddle.net/codaniel/CDUth/1/

    Zum ablesen der Werte kann man sehen, dass ich benutzt habe .val(). Das ist die einfachste Art des Lesens einen bestimmten input. Überprüfen Sie die Dokumentation für weitere Beispiele-> http://api.jquery.com/val/

    Können Sie sich auch serialisieren, die das ganze bilden, wie mit serialize(). Lesen Sie mehr hier -> http://api.jquery.com/serialize/

    InformationsquelleAutor codaniel
  2. 0

    Hier ist eine etwas verbesserte version von dem, was codaniel hatte. Er war gut, hatte aber kleine "Fehler" wie das Anhängen der Schaltfläche "senden" und wenn Sie wieder sagen wir 1 Kind, die Zahl der Eingänge nicht ändern würde.

    var html = '';
$('#children').on('change', function() {
   children = $(this).val();
   html = '';

   for (var i = 0; i < children; i++) {
        html += '<label>Name</label><input type="text" id="textName' + i + '" name="child' + i + 'Name" /><label>Age</label><input type="text" name="child' + i + 'Age" id="textAge' + i + '" />';
   }

   $('#kidsFields').html(html);
   $('#kidsFields').append('<input type="submit" value="Submit" />');

   $('.ui-page').trigger('create');
});

    http://jsfiddle.net/HwFFU/1/

    Als für das Auslesen der Werte, es ist schwer, Ihnen dabei zu helfen, ohne zu wissen, was Sie wollen mit Ihnen zu tun. Aber wie Codaniel gesagt, am einfachsten war, wäre eine Schleife über die Eingabe und Nutzung .val (), um den text rein!!!

    InformationsquelleAutor Mario
Schreibe einen Kommentar