我找到了一个自动提交表单数据的教程,但我要做的就是添加一个提交按钮以将数据传递给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> </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.'); } ?>
最终弄清楚了。谢谢大家的帮助。
<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> </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>
$(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
<?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.'); } ?>