我的 php 页面上有几个表格。我正在使用 jQuery (& 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();
?>
请建议我一个可能的解决方案来解决这个问题，同时有效地利用这些功能来减少实现共同目标可能需要的编码量（比如显示结果及其相应的效果）。
先感谢您。