Question

我已经下载了一个包含1个电子邮件表单的bootstrap模板。我正在尝试在同一页面上添加第二个表单和其他字段。当我单击第二个表单中的提交按钮时，始终使用原始表单的值。

这是我的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

更改第二个表单和jquery选择器的id属性。例如。将'email'重命名为'email1'，就像使用表单一样。

更好的解决方案是完全停止使用id-s，并切换到“name”属性。

Answer 2

为每个按钮设置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();
    }


    });
});

我没有测试但它应该可以工作。

第二个表单在bootstrap模板中发送电子邮件

2 个答案: