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


?>

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
}