Обновить форму с помощью Ajax, PHP, MYSQL

Я нашел учебник, который автоматически отправляет данные формы, но все, что я хочу сделать, это добавить кнопку отправки, чтобы передать данные в ajax.

Моя цель – иметь форму с несколькими входами и когда пользователь нажимает кнопку отправки, она отправляет ее через ajax и обновляет страницу без перезагрузки страницы. Кроме того, еще одна ключевая часть – это то, как она помещает все входы в массив, так что при запуске сценария обновления атрибуты имени из входных полей соответствуют столбцам в базе данных.

Я думаю, что я рядом. Я искал и не нашел свое точное решение. Заранее спасибо.

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

  1. Я думаю, что вы хотите обновить форму, когда submit.so вы должны удалить submit с помощью кнопки, приведенной ниже.

     <button id="myBtn">Save</button>. 
  2. Вы должны добавить данный ниже код в файл ur js.

     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. Вы можете получить входное значение в своем php-коде, используя unserialize () в качестве массива. Таким образом, вы можете сохранить данные в базу данных и все, что захотите. Надеюсь, вы получите ответ.

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

      Ваш 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(data); //alert(data); }, error: function(data) { // if error occured alert("Error occured, please try again"); }, }); } 

    update_company_info.php станет

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

    ?>

Вместо:

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

Дайте вашей форме id как «myform»: <form method="POST" action="#" id="myform">

И используйте это для предотвращения отправки формы по умолчанию:

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

Закончился, поняв это. Спасибо за помощь всем.

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