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
– Chad Priddle, Commented Jul 21, 2014 at 5: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
– Sean, Commented Jul 21, 2014 at 5:58
Danger: You are using an obsolete database API and should use a modern replacement. You are also vulnerable to SQL injection attacks that a modern API would make it easier to defend yourself from. — Quentin
– Quentin, Commented Jul 21, 2014 at 15:39

Chad Priddle · Accepted Answer · 2014-07-21 20:33:13Z

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

Lukasz Koziara · Accepted Answer · 2014-07-21 11:21:33Z

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

Manwal · Accepted Answer · 2014-07-21 11:25:18Z

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, 2014 at 11:25

Manwal

23.9k15 gold badges65 silver badges95 bronze badges

Collectives™ on Stack Overflow

Update form using Ajax, PHP, MYSQL

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related