2使用Ajax的Bootstrap登录模式，只有1个工作

Question

我想首先说我是Ajax的新手并且刚开始学习，所以我的代码可能不是最好的...这是一个很长的问题，但我想尽可能多地提供详细信息< / p>

我的问题

我的网站在顶部导航栏上有2个登录/注册选项1，在左中栏中有第二个

示例

导航栏1注册/登录

导航栏2注册/登录

Nav1打开下图所示的模块，一切正常，可以看到

我的登录模式代码如下：

AJAX / JAVASCRIPT

$(function () {
    var form = $('#regTab');
    var formMessages = $('#tabregMsg');

    // Set up an event listener for the contact form.
    $(form).submit(function (e) {
        // Stop the browser from submitting the form.
        e.preventDefault();

        //do the validation here
        if (!validateTabReg()) {
            return;
        }

        // Serialize the form data.
        var formData = $(form).serialize();

        // Submit the form using AJAX.
        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
        }).done(function (response) {
            // Make sure that the formMessages div has the 'success' class.
            $(formMessages).removeClass('error').addClass('success');

            // Set the message text.
            $(formMessages).html(response); // < html();

            // Clear the form.
            $('').val('')
        }).fail(function (data) {
            // Make sure that the formMessages div has the 'error' class.
            $(formMessages).removeClass('success').addClass('error');

            // Set the message text.
            var messageHtml = data.responseText !== '' ? data.responseText : 'Oops! An error occured and your message could not be sent.';
            $(formMessages).html(messageHtml); // < html()
        });

    });

    function validateTabReg() {
        var valid = true;

            //I have removed validation for now
        return valid;
    }
})
</script>

HTML

<form name="regForm" id="regTab" action="reg_upload.php" method="post">
    <label class="control-label col-sm-2" for="regName">Name:</label>
    <div class="col-sm-10">
        <span  class="info"></span><br/>
        <input type="text" name="userName" class="form-control">
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="regLastName">Surname:</label>
        <div class="col-sm-10">
            <span class="info"></span><br/>
            <input type="text" name="userSurname" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="regEmail">Email:</label>
        <div class="col-sm-10"> 
            <span class="info"></span><br/>
            <input type="text" name="userEmail" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="regPword">Pword:</label>
        <div class="col-sm-10">
            <span class="info"></span><br/>
            <input type="password" name="userPword"  class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="confRegPword">Confirm Pword:</label>
        <span class="info"></span><br/>
        <div class="col-sm-10">
            <input type="password" name="userPword2" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="regPhone">Phone:</label>
        <span class="info"></span><br/>
        <div class="col-sm-10">
            <input type="text" name="userPhone" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="regCountry">Country:</label>
        <span class="info"></span><br/>
    </div>
    <button name="submit" class="btnAction" >Register</button>
</form>

我的问题

我的问题来自选项卡...导航栏2，消息（Ajax响应）应该显示在选项卡中... 它工作正常，直到我添加顶部导航栏（导航栏1）< / strong>

而不是阻止表单提交，而不是它应该转到分配给action=""属性的页面

我的药物代码（NAV BAR 2注册）

AJAX / Javascript

$(function () {
    var form = $('#regTab');
    var formMessages = $('#regMsg');

    // Set up an event listener for the contact form.
    $(form).submit(function (e) {
        // Stop the browser from submitting the form.
        e.preventDefault();

        //do the validation here
        if (!validateTabReg()) {
            return;
        }

        // Serialize the form data.
        var formData = $(form).serialize();

        // Submit the form using AJAX.
        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
        }).done(function (response) {
            // Make sure that the formMessages div has the 'success' class.
            $(formMessages).removeClass('error').addClass('success');

            // Set the message text.
            $(formMessages).html(response); // < html();

            // Clear the form.
            $('').val('');
        }).fail(function (data) {
            // Make sure that the formMessages div has the 'error' class.
            $(formMessages).removeClass('success').addClass('error');

            // Set the message text.
            var messageHtml = data.responseText !== '' ? data.responseText : 'Oops! An error occured and your message could not be sent.';
            $(formMessages).html(messageHtml); // < html()
        });

    });

    function validateTabReg() {

        var valid = true;

        //SKIP VALIDATION FOR NOW

        return valid;
    }
});

HTML

<div id="frmContact">
    <div id="regMsg"></div>
    <div class="form-group">
        <form name="regForm" id="regTab" action="reg_upload_Tabs.php" method="post">
            <label class="control-label col-sm-2" for="regName">Name:</label>
            <div class="col-sm-10">
                <span id="userName-info" class="info"></span><br/>
                <input type="text" name="userName" id="userName" class="form-control">
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="regLastName">Surname:</label>
                <div class="col-sm-10">  
                    <span id="userSurname-info" class="info"></span><br/>
                    <input type="text" name="userSurname" id="userSurname" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="regEmail">Email:</label>
                <div class="col-sm-10"> 
                    <span id="userEmail-info" class="info"></span><br/>
                    <input type="text" name="userEmail" id="userEmail" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="regPword">Pword:</label>
                <div class="col-sm-10">   
                    <span id="userPword-info" class="info"></span><br/>
                    <input type="password" name="userPword" id="userPword" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="confRegPword">Confirm Pword:</label>
                <span id="userPword2-info" class="info"></span><br/>
                <div class="col-sm-10">   
                    <input type="password" name="userPword2" id="userPword2" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="regPhone">Phone:</label>
                <span id="userPhone-info" class="info"></span><br/>
                <div class="col-sm-10">  
                    <input type="text" name="userPhone" id="userPhone" class="form-control">
                </div>
            </div>
            <button name="submit" class="btnAction" >Register</button>
        </form>
    </div>
</div>

我的问题

为什么第一个模块工作（导航1）但使用基本相同的代码的药丸（导航2）不起作用？

当Nav1被移除时，Nav2的工作效果还有更多......

我在这里做错了什么？

Answer 1

您应该为“regForm”使用不同的ID。

var form = $('#regTab');

根据jQuery的解释和javascript的定义，

每个id元素只能在文档中使用一次。

如果为多个元素分配了相同的ID，则使用该ID的查询将仅选择DOM中的第一个匹配元素。

供您参考，您可以看到jQuery ID Selector

希望它有所帮助！

Answer 2

您的整个文档中应该有唯一的ID。只需删除您的ID或使其独一无二。 以您的形式 jquery

$(function () { 
    var form = $('form[name="regForm"]').closest("form"); 
     var formMessages = $('#regMsg'); // 

        // Set up an event listener for the contact form.
        $(form).submit(function (e) {
            // Stop the browser from submitting the form.
            e.preventDefault();

            //do the validation here
            if (!validateTabReg()) {
                return;
            }

            // Serialize the form data.
            var formData = $(form).serialize();