second form in bootstrap template to send an email

Question

I've downloaded a bootstrap template which has 1 email form in it. I'm trying to add a second form with other fields on the same page. When I click the submit button in my second form, the values of the original form are always used.

Here is my html:

// second form added by me
<form name="sentMessage2" id="contactForm2" novalidate>

    // input elements like for example #name

    <div class="row">
        <div class="form-group col-xs-12">
            <button type="submit" class="btn btn-success">Send</button>
        </div>
    </div>
</form>

// original form
<form name="sentMessage" id="contactForm" novalidate>

    // input elements like for example #name

    <div class="row">
        <div class="form-group col-xs-12">
            <button type="submit" class="btn btn-success">Send</button>
        </div>
    </div>
</form>

And here is my javascript file contact_me.js (not adjusted):

$(function() {
$("input,textarea").jqBootstrapValidation({
// I dont understand how the form calls this method. There is no reference to the form's name/id
    preventSubmit: true,
    submitError: function($form, event, errors) {
        // additional error messages or events
    },
    submitSuccess: function($form, event) {
        event.preventDefault(); // prevent default submit behaviour
        // get values from FORM
        var name = $("input#name").val();
        var email = $("input#emaill").val();
        var phone = $("input#phone").val();
        var message = $("textarea#message").val();
        var firstName = name;

        // when I debug here, I always see the values from the original form

How can I create a second form that sends an email?

Answer 1

Change the id properties on your second form and the jquery selectors. Eg. rename 'email' to 'email1', and such, as you did with the form.

A better solution would be to stop using id-s at all, and switch to "name" attributes.

Answer 2

Set id and class for each button

// second form added by me
<form name="sentMessage2" id="contactForm2" novalidate>

    // input elements like for example #name

    <div class="row">
        <div class="form-group col-xs-12">
            <button id"btn2" type="submit" class="btnSend btn btn-success">Send</button>
        </div>
    </div>
</form>

// original form
<form name="sentMessage" id="contactForm" novalidate>

    // input elements like for example #name

    <div class="row">
        <div class="form-group col-xs-12">
            <button id"btn1" type="submit" class="btnSend btn btn-success">Send</button>
        </div>
    </div>
</form>

Your jquery code will be like this

$( document ).ready(function() {
    $(".btnSend ").click(function() {
    var id = $(this).attr("id");
      if(id==="btn1"){
          $( "#contactForm" ).submit();      
    }
      if(id==="btn2"){
          $( "#contactForm2" ).submit();
    }


    });
});

I didnt test but it should work.