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 inputs and when the user clicks the submit button it sends it through ajax and updates the page without reloading the page. Also, another key piece is the way it post all the inputs into an array so that when the update script is ran the name attributes from the input fields match the columns in the database.

I think I'm close. I've searched and haven't found my exact solution. Thanks in advance.

<script type="text/javascript" src="/js/update.js"></script>

<form method="POST" action="#" id="myform">

    <!-- 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>

<div id="alert">    
    </td>
    <td></td>
</tr>
</table>
<!-- end id-form  -->
</form>

update.js

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').text('Updated');
                 $('#alert').fadeOut().fadeIn();

              },
              error: function(data) { // if error occured
                    alert("Error occured, please try again");
                },
                        }); }

update_customer_info.php

<?php

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

// FORM: Variables were posted
if (count($_POST))
{
$data=unserialize($_POST['data']);
// Prepare form variables for database
foreach($data as $column => $value)
    ${$column} = clean($value);

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


?>

@AminJafari it should be one of the columns in the db, for instance there is a column called company_name, address_1, address_2 and then the values being updated to the db would be the ones submitted from the form — Chad Priddle, Jul 21 '14 at 05:55
You are setting `col: column` to name attribute of your submit button `$(".submit").click(function() { var input = $(this); var column = input.attr('name');`, which according to your form code, is not set. — Sean, Jul 21 '14 at 05:58
**Danger**: You are using [an **obsolete** database API](http://stackoverflow.com/q/12859942/19068) and should use a [modern replacement](http://php.net/manual/en/mysqlinfo.api.choosing.php). You are also **vulnerable to [SQL injection attacks](http://bobby-tables.com/)** that a modern API would make it easier to [defend](http://stackoverflow.com/questions/60174/best-way-to-prevent-sql-injection-in-php) yourself from. — Quentin, Jul 21 '14 at 15:39

score 2 · Accepted Answer · answered Jul 21 '14 at 20:33

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.');
}
?>

score 0 · Answer 2 · edited Jul 21 '14 at 11:21

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>.
```

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

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 .

?>

I updated my original question with your suggestions and added the $data value back into the foreach function — Chad Priddle, Jul 21 '14 at 14:50

score 0 · Answer 3 · answered Jul 21 '14 at 11:25

0

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
}

answered Jul 21 '14 at 11:25

Manwal

23,450
12
63
93

Update form using Ajax, PHP, MYSQL

3 Answers3

Linked