Update form using Ajax, PHP, MYSQL

Question

I found a tutorial that auto submits the form data but all I want to do is add a submit button to pass the data to ajax.

My goal is to have a form with multiple inp

Answer 1

Ended up figuring it out. Thanks for everyones help.

<p id="alert"></p>    
<form id="form" method="post" action="/ajax/update_company_info.php">

    <!-- start id-form -->
    <table border="0" cellpadding="0" cellspacing="0"  id="id-form">
    <tr>
        <th valign="top">Business Name:</th>
        <td><input type="text" name="company_name" class="inp-form" /></td>
        <td></td>
    </tr>
    <tr>
        <th valign="top">Address 1:</th>
        <td><input type="text" name="address_1" class="inp-form" /></td>
        <td></td>
    </tr>
    <tr>
        <th valign="top">Address 2:</th>
        <td><input type="text" name="address_2" class="inp-form" /></td>
        <td></td>
    </tr>



<tr>
    <th>&nbsp;</th>
    <td valign="top">
            <input id="where" type="hidden" name="customer_id" value="1" />
            <input type="submit" value="Save" id="submit">

    </td>
    <td></td>
</tr>
</table>
<!-- end id-form  -->
</form>

update.js

$(document).ready(function() {

$('form').submit(function(evt) {
  evt.preventDefault();

   $.each(this, function() {
            // VARIABLES: Input-specific
            var input = $(this);
            var value = input.val();
            var column = input.attr('name');

            // VARIABLES: Form-specific
            var form = input.parents('form');
            //var method = form.attr('method');
            //var action = form.attr('action');

            // VARIABLES: Where to update in database
            var where_val = form.find('#where').val();
            var where_col = form.find('#where').attr('name');

  $.ajax({
      url: "/ajax/update_company_info.php",
      data: {
                        val: value,
                        col: column,
                        w_col: where_col,
                        w_val: where_val
      },
      type: "POST",
      success: function(data) {         

      $('#alert').html("<p>Sent Successfully!</p>");

                        }

  }); // end post
  });// end each input value
}); // end submit
}); // end ready

update_customer_info.php

    <?php

include($_SERVER['DOCUMENT_ROOT'] . '/load.php');

function clean($value)
{
    return mysql_real_escape_string($value);
}
// FORM: Variables were posted
if (count($_POST))
{

    // Prepare form variables for database
    foreach($_POST as $column => $value)
        ${$column} = clean($value);

    // Perform MySQL UPDATE
    $result = mysql_query("UPDATE customers SET ".$col."='".$val."'
        WHERE ".$w_col."='".$w_val."'")
        or die ('Error: Unable to update.');
}
?>

Answer 2

1. I think that you want to update form when submit.so you should remove submit with a button given below.

   <button id="myBtn">Save</button>.
   

2. You should add the given below code in ur js file.

   var myBtn = document.getElementById('myBtn'); 
   myBtn.addEventListener('click', function(event){ 
       Updateform('give id of the form'); 
   }); 
   function updateform(id){
       var data = $('#'+id).serialize();
       // alert(data);
       $.ajax({
           type: 'POST',
           url: "/ajax/update_company_info.php",
           data: data,
           success: function(data) {
               $('#id').html(data);
               // alert(data);
               //alert(data);
           },
           error: function(data) { // if error occured
               alert("Error occured, please try again");
           },
       });
   

   1. You can retrieve input value in your php code by using unserialize() as an array.So you can save data to database and whatever you want to.i hope you get the answer.Hence,your code will become

         <form method="POST" action="#" id="form1">
          <!-- start id-form -->
         <table border="0" cellpadding="0" cellspacing="0"  id="id-form">
         <tr>
          <th valign="top">Business Name:</th>
          <td><input type="text" name="company_name" class="inp-form" /></td>
          <td></td>
      </tr>
      <tr>
          <th valign="top">Address 1:</th>
          <td><input type="text" name="address_1" class="inp-form" /></td>
          <td></td>
      </tr>
      <tr>
          <th valign="top">Address 2:</th>
          <td><input type="text" name="address_2" class="inp-form" /></td>
          <td></td>
      </tr>
         <tr>
      <th>&nbsp;</th>
      <td valign="top">
              <input id="where" type="hidden" name="customer_id" value="1" />
          <button id="myBtn">Save</button>
      </td>
      <td></td> </tr> </table> <!-- end id-form  --> </form> 
      

      Your js code become

       var myBtn = document.getElementById('myBtn'); 
       myBtn.addEventListener('click', function(event)
      {   Updateform('form1'); }); 
      function updateform(id){
                  var data = $('#'+id).serialize();
                 // alert(data);
                   $.ajax({
                      type: 'POST',
                      url: "/ajax/update_company_info.php",
                      data: data,
                       success: function(data) {
                           $('#id').html(data);
                     // alert(data);
                       //alert(data);
                        },
                        error: function(data) { // if error occured
                              alert("Error occured, please try again");
                          },
                                  }); }
      

   update_company_info.php will become

          $data=unserialize($_POST['data']);
           // you can retrieve all values from data array and save all .
   

   ?>

Answer 3

Instead of:

$(".submit").click(function() {

Give your form a id like 'myform': <form method="POST" action="#" id="myform">

And use this for preventing default submission of form:

$("#myform").submit(function(e) {
 e.preventDefault();
 //your code
}