In this post we will learn how to send multiple forms data with jQuery and JavaScript code by Ajax with PHP. In simple terms in PHP Ajax JQuery Web Development how can we insert multiple forms data into Mysql database table by using PHP script with Jquery and Ajax. We all know HTML Forms are mainly use on most of the websites for gathering data from a particular user. Alike, forms in this website has been used different method for submit data to server. We have mainly used Simple HTML methods for obtained data from user.
In Such cases in your web development you want to required to insert multiple data in your single form submission. At that time if you have follow simple HTML form submission with PHP script then you are able to send only single data to server. For Sending or inserting or saving multiple data in single click then you have to use Jquery and javascript code. By using Jquery or Javascript code you can generate dynamic HTML field in your HTML form. We can generate any dynamic HTML field by using Jquery and append into your form fields. We can dynamically generate same name HTML field by using Javascript and append into our HTML form.
Here in this case also we have use Jquery and Jquery UI. By using Jquery UI Dialog box we have get data from user and by using Jquery code we have converted that form data into HTML table and data has been stored in hidden field in array format. Here we can add multiple number of data and store into HTML table format. Now for submit multiple form data to PHP server script we have use Ajax web development request. By using Ajax we have send multiple form data to PHP script and in PHP we have insert multiple form data. So, Here we have insert multiple form data in single click of form submission. This is new challenge in Web Development with JQuery Ajax PHP. So, if you have developed any web application development and in that you want to add multiple data in single form submission then you can get reference from this PHP JQuery Ajax Web Development Code.
Source Code
index.php
<!--
//index.php
!-->
<html>
<head>
<title>PHP - Sending multiple forms data through jQuery Ajax</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="container">
<br />
<h3 align="center">PHP - Sending multiple forms data through jQuery Ajax</a></h3><br />
<br />
<br />
<div align="right" style="margin-bottom:5px;">
<button type="button" name="add" id="add" class="btn btn-success btn-xs">Add</button>
</div>
<br />
<form method="post" id="user_form">
<div class="table-responsive">
<table class="table table-striped table-bordered" id="user_data">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Details</th>
<th>Remove</th>
</tr>
</table>
</div>
<div align="center">
<input type="submit" name="insert" id="insert" class="btn btn-primary" value="Insert" />
</div>
</form>
<br />
</div>
<div id="user_dialog" title="Add Data">
<div class="form-group">
<label>Enter First Name</label>
<input type="text" name="first_name" id="first_name" class="form-control" />
<span id="error_first_name" class="text-danger"></span>
</div>
<div class="form-group">
<label>Enter Last Name</label>
<input type="text" name="last_name" id="last_name" class="form-control" />
<span id="error_last_name" class="text-danger"></span>
</div>
<div class="form-group" align="center">
<input type="hidden" name="row_id" id="hidden_row_id" />
<button type="button" name="save" id="save" class="btn btn-info">Save</button>
</div>
</div>
<div id="action_alert" title="Action">
</div>
</body>
</html>
<script>
$(document).ready(function(){
var count = 0;
$('#user_dialog').dialog({
autoOpen:false,
width:400
});
$('#add').click(function(){
$('#user_dialog').dialog('option', 'title', 'Add Data');
$('#first_name').val('');
$('#last_name').val('');
$('#error_first_name').text('');
$('#error_last_name').text('');
$('#first_name').css('border-color', '');
$('#last_name').css('border-color', '');
$('#save').text('Save');
$('#user_dialog').dialog('open');
});
$('#save').click(function(){
var error_first_name = '';
var error_last_name = '';
var first_name = '';
var last_name = '';
if($('#first_name').val() == '')
{
error_first_name = 'First Name is required';
$('#error_first_name').text(error_first_name);
$('#first_name').css('border-color', '#cc0000');
first_name = '';
}
else
{
error_first_name = '';
$('#error_first_name').text(error_first_name);
$('#first_name').css('border-color', '');
first_name = $('#first_name').val();
}
if($('#last_name').val() == '')
{
error_last_name = 'Last Name is required';
$('#error_last_name').text(error_last_name);
$('#last_name').css('border-color', '#cc0000');
last_name = '';
}
else
{
error_last_name = '';
$('#error_last_name').text(error_last_name);
$('#last_name').css('border-color', '');
last_name = $('#last_name').val();
}
if(error_first_name != '' || error_last_name != '')
{
return false;
}
else
{
if($('#save').text() == 'Save')
{
count = count + 1;
output = '<tr id="row_'+count+'">';
output += '<td>'+first_name+' <input type="hidden" name="hidden_first_name[]" id="first_name'+count+'" class="first_name" value="'+first_name+'" /></td>';
output += '<td>'+last_name+' <input type="hidden" name="hidden_last_name[]" id="last_name'+count+'" value="'+last_name+'" /></td>';
output += '<td><button type="button" name="view_details" class="btn btn-warning btn-xs view_details" id="'+count+'">View</button></td>';
output += '<td><button type="button" name="remove_details" class="btn btn-danger btn-xs remove_details" id="'+count+'">Remove</button></td>';
output += '</tr>';
$('#user_data').append(output);
}
else
{
var row_id = $('#hidden_row_id').val();
output = '<td>'+first_name+' <input type="hidden" name="hidden_first_name[]" id="first_name'+row_id+'" class="first_name" value="'+first_name+'" /></td>';
output += '<td>'+last_name+' <input type="hidden" name="hidden_last_name[]" id="last_name'+row_id+'" value="'+last_name+'" /></td>';
output += '<td><button type="button" name="view_details" class="btn btn-warning btn-xs view_details" id="'+row_id+'">View</button></td>';
output += '<td><button type="button" name="remove_details" class="btn btn-danger btn-xs remove_details" id="'+row_id+'">Remove</button></td>';
$('#row_'+row_id+'').html(output);
}
$('#user_dialog').dialog('close');
}
});
$(document).on('click', '.view_details', function(){
var row_id = $(this).attr("id");
var first_name = $('#first_name'+row_id+'').val();
var last_name = $('#last_name'+row_id+'').val();
$('#first_name').val(first_name);
$('#last_name').val(last_name);
$('#save').text('Edit');
$('#hidden_row_id').val(row_id);
$('#user_dialog').dialog('option', 'title', 'Edit Data');
$('#user_dialog').dialog('open');
});
$(document).on('click', '.remove_details', function(){
var row_id = $(this).attr("id");
if(confirm("Are you sure you want to remove this row data?"))
{
$('#row_'+row_id+'').remove();
}
else
{
return false;
}
});
$('#action_alert').dialog({
autoOpen:false
});
$('#user_form').on('submit', function(event){
event.preventDefault();
var count_data = 0;
$('.first_name').each(function(){
count_data = count_data + 1;
});
if(count_data > 0)
{
var form_data = $(this).serialize();
$.ajax({
url:"insert.php",
method:"POST",
data:form_data,
success:function(data)
{
$('#user_data').find("tr:gt(0)").remove();
$('#action_alert').html('<p>Data Inserted Successfully</p>');
$('#action_alert').dialog('open');
}
})
}
else
{
$('#action_alert').html('<p>Please Add atleast one data</p>');
$('#action_alert').dialog('open');
}
});
});
</script>
insert.php
<?php
//insert.php
$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");
$query = "
INSERT INTO tbl_sample
(first_name, last_name)
VALUES (:first_name, :last_name)
";
for($count = 0; $count<count($_POST['hidden_first_name']); $count++)
{
$data = array(
':first_name' => $_POST['hidden_first_name'][$count],
':last_name' => $_POST['hidden_last_name'][$count]
);
$statement = $connect->prepare($query);
$statement->execute($data);
}
?>
Thanks Very Much!
ReplyDeleteIt helps me a lot.....
Nice Tutorial
I Cant under stand PDO, working only procedural. but your code is nice and clean.
ReplyDeleteif you provide procedural code rather than PDO, I shall be very Thankful to you. Thanks.
muhammadnaeemahmed@gmail.com
Thanks for the tutorial..
ReplyDeleteif its possible if i want to input it with select and option that connect to db mysql, not with an input text?
if yes, can you tell me how to do that?
thank you before, and sorry for my bad english
Thanks For Your Tutorial...
ReplyDeletebut can you tell me how to save the insert.php in mysqli procedure? cause i don't really know about PDO. Thanks.
hai bro in index.php where is the name column. I'm confused because the column names are the same with name="" and id=""
ReplyDeleteMy tables are not displaying
ReplyDeleteAdd this line code in the head:
DeleteI'm having issues, i'm using php 7.2 and its showing this error
ReplyDeletecount(): Parameter must be an array or an object that implements Countable in C:\xampp\htdocs\NutriChef\admin\add_ingredient.php on line 24
how to filter the first name Sir?????
ReplyDeleteI try to add 2 more for column for address and number phone. If I want to add it is okay but when but when I try to view, edit and save only the last 2 column can save. Can you help me?
ReplyDeletemy user dialog not showing like video..how to fix it? i'm beginner..
ReplyDeleteIt helps me alot in my project thank you very much dear :)
ReplyDeletethe IT & dev community owes you a great deal of gratitude
ReplyDeletepls tell me how to upload image in this code
ReplyDeletehey did you get this ??
DeleteFatal error: Call to a member function execute() on boolean in C:/insert.php on line 32
ReplyDeleteThanks for this code :0 but I had a error 500 (Internal Server Error).Can you please help me to clear this issue?
ReplyDeleteVery Very Good!!!
ReplyDeleteHow do I clear the counter after i have submitted, this is because after submission and i want to start over it it populates the item then times equivalent to the last counter. Kindly help Thanks
ReplyDeletewhy is it everytime i reload the page, it doesn't show the data in the table. Also, it doesn't save in the database. Can someone help me? Thanks!
ReplyDelete