I want to add data's from input fields to the HTML Table dynamically when clicking the Add button as shown in the sample image. How can I accomplish this? Can I do it with PHP? As I'm a beginner I can't find the exactly matched results from here, but I found a related thread, Creating a dynamic table using php based on users input data, but I think this process is done by 2 pages (1 page for inputs and another for showing that input data's in table) as per the code... Any help will appreciated.
Assuming you're using jquery (given your tag), something like the following will work:
$("button").click(function() {
var newRow = "<tr>";
$("form input").each(function() {
newRow += "<td>"+$(this).val()+"</td>";
});
newRow += "</tr>";
$("table").append(newRow);
});
There are better ways to do this, but this is probably a very simple place to start if you're just beginning to learn. The functions you should be interested in here are: .click, .each, .val, and .append. I'd recommend you check out the jquery docs - they will give you good examples to expand your knowledge.
If you can use jQuery you can do it like this. It's not the full code it's just to give you the idea how to start with it.
jQuery('#add').click(function(){
var memberName = jQuery('#memberName').val();
var address = jQuery('#address').val();
var designation = jQuery('#designation').val();
// Do some saving process first, using ajax and sending it to a php page on the server
// then make that php return something to validate if it's succesfully added or something
// before you show it on table. You can use ajax like
jQuery.ajax({
type: 'POST',
url: 'you php file url.php',
data: { name: memeberName, addr: address, desig: designation },
dataType: 'json', // any return type you like
succes: function(response){ // if php return a success state
jQuery('#tableID tbody').append('<tr><td>' + memberName + '</td><td>' + address + '</td><td>' + designation + '</td></tr>');
},
error: function(response){ // if error in the middle of the call
alert('Cant Add');
}
});
});
Be sure to change the id to the id you have in your html elements.
This is only on the front end side. If you have other processes like saving the newly added into the DB then you have to process that first before showing it on the table.
First, let's make this:
into table, like this:
<table id='mytable'>
<tr>
<tr>
<td>Member Name</td><td><input type="text" name="member[]"></td>
</tr>
<tr>
<td>Address</td><td><textarea></td>
</tr>
<tr>
<td>Designation</td><td>
<select>
<option value="asd">Asd</option>
<option value="sda">Sda</option>
</select></td>
</tr>
</tr>
</table>
<div>
<input name='buttonadd' type='button' id='add_table' value='Add'>
</div>
And add this javascript in head or body:
$("#add_table").click(function(){
$('#mytable tr').last().after('<tr><td>Member Name</td><td><input type="text" name="member[]"></td></tr><tr><td>Address</td><td><textarea></td></tr><tr><td>Designation</td><td><select><option value="asd">Asd</option><option value="sda">Sda</option></select></td></tr>');
});
Inside after(''); don't use enter, just type the code sideways.
Hope this can help you.
$(document).ready(function()
{
$("#ser_itm").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
alert(dataString);
$.ajax
({
type: "POST",
url: "bar_pull.php",
data: dataString,
cache: false,
success: function(data)
{
$("#tbl").html(data);
}
});
});
});Thank you Jean for your instant reply. I tried that code, but I couldn't get +ve result, because of my knowledge with JavaScript,jQuery, etc are very poor. Now my code is like this:
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script src="jquery-1.11.1.min.js"></script>
<script>
$("#button").click(function() {
var newRow = "<tr>";
$("#form input").each(function() {
newRow += "<td>" + $(this).val() + "</td>";
});
newRow += "</tr>";
$("table").append(newRow);
});
</script>
</head>
<body>
<form action="#" method="POST">
<label>Name:</label><input type="text" />
<label>Age:</label><input type="text" />
<button name='buttonadd' type='button' id='button'>Add</button>
</form>
<table border="1">
<tr>
<td>Name</td>
<td>Age</td>
</tr>
</table>
</body>
</html>So I expect you will help me because of I am just stepping into JavaScript and jQuery.
