Question

I have my form in a table and I use this code to add new row with new fields:

$("input.buttonCAdd").click(function(){ 
    $('#table > tbody > tr').eq(2).after('<tr><td width=\"25%\"><b>Substancje czynna:</b></td><td width=\"25%\"><select name=\"nazwamiedzynarodowa[]\"><option selected=\"selected\">nazwa1</option><option>nazwa2</option></select></td><td> Dawka: <br><input name=\"dawka[]\" type=\"text\"> <br></td><td>Jednostka:<br><select name=\"jednostka[]\"><option selected=\"selected\">jed1</option><option>jed2</option></select></td> </tr>')
});

That works ok, but my form “doesn’t see” new fields and I don’t get data from that fields. How can I fix it?

Answer 1

I am not sure if this can help you, but I guess the problem may be here:
” If the HTML is more complex than a single tag without attributes, as it is in the above example, the actual creation of the elements is handled by the browser’s innerHTML mechanism. ” Quoted from jQuery docs (see also 2) I guess if you avoid innerHTML, it can work. Try to use standard javascript methods:

//new row
var newrow = document.createElement('tr'); // creates empty row

//1st cell
var newcell = newrow.insertCell(0); // create and insert empty cell to newrow + returns cell reference
newcell.style.width = '25%';
newcell.style.fontWeight = 'bold';
newcell.appendChild(document.createTextNode('Substancje czynna:'));

//2nd cell
var newcell = newrow.insertCell(1);
newcell.style.width = '25%';
var newselect = document.createElement('select');
newselect.setAttribute('name', 'nazwamiedzynarodowa[]');
newselect.options[0] = new Option('nazwa1', 'opt1');
newselect.options[1] = new Option('nazwa2', 'opt2');
newselect.options[0].selected = true;
newcell.appendChild(newselect);

//3rd cell
var newcell = newrow.insertCell(2);
newcell.appendChild(document.createTextNode(' Dawka: '));
newcell.appendChild(document.createElement('br'));

//4th cell
var newcell = newrow.insertCell(3);
var newselect = document.createElement('select');
newselect.setAttribute('name', 'jednostka[]');
newselect.options[0] = new Option('jed1', 'opt1');
newselect.options[1] = new Option('jed2', 'opt2');
newselect.options[0].selected = true;
newcell.appendChild(newselect);

//alert(newrow.innerHTML);
$('#table > tbody > tr').eq(2).after(newrow);