sending form with jquery and ajax after ajax request

Question

hy i've got a tricky problem. i have a form like

<form name="myform" id="myform" method="post">
<div id="box1">
<select name="sel1" id="sel1">...</select>
<select name="sel2" id="sel2">...</select>
</div>
<input type="submit" name="send" id="send">

Than i have a function which read the values of the select inputs, create a new select and rebuild the div box1.

So after all its like

<select name="sel1" id="sel1">...</select>
<select name="sel2" id="sel2">...</select>
<select name="sel3" id="sel3">...</select>
<select name="sel4" id="sel4">...</select>

if i hit the submit button it will send all things from the form, except the things from the div box.

what could be the problem?

if i dont recreate the div it works fine, but i want to add select inputs after one selection is made.

there is a loop which counts the name's and add one more.

thx

Answer 1

Your problem is multiple selects with the same ID.

<select name="sel1" id="sel1">...</select>
<select name="sel2" id="sel2">...</select>
<select name="sel3" id="sel1">...</select>
<select name="sel4" id="sel2">...</select>

Should be

<select name="sel1" id="sel1">...</select>
<select name="sel2" id="sel2">...</select>
<select name="sel3" id="sel3">...</select> <!-- sel3 -->
<select name="sel4" id="sel4">...</select> <!-- sel4 -->