Question

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);
            }
        }
    });
}

Answer 1

使用class="contactForm"代替id="contactForm"和js：

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

通过ajax发送2个联系表格

1 个答案: