Search table with select2 dropdowns in one column - javascript

I am creating a table with one column consisting of select2 dropdowns. Refer fig below :
HTML code looks like this :
<table class="table table-hover table-borderless" id="tabpro">
<tbody class="list">
<tr class="t-row">
<td class="name" style="width: 370px;padding-left:50px;">
<h5>BR-2C-4567</h5>
</td>
<td class="driver-name">
<form class="edit_truck" id="edit_truck_1" action="/trucker/trucks/1/update_driver.1" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" /><input type="hidden" name="_method" value="put" /><input type="hidden" name="authenticity_token" value="c113UiPfI8Jk72/iivm9qJhIys8udhgaynEJUaMHjkTqpZIm+9R1VYbe1QN5+0jrGReMOb2E9w75fsvI37Mh/w==" />
<span class="select2box">
<select class="select-example" name="truck[driver_id]" id="truck_driver_id">
<option value="">No drivers selected</option>
<option value="1">Shubham</option>
<option selected="selected" value="2">XYZ</option>
</select>
</span>
<input type="submit" name="commit" value="Update Driver" class="btn btn-default" />
</form>
</td>
</tr>
<tr class="t-row">
<td class="name" style="width: 370px;padding-left:50px;">
<h5>sasadga</h5>
</td>
<td class="driver-name">
<form class="edit_truck" id="edit_truck_2" action="/trucker/trucks/2/update_driver.2" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" /><input type="hidden" name="_method" value="put" /><input type="hidden" name="authenticity_token" value="yy8hpB+cBT2bcyyYBn+ZmLHUT+nBVGg0QPwytmtZ8QVS18TQx5dTqnlClnn1fWzbMIsJH1KmhyBz8/AvF+1evg==" />
<span class="select2box">
<select class="select-example" name="truck[driver_id]" id="truck_driver_id">
<option value="">No drivers selected</option>
<option selected="selected" value="1">Shubham</option>
<option value="2">XYZ</option>
</select>
</span>
<input type="submit" name="commit" value="Update Driver" class="btn btn-default" />
</form>
</td>
</tr>
....
</table>
I'm able to search Vehicles using listjs plugin. But how to search drivers ?
I tried using this code but it doesn't work.(I'm javascript, jQuery beginner).
$('.searchDriver').keyup(function(){
var srchTerm = $(this).val(),
rows = $('tbody.list').find('tr'),
opt = $('.select2box').find('select option:selected');
if (srchTerm.length > 0) {
rows.stop().hide();
if($('.select2box').find('select option:selected').text().indexOf('x') == -1){
opt.closest('tr').stop().show();
}
}else {
rows.stop().show();
}
});
Please share a working example/ guide me to accomplish this task.

Related

Form not being submitted with correct data

I have a form for a quiz that has 3 different inputs. Number of questions, and two types of tests. i am modifying existing code that works fine but we want the layout different which requires it to be coded differently. this is the version that isn't working. Basically I need the number of questions and category to be sent with the button clicked. For some reason it isn't sending either. Any help would be great, thanks!
<strong>Questions</strong>
<select name="num_questions">
{section name=foo start=10 loop=31}
<option value={$smarty.section.foo.index}>{$smarty.section.foo.index}</option>
{/section}
</select>
</div>
<select onchange="$('.questions_{$c.categorynum}').val(this.value);" name="category">
{foreach from=$categories item=c}
{if ($c.categorynum != 1 and $c.categorynum < 8)}
<div class="questiontitle" style="float:left;">
<option value={$c.categorynum}><strong>{$c.name}</strong></option>
</div>
{/if}
{/foreach}
</select>
<form action="test.php" method="post" style="float:left;">
<input type="submit" value="Create Exam" name="create" style="margin:0 3px;"/>
<input type="hidden" name="category" class="category" value="{$c.categorynum}"/>
<input type="hidden" class="questions_{$c.categorynum}" name="num_questions" value="10"/>
</form>
<form action="simulation.php" method="post" style="float:left;">
<input type="submit" name="flashcard" value="Flash Cards" style="margin:0 3px;"/>
<input type="hidden" name="create" value="1"/>
<input type="hidden" name="category" value="{$c.categorynum}"/>
<input type="hidden" class="questions_{$c.categorynum}" name="numquestions" value="10"/>
</form>

get a item ID by its child (vanilla JS)

