通过ajax发送2个联系人表单


sending 2 contact forms through ajax

Webdesigner正在寻求对表单的更深入理解。。。

你好!

我在同一个页面上有两个类似的联系表单,它们是通过ajax发送的。

每个联系表格本身都很好,但当我把它们放在页面上时,其中一个就停止了工作。。。

我知道在一个页面上有两个表单存在问题,所以我给了它们不同的ID(#contactForm1,#contactForm2),这是有效的,但我相信必须有更聪明的方法来做到这一点。。。

你能给我什么建议,让它以最好的方式工作?

我的html如下:

<form role="form" id="contactForm" class="contact-form" data-toggle="validator">
<section id="content">
  <!-- NAME -->
  <div class="form-group">
    <div class="controls">
      <input autocomplete="off" type="text" id="name" class="form-control" placeholder="Your Name" required data-error="Please enter your name">
      <div class="help-block with-errors"></div>
    </div>
  </div>
  <!-- SUBJECT -->
  <div class="form-group">
    <div class="controls">
      <input autocomplete="off" type="text" id="msg_subject" class="form-control" placeholder="Company Name" required data-error="Please enter your message subject">
      <div class="help-block with-errors"></div>
    </div>
  </div>
  <!-- MESSAGE -->
  <div class="form-group">
    <div class="controls">
      <textarea id="message" rows="7" placeholder="short description" class="form-control" required data-error="Write your message"></textarea>
      <div class="help-block with-errors"></div>
    </div>  
  </div>
  <!-- EMAIL -->
  <div class="form-group">
    <div class="controls">
      <input autocomplete="off" type="email" class="email form-control" id="email" placeholder="Email Adress" required data-error="Please enter your email">
      <div class="help-block with-errors"></div>
    </div>
  </div>
  <button type="submit" id="submit" class="btn btn-success"></i> SEND</button>
  <div id="msgSubmit" class="h3 text-center hidden"></div> 
  <div class="clearfix"></div>   
</section>
</form>     

这里是我的JS:

$("#contactForm").validator().on("submit", function (event) {
    if (event.isDefaultPrevented()) {
        formError();
        submitMSG(false, "got everything right?");
    } else {
        event.preventDefault();
        submitForm();
    }
});
function submitForm(){
    var name = $("#name").val();
    var email = $("#email").val();
    var msg_subject = $("#msg_subject").val();
    var message = $("#message").val();
    $.ajax({
        type: "POST",
        url: "assets/php/form-process.php",
        data: "name=" + name + "&email=" + email + "&msg_subject=" + msg_subject + "&message=" + message,
        success : function(text){
            if (text == "success"){
                formSuccess();
            } else {
                formError();
                submitMSG(false,text);
            }
        }
    });
}

在js:中使用class="contactForm"而不是id="contactForm"

(".contactForm").validator().on("submit", function (event) {...}