Hinzufügen von Eingabefeldern im Formular als dropdown-option ausgewählt

Wie Felder im Formular dynamisch

also mein Formular sieht wie folgt aus :

<form action="/reservation-add" method="post">
<select id="dropdownlist">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input></input>
</form>

Wenn ausgewählte e.g 3 es Anhängen 3 neue Eingänge (könnte ein array um alle Werte ) ich weiß, dass ich haben, javascript zu verwenden, aber ich weiß nicht, wie.

  • muss hinzufügen, text ein?
  • ja, es enthält Namen
  • api.jquery.com/change, api.jquery.com/append
  • Es gibt keine </input>!
  • ah ja, das ist richtig, es war nur zu zeigen, wo es Anhängen
  • er weiß nicht einmal wissen, javscript. alle Antworten in jquery
  • pls gehen Sie durch die w3schools.com/js tutorials

InformationsquelleAutor binar | 2015-07-08
  1. 4

    Nutzen Sie diesen Weg:

    $("#dropdownlist").change(function () {
    var numInputs = $(this).val();
    for (var i = 0; i < numInputs; i++)
        $("#inputArea").append('<input name="inputs[]" />');
});

    Haben andere div mit der ID "Input-Bereich":

    <div id="inputArea"></div>

    Snippet

    JS:

    $("#dropdownlist").change(function () {
  var numInputs = $(this).val();
  for (var i = 0; i < numInputs; i++)
    $("#inputArea").append('<input name="inputs[]" />');
});

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="dropdownlist">
  <option>Select...</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
<div id="inputArea"></div>

    • danke !! ich habe gerade ein clean up " Vorheriges ausgewähltes aus anderen post, und es funktioniert wie ich dachte
    • da bist du mit .append, auch wenn Sie Ihre dropdown-Auswahl, es nicht loszuwerden, die vorherigen Boxen. Sie können leere element mit .empty().append() oder einfach nur überschreibt das HTML-element mit .html('<input name="inputs[]" />)
    InformationsquelleAutor Praveen Kumar Purushothaman
  2. 1
    <form action="/reservation-add" method="post" id="appendform">
  <select id="dropdownlist">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
</select>
<input></input>
</form>

    Jquery-Code

      $(document).ready(function ()
 {
  $('#dropdownlist').on('change',function ()
  {
    var howmuch = $(this).val();
    var appendhtml = '';
    for (i = 0; i < howmuch; i++)
    { 
        appendhtml+= "<input name="+i+" value="">";
    }
    $('.appendform').append(appendhtml);
  });
 });
    InformationsquelleAutor Kashyap Patel
  3. 1
    $("#dropdownlist").on("change",function(e){
    for(i=0; i < $(this).val() ;i++){
        $("form").append($("<input type='text'/>"));
    }
})
    InformationsquelleAutor RRK
  4. 0

    versuchen, diese

    <script>
    function fireChange(val) {
    var form = document.forms[0];
        if(val) {
            for (var i = 0; i < val; i++) {
                var in = document.createElement('input');
                form.appendChild(in);
            }
        }
    }
</script>
<form action="/reservation-add" method="post" onchange="fireChange(this.value)">
<select id="dropdownlist">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input></input>
</form>
    InformationsquelleAutor Raghavendra
  5. 0

    Schritt 1--- id Hinzufügen, um die form

    Schritt 2---jquery onchange-Methode wird im code unten gezeigt

    <form action="/reservation-add" method="post" id="myForm">
    <select id="dropdownlist">
        <option value="1"></option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
</form>

$('#dropdownlist').on("change",function() {
          for(var i=0;i&lt;this.value;i++)
          {
              $("#myForm").append("<input type='text' name='myname[]'/>
               <br>");
          }
  });
    InformationsquelleAutor Unni Babu
  6. 0

    Zu bekommen, um das problem der Zugabe noch mehr input-Felder nach der ersten drop-down-Auswahl (wenn der Benutzer ändert Ihre Meinung nach der anfänglichen Auswahl), was der Fall ist mit all den Antworten auf dieser Seite.
    Finden Sie die Lösung unter:

    $("#dropdownlist").change(function () {
  $("#inputArea > :input").remove();
  var numInputs = $(this).val();
  for (var i = 0; i < numInputs; i++)
    $("#inputArea").append('<input name="inputs[]" />');
});
    • Ganz 2 Jahre zu spät aber trotzdem danke xd
    • Tx, dachte, es könnte jemand helfen. Bitte upvote meine Antwort.
    InformationsquelleAutor Grant
Schreibe einen Kommentar