我的php页面上有几个表单。我正在使用jQuery（＆amp; Ajax）来处理这个页面并显示结果。我们将表单称为：ToDo和Register表单。我已经提交了附在两个表单上的事件，以便在提交时进行相应的处理。 ToDo表单位于页面顶部，Register表单位于页面底部。这些表单上方有相应的标签，用于在处理表单时显示错误/成功消息。 div #result_todo显示提交ToDo表单时获得的错误。 div #result显示提交注册表单时获得的错误。
实际问题： 假设我试图提交ToDo表单而不填写任何信息。正如所料，我的相关php文件处理提交的信息并显示div #result_todo中的错误。 这个div中有一个交叉图像，当点击它时，在点击时从用户显示中消除完整的div #result_todo（以及它的错误）。现在，当我滚动到我的注册表单并尝试提交它而不填写任何信息时，正如预期的那样，我的相关php文件处理提交的信息并显示div #result中的错误。现在的问题是，甚至div #result_todo也会出现错误，而实际上它不应该出现。这是不需要的，因为我只想提交注册表单，我只需要显示与此表单相关的错误，而不是ToDo表单。
为了减少编码量，我调用函数在表单提交的成功事件（？）中显示错误消息。所以我觉得这可能是出错的地方。我是jQuery和javascripting的新手，所以请耐心等待我。代码如下：
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function removeElement(divRemove) {
$(divRemove).fadeOut(1000);
}
function theResult(data, popuDivDel) {
var popuDiv = popuDivDel;
$(popuDiv).removeClass('success'); //remove the classes to avoid overlapping
$(popuDiv).removeClass('error'); //remove the classes to avoid overlapping
//If var success received from the php file is 0, then that means there was an error
if(data.success == 0)
{
$(popuDiv).html(data.message); //attach the message to the div
$(popuDiv).addClass('error'); //attach the error class to the result div to show the errors
//Add a link to dismiss the errors
$(popuDiv).prepend('<a href=\"javascript:;\" onclick=\"removeElement(\''+popuDiv+'\')\"><img src="images/dismiss.png" alt="Dismiss Errors" title="Dismiss Errors" width="20" height="20" align="right" /></a>');
}
else if(data.success == 1) //means that our submission was good
{
$(popuDiv).html(data.message); //attach the message to the div
$(popuDiv).addClass('success'); //attach the success class to the result div to show success msg
setTimeout(function(){ $(popuDiv).fadeOut('slow'); }, 2000); //attach the animated effect as well
}
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$().ajaxStart(function() {
$('#loading').show();
$('#result').hide();
$('#loading_todo').show();
$('#result_todo').hide();
}).ajaxStop(function() {
$('#loading').hide();
$('#result').fadeIn('slow');
$('#loading_todo').hide();
$('#result_todo').fadeIn('slow');
});
$('#myForm').submit(function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
dataType: 'json',
success: function(data) //trigger this on successful reception of the vars from the php file
{
var popuDiv2 = '#result';
theResult(data, popuDiv2);
}
})
return false;
});
$('#frm_todo').submit(function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
dataType: 'json',
success: function(data) //trigger this on successful reception of the vars from the php file
{
var popuDivDel = '#result_todo';
theResult(data, popuDivDel);
}
})
return false;
});
})
</script>
<h4>ToDo Form</h4>
<div id="loading_todo" style="display:none;"><img src="images/loading.gif" alt="loading..." /></div>
<div id="result_todo" style="display:none;"></div>
<form id="frm_todo" name="frm_todo" method="post" action="proses2.php">
<label for="todo">Enter to-do item:</label>
<input type="text" name="todo" id="todo" />
<input type="submit" name="sbt_todo" id="sbt_todo" value="Add Item" />
</form>
<p> </p><p> </p><p> </p>
<h4>REGISTER Form</h4>
<div id="loading" style="display:none;"><img src="images/loading.gif" alt="loading..." /></div>
<div id="result" style="display:none;"></div>
<form id="myForm" method="post" action="proses.php">
<table>
<tr>
<td width="100">Name</td>
<td>
<input name="name" size="30" type="text" /><?php echo (isset($error)) ? $error['name'] : ''; ?>
</td>
</tr>
<tr>
<td>e-mail</td>
<td>
<input name="email" size="40" type="text" /><?php echo (isset($error)) ? $error['email'] : ''; ?>
</td>
</tr>
<tr>
<td>phone</td>
<td>
<input name="phone" size="40" type="text" /><?php echo (isset($error)) ? $error['phone'] : ''; ?>
</td>
</tr>
<tr>
<td>comment</td>
<td><input name="comment" size="40" type="text" id="comment" /><?php echo (isset($error)) ? $error['comment'] : ''; ?></td>
</tr>
<tr>
<td></td>
<td>
<input name="submit" type="submit" id="submit" value="Submit" />
<input type="reset" value="Reset" />
</td>
</tr>
</table>
</form>
<?php //proses.php
//validation
if (trim($_POST['name']) == '') {
$error['name'] = '- Name Must Fill';
}
if (trim($_POST['email']) == '') {
$error['email'] = '- Email Must Fill & Valid Mail';
}
if (trim($_POST['phone']) == '') {
$error['phone'] = '- Phone must be filled';
}
if (trim($_POST['comment']) == '') {
$error['comment'] = '- Comment must be filled';
}
if ($error)
{
$success = 0;
$message = '<b>Error</b>: <br />'.implode('<br />', $error);
}
else
{
$success = 1;
$message = '<b>Thank You For Filling This Form</b><br />';
}
print json_encode(array('success' => $success, 'message' => $message));
die();
?>
<?php //proses2.php
//validation
if (trim($_POST['content']) == '')
{
$error['content'] = '- Must Fill Todo';
}
if ($error)
{
$success = 0;
$message = '<b>Error</b>: <br />'.implode('<br />', $error);
$message .= $error['content'];
}
else
{
$success = 1;
$message = '<b>Thank You For Filling This Form</b><br />';
}
print json_encode(array('success' => $success, 'message' => $message));
die();
?>
请建议我解决这个问题，同时有效地利用这些功能来减少实现共同目标可能需要的编码量（比如用相应的效果显示结果）。
提前谢谢。
答案 0 :(得分：0)
Enter将提交两个表单
Enter键或以下内容来解决此问题：type="submit"替换为type="button"。.submit功能更改为.click并定位按钮而不是表单。.click函数.click函数就像我之前说的那样，我没有测试任何这个（我没有我的php服务器），但我知道两个表单在按下回车时都会提交。