jQuery-多个表单提交触发不相关的多个错误消息

我的php页面上有两个表单。我正在使用jQuery（&Ajax）处理这个页面并显示结果。让我们将表单称为：ToDo和Register表单。我已将提交事件附在两个表格上，以便在提交时进行相应的处理。ToDo表单位于页面顶部，注册表单位于页面底部。这些表单正上方有相应的标记，在处理表单时显示错误/成功消息。div#result_todo显示提交todo表单时获得的错误。div#结果显示提交注册表时获得的错误

实际问题： 假设我试图提交ToDo表格，但没有填写任何信息。正如预期的那样，我的相关php文件处理提交的信息，并在div#result#u 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>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</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();
?>

函数removeElement（divRemove）{
$（divRemove）.fadeOut（1000）；
}
函数结果（数据、popuDivDel）{
var popuDiv=popuDivDel；
$（popuDiv）.removeClass（'success'）；//删除类以避免重叠
$（popuDiv）.removeClass（'error'）；//删除类以避免重叠
//如果从php文件接收到的var success为0，则表示存在错误
如果（data.success==0）
{                       
$（popuDiv.html（data.message）；//将消息附加到div
$（popuDiv）.addClass（'error'）；//将error类附加到result div以显示错误
//添加一个链接以消除错误
$（popuDiv）.前置（''）；
}                   
else if（data.success==1）//表示我们的提交是好的
{
$（popuDiv.html（data.message）；//将消息附加到div
$（popuDiv）.addClass（'success'）；//将success类附加到result div以显示success msg
setTimeout（function（）{$（popuDiv）.fadeOut（'slow'）；}，2000）；//同时附加动画效果
}
}
$（文档）.ready（函数（）{
$（）.ajaxStart（函数（）{
$（“#加载”）.show（）；
$（“#结果”）.hide（）；
$（'#加载待办事项'）.show（）；
$（'#result_todo'）.hide（）；
}).ajaxStop（函数（）{
$（“#加载”）.hide（）；
$（'result'）.fadeIn（'slow'）；
$（“#加载_todo”）.hide（）；
$（'result'u todo'）。fadeIn（'slow'）；
});
$（'#myForm'）。提交（函数（）{
$.ajax({
键入：“POST”，
url:$（this.attr（'action'），
数据：$（this）.serialize（），
数据类型：“json”，
success:function（data）//从php文件成功接收变量时触发此操作
{
var popuDiv2='结果'；
结果（数据，popuDiv2）；
}
})
返回false；
});
$（'frm#u todo'）。提交（函数（）{
$.ajax({
键入：“POST”，
url:$（this.attr（'action'），
数据：$（this）.serialize（），
数据类型：“json”，
success:function（data）//从php文件成功接收变量时触发此操作
{
var popuDivDel='#result_todo'；
结果（数据，popuDivDel）；
}
})
返回false；
});
})
待办事项表
输入待办事项：

登记表
名称
电子邮件
电话
评论

请为我提供一个可能的解决方案，同时有效地使用函数，以减少实现共同目标所需的编码量（如显示结果及其相应效果）

---

提前感谢您。

您好，只要快速浏览一下您的代码（我还没有完全测试过），我有以下评论：

• 按

  Enter

  将提交两个表单
  • 您可以通过禁用

    Enter

    键或以下操作来解决此问题：
  • 删除表单方法（它已经在$.ajax函数中）
  • 将表单操作移动到$.ajax函数中
  • 将输入的

    type=“submit”

    替换为

    type=“button”

  • 将

    .submit

    功能更改为

    。单击
    ，然后将按钮作为目标，而不是表单

• 删除$.ajaxStart和$.ajaxStop
  • 当提交任何一个表单时，这些函数都会显示加载消息
  • 将显示加载消息移动到

    中。单击
    功能

  • 将隐藏加载和淡入结果移动到

    的末尾。单击
    功能

像