Dynamically add form fields with jquery not posting
Submitting your form with a standard 'submit' button will not work in this case. The submit button does not take the formfields in account that are created after page load.
You'll have to write a submit handler that serializes your data and sends it to the server.
Try something like this:
$('#yourFormID').on('submit', function(e) {
//prevent the default submithandling
e.preventDefault();
//send the data of 'this' (the matched form) to yourURL
$.post('yourURL', $(this).serialize());
});
serverside you now have the $_POST variable filled with the keys and values.
You can also inspect the data that is send in firebug or any other webdeveloper tool.
EDIT:
I have altered your fiddle to work with my code:
I have wrapped a <form></form>
around your inputs and added a <input type='submit' />
button
hasiwarna
Updated on June 05, 2022Comments
-
hasiwarna almost 2 years
I have succeeded in setting up the form and making it work. However I have a issue
I got this Jquery from this
Everything works fine but when I post my data to a tcpdf newly created row didnt send, and mean time I want to add to the database also, please anyone knows the answer much appreciate. here is my codes
<script type="text/Javascript"> $(document).ready(function() { $('#btnAdd').click(function() { var num = $('.clonedSection').length; var newNum = new Number(num + 1); var newSection = $('#pq_entry_' + num).clone().attr('id', 'pq_entry_' + newNum); newSection.children(':first').children(':first').attr('id', 'quantity_' + newNum).attr('name', 'quantity_' + newNum); newSection.children(':nth-child(2)').children(':first').attr('id', 'rcptdelvry_' + newNum).attr('name', 'rcptdelvry_' + newNum); newSection.children(':nth-child(2)').children(':first').attr('id', 'weight_' + newNum).attr('name', 'weight_' + newNum); newSection.children(':nth-child(2)').children(':first').attr('id', 'volume_' + newNum).attr('name', 'volume_' + newNum); newSection.insertAfter('#pq_entry_' + num).last(); $('#btnDel').prop('disabled',''); if (newNum == 5) $('#btnAdd').prop('disabled','disabled'); }); $('#btnDel').click(function() { var num = $('.clonedSection').length; // how many "duplicatable" input fields we currently have $('#pq_entry_' + num).remove(); // remove the last element // enable the "add" button $('#btnAdd').prop('disabled',''); // if only one element remains, disable the "remove" button if (num-1 == 1) $('#btnDel').prop('disabled','disabled'); }); $('#btnDel').prop('disabled','disabled'); }); </script>
Here is my Html part
<fieldset> <ul id="pq_entry_1" class="clonedSection"> <label class="textfield">QUANTITY <li><input type="text" name="quantity_1" id="quantity_1"></li> <br class="clear"> </label> <label class="textfield">TYPE<br> <li><select name="rcptdelvry_1" id="rcptdelvry_1"> <option value="">-- Please Select --</option> <optgroup label="LCL CARGO"> <option value="PACKAGES">PACKAGES</option> <option value="CARTONS">CARTONS</option> <option value="BALES">BALES</option> <option value="BOX">BOX</option> <option value="PALETTES">PALETTES</option> <option value="CRATE">CRATE</option> </optgroup> <optgroup label="FULL CONTAINER"> <option value="20' Bulk (with roof hatches)">20' Bulk (with roof hatches)</option> <option value="20' Collapsible Flat Rack">20' Collapsible Flat Rack</option> <option value="20' Dry">20' Dry</option> <option value="20' Flat Rack">20' Flat Rack</option> <option value="20' Highvent w/o roof hatches">20' Highvent w/o roof hatches</option> <option value="20' Open Top">20' Open Top</option> <option value="20' Porthole (conair)">20' Porthole (conair)</option> <option value="20' Reefer">20' Reefer</option> <option value="20' Tank">20' Tank</option> <option value="40' Artificial Tweendeck">40' Artificial Tweendeck</option> <option value="40' Collapsible Flat Rack">40' Collapsible Flat Rack</option> <option value="40' Dry">40' Dry</option> <option value="40' Flat Rack">40' Flat Rack</option> <option value="40' High Cube">40' High Cube</option> <option value="40' High Cube Reefer">40' High Cube Reefer</option> <option value="40' Open Top">40' Open Top</option> <option value="40' Starvent (9'6)">40' Starvent (9'6)</option> <option value="40' Tank">40' Tank</option> <option value="45' High Cube">45' High Cube</option> <option value="45' High Cube Reefer">45' High Cube Reefer</option> </optgroup> </select></li> <br class="clear"> </label> <label class="textfield">WEIGHT (kg per container) <li><input type="tel" name="weight_1" id="weight_1"></li> <br class="clear"> </label> <label class="textfield">VOLUME (cbm): <li><input type="tel" name="volume_1" id="volume_1"></li> <br class="clear"> </label> </ul> </fieldset> <input type='button' id='btnAdd' size="15" value='add another row' /> <input type='button' id='btnDel' value='delete row' /> </div> </div>
Here is my tcpdf part
<td width="0" height="0"> : {$_POST['quantity_1']}X{$_POST['rcptdelvry_1']}{$_POST['quantity_2']}X{$_POST['rcptdelvry_2']} </td>