如果存在五个以上具有不同ID的表单，如何使用ajax验证和提交表单数据

Question

我制作了一个由6个不同ID的表单组成的网页（contatcForm、emailForm、inquiryForm、CompForm和otherForm）。所有表单都有4个字段（姓名、电子邮件、主题和消息）。现在的问题是：我找不到合适的方法来使用ajax仅用于特定表单的验证和提交。

我当前的脚本是：

/使用$（'html'）.on是因为表单页面是通过ajax/加载的

  $('html').on ('click','.sendit', function (){
     Var a = $(this).parent ('form').attr ('id');
     a.submit (submit);
   });

 function submit (){
  Var form = $(this);
  If (! $(.name).val () || ! $(.email).val () || ! $(.subject).val () || ! $(.message).val ()){
   $('.incomp').show ();
   } else {
     $('.sending').show ();
   $.ajax ({
      url: form.attr ('action') + "?ajax=true",
      type: form.attr ('method'),
      data: form.serialize(),
      success: finished
  });
  }
  return false;
  }
  Function finished (response){
    response = $.trim (response);
     $('.sending').show ();
    If (response == "success"){
      $('.success').show ();
    } else {
     $('.error').show ();
    }
   }

这个脚本可以很好地提交表单数据，但是使用它的缺点是：".show（）；"在所有表单上执行。

HTML代码：

                   <ul><li>Contact</li>
            <form id="contactForm" action="processForm.php" method="post">
            <span class="sending"><p>Sending your message. Please wait...</p></span>
            <span class="success"><p>Thanks for sending your message! We'll get back to you shortly.</p></span>
            <span class="error"><p>There was a problem sending your message. Please try again.</p></span>
            <span class="incomp"><p>Please complete all the fields in the form before sending.</p></span>
            <input type="text" name="name" placeholder="name" />
            <input type="email" name="email" placeholder="email" />
            <input type="text" name="subject" placeholder="Subject" />
            <textarea name="message" placeholder="Message"></textarea>
            <input type="submit" class="sendit" name="sendMessage" value="Send Email" />
        </form></li>
           <li>Inquiry</li>
            <form id="inquiryForm" action="processForm.php" method="post">
            <span class="sending"><p>Sending your message. Please wait...</p></span>
            <span class="success"><p>Thanks for sending your message! We'll get back to you shortly.</p></span>
            <span class="error"><p>There was a problem sending your message. Please try again.</p></span>
            <span class="incomp"><p>Please complete all the fields in the form before sending.</p></span>
            <input type="text" name="name" placeholder="name" />
            <input type="email" name="email" placeholder="email" />
            <input type="text" name="subject" placeholder="Subject" />
            <textarea name="message" placeholder="Message"></textarea>
            <input type="submit" class="sendit" name="sendMessage" value="Send Email" />
        </form>
               </ul>

其他表单相同，但表单ID根据表单的标题而不同（#complaintForm，#otherForm）

谢谢&问候

Answer 1

在javascript代码中添加要显示的div的上下文，如下所示：

$('.incomp', form).show();

正如你有form = $(this)；

或者：

form.find('.incomp').show();

希望它能有所帮助！

Answer 2

查看jQuery表单插件如果你有五种不同ID的形式。将相同的类分配给所有表单，例如.forms

然后调用ajax函数作为

$('.forms').ajaxForm(function(response){
   //Do whatever you want with response here
});