вторая форма в шаблоне бутстрапа для отправки по электронной почте

Question

Я загрузил шаблон начальной загрузки, в котором есть 1 форму электронной почты. Я пытаюсь добавить вторую форму с другими полями на одной странице. Когда я нажимаю кнопку отправки в моей второй форме, всегда используются значения исходной формы.

Вот мой 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> 

А вот мой JavaScript contact_me.js файлов (не регулируется):

$(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 

Как я могу создать вторую форму, которая отправляет по электронной почте?

Answer 1

Измените свойства id на вашей второй форме и селекторах jquery. Например. переименуйте 'электронную почту' на 'email1', и такие, как вы сделали с формой.

Лучшим решением было бы прекратить использование id-s вообще и переключиться на атрибуты «name».

Answer 2

Set ID и класс для каждой кнопки

// 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> 

Ваш код JQuery будет как этот

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


    }); 
}); 

я не тест, но он должен работать.