php - 如何在不离开页面的情况下将姓名插入数据库并在提交页面上显示多个表单

Question

我是 php 和 ajax 新手，并试图找到解决我的挑战的方法。 预先感谢您的任何建议。

我有多个表单，每个表单都有一个名称值。我需要在每个表单上单击“提交”，然后通过调用 insert.php 将名称插入数据库 mytable

每次我在任何表单上单击“提交”时，名称 inseertd 始终是第一个表单“tommy”中的名称

每个表单上还会显示“注册成功”消息。

所以我的挑战是仅插入正在提交的表单中的姓名。

我还想在成功插入后将表单按钮文本从“插入”更改为“已插入”。

forms.php

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript" >
$(function() {
$(".submit").click(function() {
var name = $("#name").val();
var dataString = 'name='+ name;

if(name=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "insert.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});
</script>

<form method="post" name="form">
<input id="name" name="name" type="text" value="harry"/>
<div>
<input type="submit" value="Insert" class="submit"/>
<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Registration Successfully</span>
</div>
</form>

<form method="post" name="form">
<input id="name" name="name" type="text" value="tommy"/>
<div>
<input type="submit" value="Insert" class="submit"/>
<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Registration Successfully</span>
</div>
</form>

插入.php

<?php
if($_POST)
{
$name=$_POST['name'];
mysql_query("INSERT INTO `mydbase`.`mytable` (`id`, `name`) VALUES (NULL, '$name')");
}else { echo 'Failed'; }

？>

Answer 1

您需要找到提交的表单。

$('.submit').click(function(e){
  e.preventDefault();
  var form = $(this).parents('form')[0];
  var name = $(form).find('input#name').val();
  ...
});

要显示您的消息:

$(form).find('.success').fadeOut(200).hide();
$(form).find('.error').fadeOut(200).show();