Post html elements added by Jquery to form

Question

I have a table and 2 buttons to add and to remove a set of html elements added dynamically through Jquery. When I submit the form. The action page just prints only the manually coded form elements only.

I have done this with $('#myTable tr:last').after(newElem);

in jQuery.

here is the link www.jsfiddle.net/abelkbil/3GbWH/3/

the out put as this

Array ( [rno] => 123 [adno] => Array ( [0] => 1235 it is not printing [1]=>x ) [rel....

Thanks for all the support

Answer 1

The form tag is not closed in the html. It should also contain both nested tables.

    <form name="f10"  id="myform" method=POST action="http://testxml.net84.net/abel-test/test.php">
    <table id="myTable">
    <tbody>
    <tr><th><th><th><th><th>Ration Number</th><td><input type="text" name="rno"></td><th>Grand total</th><td><input type="text" name="adno[0]"></td></tr>
    <tr><th>Aadaar Number</th><th>Relationship</th><th>Income from land</th><th>Salary/Pension</th><th>Income from business</th><th>Income from Labour</th><th>Rental Income</th><th>Any other income</th><th>total
    </th></tr>
    <input type="hidden" id="rowcount" value="1" >
    <tr><td><input type="text" name="adno[0]"></td>
    <td>
    <select name="relation">
    <option  value="owner">owner</option>
    <option  value="Father">Father </option>
    <option  value="Mother">Mother</option>
    <option  value="Son">Son</option>
    <option  value="Daughter">Daughter</option>
    <option  value="Husband">Husband</option>
    <option  value="Grandfather">Grandfather</option>
    <option value=" Grandmother">Grandmother</option>
    <option value="Mother-in-law">Mother-in-law</option>
    <option value="Father-in-law 8">Father-in-law</option>
    </select></td>
    <td><input type="text" name="il"></td>
    <td><input type="text" name="sal"></td>
    <td><input type="text" name="lb" ></td>
    <td><input type="text" name="ll" ></td>
    <td><input type="text" name="rl" ></td>
    <td><input type="text" name="ai" ></td>
    <td><input type="text" name="tot" ></td>
    </tr>
    </tbody>
    </table>
    <table>
    <tr><td><input type="submit" name="submit"></td></tr>
    <tr><td>


            <input type="button" id="btnAdd" value="add another name" /></td><td>
            <input type="button" id="btnDel" value="remove name" /></td>
       </tr>
    </table>
</form>

Answer 2

You haven't added a closing form tag. I would add that and move the opening form tag to outside the table but that's just my preference.

<form name="f10"  id="myform" method=POST action="http://testxml.net84.net/abel-test/test.php">
    <table id="myTable">
        .. table ..
    </table>
</form>

Also you are only adding an array for the adno['+rows+'] part of the added script. So even after adding the form tags you will only get the extra adno tag in the printed array.

For this you should name the elements as part of an array so name=relation would become name=adno['+rows+'][relation] . Then each row of new elements would become a new line in the outputted array.