How can I put the selected option of a <select> from a dynamically generated form into an input field

Question

I have a form, where you can dynamically add steps by clicking a button. Each step contains different input fields. One step has a ,which is filled with some options like this.

 <select id="zutatenListe" name="zutatenListe" onchange="updateZutaten()">
    <option value="0">Tomate</option>
    <option value="1">Brot</option>
</select>

It is possible that there are multiple of it, all with the same id and name. Next to the select, there is always an input field like this:

<input id="selectedZutat" type="text" value="" name="wiegen_zutat[]">

What I want to make is that when you change the selected option, your selected option will be shown only in the input element next to the changed select. It works for the first one, but for all other selects, it doesn't. My code is this:

function updateZutaten(){
        var eingabe;
        eingabe = $("#zutatenListe option:selected").text();    
        $( "#selectedZutat").val(eingabe);
}

My guess is that it only works for the first select element, because the other select elements have the same id. Has anyone an idea how to take care of this problem? Please don't get confused by the German names, but I'm from Germany.

Thank you everyone :)

Answer 1

Identifiers must be unique and as you are using jquery bind event using it.

Add a common class to target the <select> element, this will help you select them using Class Selector (".class") and bind event using it, then you can use .next() target the next <input> element.

Here in exmple I have added zutatenListe class to <select> element.

 $(function() { $(document).on('change', '.zutatenListe', function() { var text = $(this).find("option:selected").text(); $(this).next(".selectedZutat").val(text); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <select class="zutatenListe" name="zutatenListe"> <option value="0">Tomate</option> <option value="1">Brot</option> </select> <input class="selectedZutat" type="text" value="" name="wiegen_zutat[]"> </div> <div> <select class="zutatenListe" name="zutatenListe"> <option value="0">Tomate</option> <option value="1">Brot</option> </select> <input class="selectedZutat" type="text" value="" name="wiegen_zutat[]"> </div> 

Answer 2

Maybe work on the change() event?

$("#zutatenListe").change( function () {
        var eingabe;
        eingabe = $("#zutatenListe option:selected").text();    
        $( "#selectedZutat").val(eingabe);
})

So it will always set the selected option when the change event fires?

Answer 3

Use unique ID attributes for each set of input and selects. HTML and Jquery require this.

HTML4 Spec HTML5 Spec

Answer 4

Here's a way to do it in JavaScript.

 function updateZutaten(element) { var option = element.options[element.selectedIndex]; var parent = element.parentElement; var textBox = parent.getElementsByTagName("input")[0]; textBox.value = option.text; } 

 .formItems { list-style-type:none; padding:0; margin:0; } .formItems li { border-bottom:1px solid #EEE; padding: 10px 0; } 

 <form id="myForm"> <ul class='formItems'> <li> <select id="zutatenListe" name="zutatenListe" onchange="updateZutaten(this)"> <option value="">--Choose--</option> <option value="0">Tomate</option> <option value="1">Brot</option> </select> <input id="selectedZutat" type="text" value="" name="wiegen_zutat[]" /> </li> <li> <select id="zutatenListe" name="zutatenListe" onchange="updateZutaten(this)"> <option value="">--Choose--</option> <option value="0">Tomate</option> <option value="1">Brot</option> </select> <input id="selectedZutat" type="text" value="" name="wiegen_zutat[]" /> </li> </ul> </form>