使用Ajax，PHP，MYSQL更新表单

我找到了一个自动提交表单数据的教程，但我想要做的就是添加一个提交按钮将数据传递给ajax。

我的目标是拥有一个包含多个输入的表单，当用户单击提交按钮时，它会通过ajax发送它并更新页面而不重新加载页面。 此外，另一个关键部分是将所有输入发布到数组中的方式，以便在运行更新脚本时，输入字段中的名称属性与数据库中的列匹配。

我想我很亲密。 我搜索过，但没有找到我的确切解决方案。 提前致谢。

 
  
 
 
Business Name:
 
 
 
 
 
Address 1:
 
 
 
 
 
Address 2:
 
 
 
 
 
 
 
  Save 
 
 
 
 
   

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

  $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

结束搞清楚了。 感谢大家的帮助。

 
 
  
 
 
Business Name:
 
 
 
 
 
Address 1:
 
 
 
 
 
Address 2:
 
 
 
 
 
 
 
   
 
 
 
   

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("
Sent Successfully!
"); } }); // end post });// end each input value }); // end submit }); // end ready 

update_customer_info.php

   $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. 我认为你想在提交时更新表格。所以你应该用下面给出的按钮删除提交。

    Save. 

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. 您可以使用unserialize（）作为数组来检索PHP代码中的输入值。因此，您可以将数据保存到数据库以及您想要的任何内容。我希望您能得到答案。因此，您的代码将成为

        
        
       
       
      Business Name:
       
       
       
       
       
      Address 1:
       
       
       
       
       
      Address 2:
       
       
       
       
       
       
       
        Save 
       
       
       
         

      你的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 . 

   ？>

Answer 3

代替：

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

给你的表单一个像’myform’的id：

并使用它来防止默认提交表单：

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