jQuery – 多个表单提交触发无关的多个错误消息

我的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的新手，所以请耐心等待我。 代码如下：

  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(''); } 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 } }   $(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; }); })  
ToDo Form
 
 
 
 Enter to-do item:   
 
 
 
 
 
REGISTER Form
 
 
 
 
 
 
Name
 
  
 
 
 
e-mail
 
  
 
 
 
phone
 
  
 
 
 
comment
 
 
 
 
 
   
 
 
 
 <?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 = 'Error: 
'.implode('
', $error); } else { $success = 1; $message = 'Thank You For Filling This Form
'; } 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 = 'Error: 
'.implode('
', $error); $message .= $error['content']; } else { $success = 1; $message = 'Thank You For Filling This Form
'; } print json_encode(array('success' => $success, 'message' => $message)); die(); ?> 

请建议我解决这个问题，同时有效地利用这些function来减少实现共同目标可能需要的编码量（比如用相应的效果显示结果）。

先感谢您。

Answer 1

Hiya，只需快速浏览一下您的代码（我没有彻底测试过），我有以下评论：

• 按Enter将提交两个表格
  • 您可以通过禁用Enter键或以下内容来解决此问题：
  • 删除表单方法（它已经在$ .ajax函数中）
  • 将表单操作移动到$ .ajax函数中
  • 用type="button"替换input type="submit" type="button" 。
  • 将.submit函数更改为.submit并定位按钮而不是表单。
• 删除$ .ajaxStart和$ .ajaxStop
  • 这些函数在提交任何表单时都会显示加载消息
  • 将show loading消息移动到.click函数中
  • 将隐藏加载和淡入结果移动到.click函数的末尾

就像，我之前说过，我没有测试任何这个（我没有我的php服务器），但我知道两个表单在按Enter键时都会提交。