Question

I have a following issue – I’m using jQuery to add additional input forms to the page. But added rows are not passed to the server with form submission.

Here is HTML of one row:

<form name="form1" method="post" action="">

<div id="input1" class="clonedInput">

<label for="answer1" class="answer_label"> Answer: </label>
<input type="text" name="answer1" id="answer1" value="Answ1"/>
<label for="answer1pt"> Points: </label>
<input type="text" name="answer1pt" id="answer1pt" size="2" value="1"/>

for cloning I use following JavaScript:

$('#btnAddAnswer').click(function() {

var num  = $('.clonedInput').length;
var newNum = new Number(num + 1);
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum); 

newElem.find(":nth-child(1)").attr('for', 'answer' + newNum);
newElem.find(":nth-child(2)").attr('id', 'answer' + newNum).attr('name', 'answer' + newNum).attr('value', '');
newElem.find(":nth-child(3)").attr('for', 'answer' + newNum + 'pt');
newElem.find(":nth-child(4)").attr('id', 'answer' + newNum + 'pt').attr('name', 'answer' + newNum + 'pt').attr('value', ''); 

$('#input' + num).after(newElem);
$('#btnDelAnswer').attr('disabled','');

if (newNum == 5)
        $('#btnAddAnswer').attr('disabled','disabled');
});

So basically I first clone div with all content and then just adjust id’s and other attributes.

The problem is that when running this code, everything displays on the page and seems ok, but when I submit the form, it appears that only first element is sent to the server.

This code perfectly works in Chrome and even IE, but not in Firefox. Any suggestions on what I’m doing wrong or what might cause this problem?

Thanks in advance!

Answer 1

Problem solved. Thanks Gazler, although there was no problem with actual HTML and Firefox error console didn’t show any messages, I checked Developers Tools in Chrome and it said that div tag was inside table body, which, apparently, caused all the troubles.