jQuery and adding a row in form

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?

Why are you escaping double quotes inside a single quoted string? — gen_Eric, Jun 26 '12 at 15:25
For submit:
and in dodaj.php i try to get value from table for ex. $_POST['nazwamiedzynarodowa']; but it deesn't exist — user1483208, Jun 26 '12 at 15:27

score 0 · Accepted Answer · edited May 23 '17 at 11:48

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);

still doesn't work, this is my whole code with your changes: http://pastebin.com/7UH3jjVp — user1483208, Jun 26 '12 at 19:00
Ooops, it seems like you have a typo on line 135: nazwamiedzynarodowa[] and also as people say above,you need to correct apostrophes: $('#table > tbody > tr').eq(2).after('Substancje czynna: ... ') ,and also to be correct, move the table into form, that is:
......
...
. Two tips 4 help: inspect your page in Firefox with Ctrl+Shift+i and use validator https://addons.mozilla.org/firefox/addon/html-validator/ — Stano, Jun 26 '12 at 21:20
Updated your script, it is here: http://pastebin.com/VGAKwYf8 (uf, there is still one incorrect name on line 98: nazwamiedzynarodowa[0] -> should be either nazwamiedzynarodowa0[] or nazwamiedzynarodowa[], to indicate array variable for php). Please also correct it as you need. Btw, you can view all posted data by using — Stano, Jun 26 '12 at 22:03

jQuery and adding a row in form

1 Answers1