Field Item Field Qty
-------- -----
-------- ------
-------- -----
-------- ------
ADD MORE
Item field and quantity are manually entered by user and if they need more items to be entered they will click on add more button
I have a form of 5 rows with two column each as above .
I want to add more text field dynamically, onclick add more button and I need to get the values through POST using PHP .
I have seen similar post but they either add only one input field at a time or a bunch of fields.
I want both fields item and qty to be added on a single click .
<form id="quick_post" method="post">
<table id="input_fields">
<tr>
<td><input class="orderinput" type="text" name="product[]">
</td>
<td><input class="orderquan" type="text" name="quantity[]" size="1" maxlength="3">
</td>
</tr>
<tr>
<td>
//In here i want to add more Input Text product fields
</td>
<td>
//In here i want to add more Input Text Quantity fields
</td>
</tr>
<tr>
<td><input class="more" type="submit" value="Addmore" name="addmore"></td>
</tr>
</table> </form>
[!] This solution need jQuery.Put the Add More button outside the form:
<form id="quick_post" method="post">
<table id="input_fields">
<tr>
<td><input class="orderinput" type="text" name="product[]" /></td>
<td><input class="orderquan" type="text" name="quantity[]" size="1" maxlength="3" /></td>
</tr>
</table>
</form>
<input class="more" type="button" value="Addmore" name="addmore" />
And add a click handler to your button:
$(function () {
$('input.more').on('click', function () {
var $table = $('#input_fields');
var $tr = $table.find('tr').eq(0).clone();
$tr.appendTo($table).find('input').val('');
});
});
Note that this need jQuery. Don't forget to check jsFiddle demo.
[BONUS] How to include jQuery in your project:
Put jQuery file and the above function inside the <head> tag.
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function () {
$('input.more').on('click', function () {
var $table = $('#input_fields');
var $tr = $table.find('tr').eq(0).clone();
$tr.appendTo($table).find('input').val('');
});
});
</script>