Javascript 两种表单和按钮引导ajax

我的页面有问题。它是用HTML、Bootstrap和PHP编写的

我在HTML页面中有两个表单。第一种是接触形式，另一种是模态形式，这是分布形式

问题在于分发表单中的数据，因为当我单击按钮时，它只发送联系人表单，而不发送分发表单

这是代码

分发表格：

<div class="col-lg-12 animated slideInUp">
        <form name="sentMessage" action="contact_me.php"  id="contactForm2" novalidate>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="NOMBRE *" id="name" required data-validation-required-message="Por favor introduce tu nombre.">
                        <p class="help-block text-danger"></p>
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control" placeholder="EMAIL *" id="email" required data-validation-required-message="Por favor introduce tu E-mail.">
                        <p class="help-block text-danger"></p>
                    </div>
                    <div class="form-group">
                        <input type="tel" class="form-control" placeholder="TELEFONO *" id="phone" required data-validation-required-message="Por favor introduce tu numero de Telefono.">
                        <p class="help-block text-danger"></p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <textarea class="form-control" style="height:135px;" placeholder="TU MENSAJE *" id="message" required data-validation-required-message="Por favor introduce tu mensaje."></textarea>
                        <p class="help-block text-danger"></p>
                    </div>
                </div>
                <div class="clearfix"></div>
                <div class="col-lg-12 text-center">
                    <div id="success"></div>
                    <button type="submit" class="btn btn-primary">UNIRME AL EQUIPO</button>
                </div>
            </div>
        </form>
    </div>
</div>

统一装备

联络表格：

<div class="col-lg-12">
    <form name="sentMessage" action="contact_me.php" id="contactForm" novalidate>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="NOMBRE *" id="name" required data-validation-required-message="Por favor introduce tu nombre.">
                    <p class="help-block text-danger"></p>
                </div>
                <div class="form-group">
                    <input type="email" class="form-control" placeholder="EMAIL *" id="email" required data-validation-required-message="Por favor introduce tu E-mail.">
                    <p class="help-block text-danger"></p>
                </div>
                <div class="form-group">
                    <input type="tel" class="form-control" placeholder="TELEFONO *" id="phone" required data-validation-required-message="Por favor introduce tu numero de Telefono.">
                    <p class="help-block text-danger"></p>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <textarea class="form-control" placeholder="TU MENSAJE *" id="message" required data-validation-required-message="Por favor introduce tu mensaje."></textarea>
                    <p class="help-block text-danger"></p>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="col-lg-12 text-center">
                <div id="success"></div>
                <button type="submit" class="btn btn-primary">Enviar Mensaje</button>
            </div>
        </div>
    </form>
</div>

Enviar Mensaje

请与我联系：

$(function() {

    $("input,textarea").jqBootstrapValidation({
        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#email").val();
            var phone = $("input#phone").val();
            var message = $("textarea#message").val();
            var firstName = name; // For Success/Failure Message
            // Check for white space in name for Success/Fail message
            if (firstName.indexOf(' ') >= 0) {
                firstName = name.split(' ').slice(0, -1).join(' ');
            }
            $.ajax({
                url: "../contact_me.php",
                type: "POST",
                data: {
                    name: name,
                    phone: phone,
                    email: email,
                    message: message
                },
                cache: false,
                success: function() {
                    // Success message
                    $('#success').html("<div class='alert alert-success'>");
                    $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-success')
                        .append("<strong>Tu mensaje ha sido enviado. </strong>");
                    $('#success > .alert-success')
                        .append('</div>');

                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
                error: function() {
                    // Fail message
                    $('#success').html("<div class='alert alert-danger'>");
                    $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!");
                    $('#success > .alert-danger').append('</div>');
                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
            })
        },
        filter: function() {
            return $(this).is(":visible");
        },
    });

    $("a[data-toggle=\"tab\"]").click(function(e) {
        e.preventDefault();
        $(this).tab("show");
    });
});

$（函数（）{
$（“输入，文本区域”）.jqBootstrapValidation({
对,，
submitError：函数（$form、event、errors）{
//其他错误消息或事件
},
submitSuccess：函数（$form，event）{
event.preventDefault（）；//防止默认提交行为
//从表单中获取值
变量名称=$（“输入名称”）.val（）；
var email=$（“输入电子邮件”）.val（）；
var phone=$（“输入电话”）.val（）；
var message=$（“textarea#message”）.val（）；
var firstName=name；//对于成功/失败消息
//检查名称中是否有空格以显示成功/失败消息
if（firstName.indexOf（“”）>=0）{
firstName=name.split（“”）.slice（0，-1）.join（“”）；
}
$.ajax({
url:“../contact_me.php”，
类型：“POST”，
数据：{
姓名:姓名,，
电话:电话,，
电邮:电邮,，
信息：信息
},
cache:false，
成功：函数（）{
//成功信息
$（'#success'）.html（“”）；
$（'#success>.alert success'）.html（“×；”）
.附加（“”）；
$（“#success>.alert success”）
.追加（“Tu mensaje ha sido enviado.”；
$（“#success>.alert success”）
.附加（“”）；
//清除所有字段
$（'#contactForm'）。触发器（“重置”）；
},
错误：函数（）{
//失败消息
$（'#success'）.html（“”）；
$（'#success>.alert danger'）.html（“×；”）
.附加（“”）；
$（“#success>.alert danger”）.append（“对不起”+firstName+”，我的邮件服务器似乎没有响应。请稍后再试！”）；
$（“#success>.alert danger”）.append（“”）；
//清除所有字段
$（'#contactForm'）。触发器（“重置”）；
},
})
},
过滤器：函数（）{
return$（this）.is（“：可见”）；
},
});
$（“a[数据切换=\”选项卡\“]）。单击（函数（e）{
e、 预防默认值（）；
$（此）.tab（“显示”）；
});
});

问题的原因是两种形式的id名称相同。保持每个页面的id名称唯一是很重要的（作为一项原则和良好实践），但如果不这样做，jQuery将获取第一个匹配的id——这就是为什么只提交来自第一个表单的输入

我建议将第二个表单的ID更改为name_1、email_1、phone_1和message_1（使其唯一），然后在脚本中替换：

// get values from FORM
var name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#phone").val();
var message = $("textarea#message").val();

与：

然后以适当的形式提交正确的值

希望这有帮助

如果您不熟悉上面代码中的“三元”运算符-它们只是If{}else{}语句的便捷快捷方式-请查看：

// Determine which form is being submitted
var form_0 = $form.attr('id') === 'contactForm2' ? true : false;

// If it's the first form, assign the values from that form,
// otherwise assign the values from the second form
var name = form_0 ? $('#name').val() : $('#name_1').val();
var email = form_0 ? $('#email').val() : $('#email_1').val();
var phone = form_0 ? $('#phone').val() : $('#phone_1').val();
var message = form_0 ? $('#message').val() : $('#message_1').val();