I want to check if a form has an option CAD (in 7th level), if it has, then get the form id.
// first level
<form id="15" method="post" action="/open a new page" target="_blank">
//second level- 1
<div>
<input type="hidden" id="CHECK" name="CHECK">
</div>
//secode leve - 2
<table cellpadding="0" cellspacing="0" border="0" width="100%">
// 3rd level
<tbody>
//4th level
<tr>
// 5th level
<td>
<input type="hidden" name="name" value="Frank">
<input type="hidden" name="identifier" value="12345">
<input type="hidden" name="code" value="299 ">
<input type="hidden" name="type" value="060201">
<input type="hidden" name="claim" value="4567">
<input type="hidden" name="departement" value="IT">
<input type="hidden" name="city" value="S25">
<input type="hidden" name="num" value="28936">
<input type="hidden" name="typeClient" value="2">
<input type="hidden" name="numTel" value="4444">
<input type="hidden" name="prod" value="MMM">
<input type="hidden" name="label" value="doc">
//6th level
<select name="docToSeize" style="width:150px" class="form1">
// 7th levle
<option value="11">RAP </option>
<option value="12">CAD </option>
<option value="18">GGO</option>
<option value="1A">HYU</option>
</select>
</td>
<td valign="top">
<input type="submit" class="boutonbleuok" style="cursor: hand" value="ok" onclick="label">
</td>
</tr>
</tbody>
</table>
</form>
You can use the function querySelectorAll to get the options and the function closest to find the parent form.
Array.prototype.forEach.call(document.querySelectorAll('[name="docToSeize"] option'), function(opt) {
if (opt.textContent.trim() === 'CAD') {
console.log(opt.closest('form').getAttribute('id'));
return;
}
});
form {
display: none
}
<form id="15" method="post" action="/open a new page" target="_blank">
//second level- 1
<div>
<input type="hidden" id="CHECK" name="CHECK">
</div>
//secode leve - 2
<table cellpadding="0" cellspacing="0" border="0" width="100%">
// 3rd level
<tbody>
//4th level
<tr>
// 5th level
<td>
<input type="hidden" name="name" value="Frank">
<input type="hidden" name="identifier" value="12345">
<input type="hidden" name="code" value="299 ">
<input type="hidden" name="type" value="060201">
<input type="hidden" name="claim" value="4567">
<input type="hidden" name="departement" value="IT">
<input type="hidden" name="city" value="S25">
<input type="hidden" name="num" value="28936">
<input type="hidden" name="typeClient" value="2">
<input type="hidden" name="numTel" value="4444">
<input type="hidden" name="prod" value="MMM">
<input type="hidden" name="label" value="doc"> //6th level
<select name="docToSeize" style="width:150px" class="form1">
// 7th levle
<option value="11">RAP </option>
<option value="12">CAD </option>
<option value="18">GGO</option>
<option value="1A">HYU</option>
</select>
</td>
<td valign="top">
<input type="submit" class="boutonbleuok" style="cursor: hand" value="ok" onclick="label">
</td>
</tr>
</tbody>
</table>
</form>
Select the form, then select the options inside it and iterate over them.
const form = document.querySelector('form');
const options = [...form.querySelector('select[name=docToSeize]').children];
if (options.some(option => option.textContent.trim() === 'CAD')) console.log(form.id);
<form id="15" method="post" action="/open a new page" target="_blank">
<select name="docToSeize" style="width:150px" class="form1">
<option value="11">RAP </option>
<option value="12">CAD </option>
<option value="18">GGO</option>
<option value="1A">HYU</option>
</select>
</form>

Jquery - Remove last append item

