我找到了一个自动提交表单数据的教程,但我要做的就是添加一个提交按钮以将数据传递给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>
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.');
}
?>
在这里,我创建了一个表http://jsbin.com/ojanaji/13/edit和demo:http://jsbin.com/ojanaji/13 因此,当用户单击表上的某些行时,可以自动将表中的值填充到模式窗口中。当点击按钮“编辑行”时,用户打开模式窗口。现在我需要知道如何用列更新mysql表:姓名、性别、年龄、吃过的甜甜圈。 我创建js Ajax: HTML模式窗口和按钮: 那么我现在如
我想使用Ajax更新数据,下面是示例代码。SweetAlert被移位,因为它已经更新了,但是它在数据库中没有生效,因此它给出了一个错误。 这是在单击submit按钮时提交表单的Ajax脚本。 这段代码用于php服务器端,用于将数据插入数据库。
我认为这是一个简单的问题。我不熟悉jQuery。我正在尝试制作脚本,这样当您单击图像时,ajax将调用php文件,该文件将更新mySQL数据库。 我的脚本: HTML: PHP文件: 出于某种原因,完全没有回应。数据库保持不变,html页面没有任何变化。代码是否有问题,或者我无法通过ajax更新数据库?
问题内容: 对于我的新项目,我想要一种现代的方法,不需要在每个数据库请求上重新加载页面。:)我希望脚本查询数据库并使用查询信息创建表。 我尝试了在互联网上找到的不同脚本。下面的一个最接近我的需求。 index.php getdata.php 但是我只得到一个表,里面有一堆{$ value}。我尝试只用$ value,但是得到了一堆零。 我尝试了一个简单的脚本 然后我得到了som结果,但是使用此脚本
问题内容: 我需要有关ajax的帮助。我想更新一个php文件,它将更新数据库。我有一个表格,它将选中的复选框发送到一个php文件,然后更新数据库。我想用ajax做到这一点,但我为此感到挣扎。我知道如何通过Ajax 更新HTML元素,但是无法解决。 HTML脚本 PHP updateDB.php 我希望此更新无需刷新页面。 问题答案: 我只想要一些建议,首先您的html页面代码应该喜欢- 现在我转向
问题内容: 谁能帮助我了解为什么此更新查询未更新数据库中的字段?我在我的php页面中有这个来从数据库中检索当前值: 这是我的HTML表单: 这是我的“ editblogscript”: 我不明白为什么它不起作用。 问题答案: 您必须在查询中的所有VARCHAR内容周围加上单引号。因此,您的更新查询应为: 同样,用POST中的内容直接更新数据库是一种不好的形式。您应该使用mysql_real_esc