javascript - 2 个使用 Ajax 的 Bootstrap 登录模式，只有 1 个有效

Question

首先我想说我是 Ajax 的新手，刚刚开始学习，所以我的代码可能不是最好的......这是一个很长的问题，但我想提供尽可能多的细节

我的问题

我的站点有 2 个登录/注册选项，第一个位于顶部导航栏，第二个位于中间左列

示例

导航栏 1 注册/登录

Nav Bar 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)之前它工作正常

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

我的药丸代码(导航栏 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 被移除时，pills Nav2 起作用......

我在这里做错了什么？

Answer 1

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

var form = $('#regTab');

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

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

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

供大家引用，可以看jQuery ID Selector

希望对您有所帮助!