I'm not familiar with Jquery in the slightest admittedly although it is in the task of things I need to learn. I currently have a project I am working on which requires an add / remove function similar to what is on an invoice.
I would like to be able to add a "Remove" function to the last item appended incase mistakes get made etc
$(document).ready(function() {
var currentItem = 1;
$('#addnew').click(function(){
currentItem++;
$('#items').val(currentItem);
var strToAdd = '<br>Product: <select class="form" name="Product'+currentItem+'" id="product'+currentItem+'" ><option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option><option value="Aramax Energy Drink">Aramax Energy Drink</option></select> Nicotine: <select class="form" name="nicotine'+currentItem+'" id="nicotine'+currentItem+'"> <option value="N/A">n/a</option><option value="3mg">3mg</option><option value="6mg">6mg</option><option value="12mg">12mg</option></select> Quantity:<input class="form3" name="qty'+currentItem+'" id="qty'+currentItem+'" type="number" /><br>';
$('#data').append(strToAdd);
});
});
$('#delete').on('click', function() {
$('#items').parents("br").remove();
});
//]]>
</script><div class="form2">
<form method="POST" action="invoicereg.php" id="data" name="sub">
Product:
<select class="form" name="product1" id="product1">
<option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option>
<option value="Aramax Energy Drink">Aramax Energy Drink</option>
</select>
Nicotine:
<select class="form" name="nicotine1" id="nicotine1">
<option value="N/A">n/a</option>
<option value="3mg">3mg</option>
<option value="6mg">6mg</option>
<option value="12mg">12mg</option>
</select>
Quantity:<input class="form3" type="number" id="qty1" name="qty1"></input><br>
</form>
<br>
<input class="button" type="button" id="addnew" name="addnew" value="Add new item" />
<input type="hidden" form="data" id="items" name="items" value="1" />
<input class="button" type="button" id="delete" name="delete" value="Remove" />
<input class="button" type="submit" form="data" value="SUBMIT">
</div>
</div>
</body>
</html>
If anyone can show and / or explain to me how this is done it would be greatly appreciated.
Regards
I rapped the content of your form and the content you add with a <div>.
Then you can do $('#data > div').last().remove();
#data is the id of your form.
#data > div will select all the <div> that is a first child of your form.
.last() selects the last element.
Note if your would like to keep atleast 1 element in your form you can do this:
if ($('#data > div').length > 1) {
$('#data > div').last().remove();
}
$(document).ready(function() {
var currentItem = 1;
$('#addnew').click(function(){
currentItem++;
$('#items').val(currentItem);
var strToAdd = '<div><br>Product: <select class="form" name="Product'+currentItem+'" id="product'+currentItem+'" ><option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option><option value="Aramax Energy Drink">Aramax Energy Drink</option></select> Nicotine: <select class="form" name="nicotine'+currentItem+'" id="nicotine'+currentItem+'"> <option value="N/A">n/a</option><option value="3mg">3mg</option><option value="6mg">6mg</option><option value="12mg">12mg</option></select> Quantity:<input class="form3" name="qty'+currentItem+'" id="qty'+currentItem+'" type="number" /><br></div>';
$('#data').append(strToAdd);
});
});
$('#delete').on('click', function() {
if ($('#data > div').length > 1) {
$('#data > div').last().remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</script><div class="form2">
<form method="POST" action="invoicereg.php" id="data" name="sub">
<div>
Product:
<select class="form" name="product1" id="product1">
<option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option>
<option value="Aramax Energy Drink">Aramax Energy Drink</option>
</select>
Nicotine:
<select class="form" name="nicotine1" id="nicotine1">
<option value="N/A">n/a</option>
<option value="3mg">3mg</option>
<option value="6mg">6mg</option>
<option value="12mg">12mg</option>
</select>
Quantity:<input class="form3" type="number" id="qty1" name="qty1"></input><br>
</div>
</form>
<br>
<input class="button" type="button" id="addnew" name="addnew" value="Add new item" />
<input type="hidden" form="data" id="items" name="items" value="1" />
<input class="button" type="button" id="delete" name="delete" value="Remove" />
<input class="button" type="submit" form="data" value="SUBMIT">
</div>
</div>
</body>
</html>
use some over all div like <div class="items">yourcode</div> .Then apply with $('.items').last().remove()
$(document).ready(function() {
var currentItem = 1;
$('#addnew').click(function() {
currentItem++;
$('#items').val(currentItem);
var strToAdd = '<br><div class="items">Product: <select class="form" name="Product' + currentItem + '" id="product' + currentItem + '" ><option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option><option value="Aramax Energy Drink">Aramax Energy Drink</option></select> Nicotine: <select class="form" name="nicotine' + currentItem + '" id="nicotine' + currentItem + '"> <option value="N/A">n/a</option><option value="3mg">3mg</option><option value="6mg">6mg</option><option value="12mg">12mg</option></select> Quantity:<input class="form3" name="qty' + currentItem + '" id="qty' + currentItem + '" type="number" /><br></div>';
$('#data').append(strToAdd);
});
});
$('#delete').on('click', function() {
$('.items').last().remove()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form2">
<form method="POST" action="invoicereg.php" id="data" name="sub">
<div class="items">
Product:
<select class="form" name="product1" id="product1">
<option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option>
<option value="Aramax Energy Drink">Aramax Energy Drink</option>
</select>
Nicotine:
<select class="form" name="nicotine1" id="nicotine1">
<option value="N/A">n/a</option>
<option value="3mg">3mg</option>
<option value="6mg">6mg</option>
<option value="12mg">12mg</option>
</select>
Quantity:
<input class="form3" type="number" id="qty1" name="qty1"></input>
<br>
</div>
</form>
<br>
<input class="button" type="button" id="addnew" name="addnew" value="Add new item" />
<input type="hidden" form="data" id="items" name="items" value="1" />
<input class="button" type="button" id="delete" name="delete" value="Remove" />
<input class="button" type="submit" form="data" value="SUBMIT">
</div>
</div>
It would be better to wrap the added items in a div, say something like:
<div class="added-item"></div>
then when you click the remove button you will have to find all these added items
var added_items = $('.added-item');
and then remove the last element
added_items.last().remove();

Styling Dynamic Rows - Fluid

I have a small set of rows for a program i'm creating. Im trying to create a set of fields that a user can fill in, some time we need more rows than one so i created a javascript dynamically add row set.
I'm trying to style the fields for a fluid layout (between a pc and tablet). Im having difficulty getting them to work with both layout sizes. Secondly if i try to add headings (of some description) to the rows i can never get them to line up at all.
Any Suggestions? I have a link to some of my code here --> https://jsfiddle.net/c92qvuxe/
<div id="materials">
<!-- Start of Table -->
<form name="Add_Units" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
<fieldset>
<div id="row">
<input name="Page_0" type="text" value=""/>
<input name="Weight_0" type="text" value=""/>
<select name="Finish_0">
<option value="Gloss">Gloss</option>
<option value="Silk">Silk</option>
<option value="Matt">Matt</option>
<option value="Offset">Offset</option>
<option value="NCR">NCR</option>
</select>
<input name="PaperName_0" type="text" value=""/>
<input name="Grain_0" type="text" value=""/>
<select name="Size_0">
<option value="SRA3">SRA3</option>
<option value="SRA2">SRA2</option>
<option value="SRA1">SRA1</option>
<option value="B2">B2</option>
<option value="B1">B1<option>
</select>
<input name="Supplier_0" type="text" value=""/>
<input name="Stock_0" type="checkbox" value="1"/>
<input name="SheetQty_0" type="text" value=""/>
</div>
<div id="newrow" style="display: none;">
<input name="Page_" type="text" value="" size="5" maxlength="55" />
<input name="Weight_" type="text" value="" size="10" maxlength="55" />
<select name="Finish_">
<option value="Gloss">Gloss</option>
<option value="Silk">Silk</option>
<option value="Matt">Matt</option>
<option value="Offset">Offset</option>
<option value="NCR">NCR</option>
</select>
<input name="PaperName_" type="text" value="" size="10" maxlength="55" />
<input name="Grain_" type="text" value="" size="10" maxlength="55" />
<select name="Size_">
<option value="SRA3">SRA3</option>
<option value="SRA2">SRA2</option>
<option value="SRA1">SRA1</option>
<option value="B2">B2</option>
<option value="B1">B1<option>
<input name="Supplier_" type="text" value="" size="10" maxlength="55" />
<input name="Stock_" type="checkbox" value="1" size="10" />
<input name="SheetQty_" type="text" value="" size="10" maxlength="55" />
</div>
<p>
<input type="button" id="add_row()" onclick="add_row()" value="Add Row" />
<!--<input type="submit" name="Add_Unit" value="Save Units" />-->
</p>
<p> </p>
</fieldset>
</form>
<br />

What's the issue in getting the values from dynamically appended table row fields in post array after submitting the form?

I've an HTML form. This form is containing HTML table. The actual HTML table is very large. For your reference I'm showing below the HTML code of a form with table containing only two rows:
<form action="rebates.php" role="form" method="post">
<div style="margin-left: 12px" class="col-xs-4">
<div class="form-group">
<label for="company_name" class="col-lg-4">Manufacturer </label>
<div class="col-lg-7">
<select id="company_name" name="company_name" class="form-control">
<option value="" selected='selected'>Select Manufacturer</option>
<option value="33" >Eywa Solutions</option>
<option value="37" >Amazon</option>
<option value="40" >Test</option>
<option value="42" >RK</option>
<option value="46" >Santa Margherita</option>
</select>
</div>
</div>
</div>
<div style="margin-left: -61px" class="col-xs-4">
<div class="form-group">
<label for="product_id" class="col-lg-3">Product </label>
<div class="col-lg-7">
<select id="product_id" name="product_id" class="form-control">
<option value="" selected='selected'>Select Product</option>
<option value="5" >Chesse</option>
<option value="8" >Laptop an</option>
<option value="9" >Prosecco</option>
</select>
</div>
</div>
</div>
</div>
<br/>
<div class="col-lg-2"></div>
<div class="col-md-8">
<div style="overflow:auto" class="well">
<button style="float:right; margin-bottom: 20px" class="btnAdd" type="button" class="btn btn-default"><i class="icon-plus"></i> Add New Rebate</button>
<br/>
<div class="table-responsive">
<table id="blacklistgrid" class="table table-bordered table-hover table-striped">
<thead>
<tr id="Row1">
<th style="vertical-align:middle" >Pack Of</th>
<th style="vertical-align:middle">Quantity</th>
<th style="vertical-align:middle">Volume</th>
<th style="vertical-align:middle">Unit</th>
<th style="vertical-align:middle">Rebate Amount</th>
</tr>
</thead>
<tbody>
<tr id="Row2">
<td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[]" value="2" class="form-control" size="8"/></td>
<td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
<td>
<div class="btn-group">
<select name="units[]" class="form-control">
<option value="" selected='selected'>Select Unit</option>
<option value="5" >Microsecond</option>
<option value="7" >oz</option>
<option value="9" >ml</option>
<option value="10" >L</option>
<option value="12" >gms</option>
</select>
</div>
</td>
<td>
<input type="text" name="amount[]" value="3.00" class="form-control" size="9"/>
</td>
</tr>
<tr>
<td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[]" value="4" class="form-control" size="8"/></td>
<td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
<td>
<div class="btn-group">
<select name="units[]" class="form-control">
<option value="" selected='selected'>Select Unit</option>
<option value="5" >Microsecond</option>
<option value="7" >oz</option>
<option value="9" >ml</option>
<option value="10" >L</option>
<option value="12" >gms</option>
</select>
</div>
</td>
<td><input type="text" name="amount[]" value="7.00" class="form-control" size="9"/></td>
</tr>
</tbody>
</table>
<button style="float:right" class="btnAdd" type="button" class="btn btn-default"><i class="icon-plus"></i> Add New Rebate</button>
</div>
</div> <!-- /span8 -->
<div class="row">
<div class="col-xs-5"></div>
<div style="margin-left: -9px" class="col-xs-5">
<button type="submit" class="btn btn-primary">Preview</button>
</div>
</div>
</div>
</form>
I'm dynamically appending rows to the table by clicking on a button(the button is present in a tag, you can see in above code). The various JQuery code snippets I tried for adding rows dynamically are as follows. All are working:
/*JQuery for appending rows at the end of table*/
<script language="javascript">
$( document ).ready(function() {
$('.btnAdd').click(function () {
var count = 1,
first_row = $('#Row2');
//while (count-- > 0) first_row.clone().appendTo('#blacklistgrid');
while (count-- > 0) first_row.clone().removeAttr('id').appendTo('#blacklistgrid');
//while (count-- > 0) $('#blacklistgrid > tbody:last').append(first_row.clone().removeAttr('id'));
//while (count-- > 0) first_row.clone().appendTo('#blacklistgrid').attr('id','Row' + $('#blacklistgrid tr').length);
});
});
</script>
From above code snippets you can suggest me the most optimum one. Now the issue I'm facing is if I append one or more rows at the end of table, fill data in the textfields of each appended row and submit the form by clicking on Submit button, in $_POST on rebates.php I'm not getting the data from appended rows. I'm getting the data only from the rows which are previously present when the page loads. So can anyone help me in getting the values from the dynamically appended rows also? Thanks for spending some of your valuable time in understanding my issue. Waiting for your precious replies. Still, if you need any further information regarding the question I can provide you the same.
I'm using following jQuery libraries:
<script src="http://localhost/smart-rebate-web/web/js/libs/jquery-1.9.1.min.js"></script>
<script src="http://localhost/smart-rebate-web/web/js/libs/jquery-ui-1.10.0.custom.min.js"></script>
<script src="http://localhost/smart-rebate-web/web/js/libs/bootstrap.min.js"></script>
<script src="http://localhost/smart-rebate-web/web/js/plugins/validate/jquery.validate.js"></script>
<script src="http://localhost/smart-rebate-web/web/js/Application.js"></script>
<script src="http://localhost/smart-rebate-web/web/js/demo/validation.js"></script>
Here is what i tested and works fine:
the .html file :
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var first_row = $('#Row2').clone();
$('.btnAdd').click(function () {
var count = 1;
first_row.clone().removeAttr('id').appendTo('#blacklistgrid');
});
});
</script>
</head>
<body>
<form action="formdata.php" role="form" method="post">
<div style="margin-left: 12px" class="col-xs-4">
<div class="form-group">
<label for="company_name" class="col-lg-4">Manufacturer </label>
<div class="col-lg-7">
<select id="company_name" name="company_name" class="form-control">
<option value="" selected='selected'>Select Manufacturer</option>
<option value="33" >Eywa Solutions</option>
<option value="37" >Amazon</option>
<option value="40" >Test</option>
<option value="42" >RK</option>
<option value="46" >Santa Margherita</option>
</select>
</div>
</div>
</div>
<div style="margin-left: -61px" class="col-xs-4">
<div class="form-group">
<label for="product_id" class="col-lg-3">Product </label>
<div class="col-lg-7">
<select id="product_id" name="product_id" class="form-control">
<option value="" selected='selected'>Select Product</option>
<option value="5" >Chesse</option>
<option value="8" >Laptop an</option>
<option value="9" >Prosecco</option>
</select>
</div>
</div>
</div>
</div>
<br/>
<div class="col-lg-2"></div>
<div class="col-md-8">
<div style="overflow:auto" class="well">
<button style="float:right; margin-bottom: 20px" class="btnAdd" type="button" class="btn btn-default"><i class="icon-plus"></i> Add New Rebate</button>
<br/>
<div class="table-responsive">
<table id="blacklistgrid" class="table table-bordered table-hover table-striped">
<thead>
<tr id="Row1">
<th style="vertical-align:middle" >Pack Of</th>
<th style="vertical-align:middle">Quantity</th>
<th style="vertical-align:middle">Volume</th>
<th style="vertical-align:middle">Unit</th>
<th style="vertical-align:middle">Rebate Amount</th>
</tr>
</thead>
<tbody>
<tr id="Row2">
<td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[]" value="2" class="form-control" size="8"/></td>
<td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
<td>
<div class="btn-group">
<select name="units[]" class="form-control">
<option value="" selected='selected'>Select Unit</option>
<option value="5" >Microsecond</option>
<option value="7" >oz</option>
<option value="9" >ml</option>
<option value="10" >L</option>
<option value="12" >gms</option>
</select>
</div>
</td>
<td>
<input type="text" name="amount[]" value="3.00" class="form-control" size="9"/>
</td>
</tr>
<tr>
<td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[]" value="4" class="form-control" size="8"/></td>
<td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
<td>
<div class="btn-group">
<select name="units[]" class="form-control">
<option value="" selected='selected'>Select Unit</option>
<option value="5" >Microsecond</option>
<option value="7" >oz</option>
<option value="9" >ml</option>
<option value="10" >L</option>
<option value="12" >gms</option>
</select>
</div>
</td>
<td><input type="text" name="amount[]" value="7.00" class="form-control" size="9"/></td>
</tr>
</tbody>
</table>
<button style="float:right" class="btnAdd" type="button" class="btn btn-default"><i class="icon-plus"></i> Add New Rebate</button>
</div>
</div> <!-- /span8 -->
<div class="row">
<div class="col-xs-5"></div>
<div style="margin-left: -9px" class="col-xs-5">
<button type="submit" class="btn btn-primary">Preview</button>
</div>
</div>
</div>
</form>
</body>
</html>
formdata.php
<?php
print_r($_POST);
?>
Sample data returned :
Array
(
[company_name] =>
[product_id] => 5
[pack] => Array
(
[0] => a
[1] => b
[2] => c
[3] => d
)
[quantity] => Array
(
[0] => 2
[1] => 4
[2] => 2
[3] => 2
)
[volume] => Array
(
[0] => 750
[1] => 750
[2] => 750
[3] => 750
)
[units] => Array
(
[0] => 7
[1] => 5
[2] => 7
[3] => 7
)
[amount] => Array
(
[0] => 3.00
[1] => 7.00
[2] => 3.00
[3] => 3.00
)
)
As you can see, it adds all the informations you are appending with jQuery

Categories