2 Bootstrap Login Modals With Ajax, Only 1 working

I would like to start by saying I am very new to Ajax and just started learning, so my code might not be the best...this is quite a long question but I would like to give as much detail as possible

My Problem

My site has 2 login / registration options 1 on the top navbar and the second in the middle left column

example

enter image description here Nav Bar 1 Registration / Login

enter image description here Nav Bar 2 Registration / Login

Nav1 Opens the module seen in the image below, everything working perfectly as can be seen

enter image description here

My code for the login modal is as follows:

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>

MY PROBLEM

My problem comes in with the tabs...Nav Bar 2, Messages (Ajax response) should be displayed in the Tab...It worked fine until I added the top navigation bar (nav bar 1)

Instead of preventing the form to submit like it should, it goes to the page assigned to action="" attribute

MY CODE FOR PILLS (NAV BAR 2 REGISTRATION)

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>

MY QUESTION

Why is it that the first module works (nav 1) but the pills(nav 2) using essentially almost the same code does NOT work?

Further more when Nav1 is removed the pills Nav2 works...

What am I doing wrong here?

Answers 1

  • You should have unique id in your entire document. just remove your id or make this unique. in your form 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();
    

Related Articles