sending 2 contact forms through ajax - php

Question

Webdesigner seeking deeper understanding of forms...
Hello!
I have two similar contact forms on the same page which are sent out through ajax.
Each contact form is working fine on its own, but as soon as I put them both together on the page, one of them stops working...
I know there are issues having two forms on one page, so I gave them different ids (#contactForm1, #contactForm2), which is working, but I am sure there has to be a smarter way to do this...
What advice would you give me to make this working the best way?
My html as followed:
<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>
Here my 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

Use class="contactForm" instead of id="contactForm" and in js:
(".contactForm").validator().on("submit", function (event) {...}