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) {...}