I have a table where i add rows dynamically using j-query
i want to fetch data from each fields in to my php
and do somthing with it when i press submit or maybe we can use j-query
to loop around the table to get all the values and put it in an array i do not know how to go about it can some one please help me. this is what i have so far
Jquery.js
$(document).ready(function(){
$(".add-row").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
$("table tbody").append(markup);
});
// Find and remove selected table rows
$(".delete-row").click(function(){
$("table tbody").find('input[name="record"]').each(function(){
if($(this).is(":checked")){
$(this).parents("tr").remove();
}
});
});
});
Index.php
<form>
<input type="text" id="name" placeholder="Name">
<input type="text" id="email" placeholder="Email Address">
<input type="button" class="add-row" value="Add Row">
</form>
<table>
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="record"></td>
<td>Peter Parker</td>
<td>peterparker@mail.com</td>
</tr>
</tbody>
</table>
<button type="button" class="delete-row">Delete Row</button>
<button type="button" class="Submit">Submit</button>
here is a Fiddle
You could add a hidden input to your form when you create your new row:
$(".add-row").click(function () {
var name = $("#name").val();
var email = $("#email").val();
var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
markup += "<input type='hidden' name='name' value='" + name + "'>";
markup += "<input type='hidden' name='email' value='" + email + "'>";
$("table tbody").append(markup);
});
Then on the PHP side, you'd receive them like this in the $_POST
array like this:
$_POST['name'], $_POST['email]
Since you want to be able to post more than one at a time, you can have them loded into an array, say called customer
by naming them like this:
markup += "<input type='hidden' name='customer[0][name]' value='" + name + "'>";
markup += "<input type='hidden' name='customer[0][email]' value='" + email + "'>";
Then, $_POST['customer']
would be an array of arrays, each with two keys name
and email
All together it could look like:
var x = 0;
$(".add-row").click(function () {
var name = $("#name").val();
var email = $("#email").val();
var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
markup += "<input type='hidden' name='customer[" + x + "][name]' value='" + name + "'>";
markup += "<input type='hidden' name='customer[" + x + "][email]' value='" + email + "'>";
x++;
$("table tbody").append(markup);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.