Tuesday 10 April 2018

PHP - Sending Multiple Forms Data using JQuery Ajax



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);
}

?>





20 comments:

  1. Thanks Very Much!
    It helps me a lot.....
    Nice Tutorial

    ReplyDelete
  2. I Cant under stand PDO, working only procedural. but your code is nice and clean.
    if you provide procedural code rather than PDO, I shall be very Thankful to you. Thanks.
    muhammadnaeemahmed@gmail.com

    ReplyDelete
  3. Thanks for the tutorial..

    if 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

    ReplyDelete
  4. Thanks For Your Tutorial...
    but can you tell me how to save the insert.php in mysqli procedure? cause i don't really know about PDO. Thanks.

    ReplyDelete
  5. hai bro in index.php where is the name column. I'm confused because the column names are the same with name="" and id=""

    ReplyDelete
  6. My tables are not displaying

    ReplyDelete
  7. I'm having issues, i'm using php 7.2 and its showing this error
    count(): Parameter must be an array or an object that implements Countable in C:\xampp\htdocs\NutriChef\admin\add_ingredient.php on line 24

    ReplyDelete
  8. how to filter the first name Sir?????

    ReplyDelete
  9. I 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?

    ReplyDelete
  10. my user dialog not showing like video..how to fix it? i'm beginner..

    ReplyDelete
  11. It helps me alot in my project thank you very much dear :)

    ReplyDelete
  12. the IT & dev community owes you a great deal of gratitude

    ReplyDelete
  13. pls tell me how to upload image in this code

    ReplyDelete
  14. Fatal error: Call to a member function execute() on boolean in C:/insert.php on line 32

    ReplyDelete
  15. Thanks for this code :0 but I had a error 500 (Internal Server Error).Can you please help me to clear this issue?

    ReplyDelete
  16. How 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

    ReplyDelete
  17. why 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