如何防止我的登录模式在提交时刷新我的网站？

Question

I'm pretty new to modals (and honestly, webdev in general). I suspect this has something to do with my $('#login-modal').submit();

I have a login modal:

    <div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="loginmodal-container">
                <img src="awslogo.png" alt="" width="80%">
                <form>
                    <input id="awsu" type="text" name="user" placeholder="Username">
                    <input id="awsp" type="password" name="pass" placeholder="Password">
                    <input id="aws-submit" type="submit" name="login" class="form-control login loginmodal-submit" value="Login">
                </form>
            </div>
        </div>
    </div>

And I display it in my js here:

this.ctrlNext.addEventListener( 'click', function( ev ) { 
            ev.preventDefault();
            console.log(self.current);
            // display authentication
            if (self.current === 0){
                $('#login-modal').modal('show');
                var awsu = document.getElementById("awsu").value;
                var awsp = document.getElementById("awsp").value;
                console.log(awsu);
                console.log(awsp);
            }

This pops up a nice little login modal:

The issue I'm running into I suspect revolves around what happens when I click Login:

$('#aws-submit').click(function( ev ) {
            //ev.preventDefault();
            console.log("clicked a");
            $('#login-modal').submit();
        });

I tried ev.preventDefault(); but this just kept the modal up the whole time. Maybe I need to $('#login-modal').modal('hide'); in here, and somehow grab the data from the form?

ninja edit -- tried $('#login-modal').modal('hide'); and it seems to work, but I have no earthly idea if I'm doing this the "right" way, and how to get the values properly.

Answer 1

Try ev.stopPropagation(); .

You can also return false; from your handler to stop the event propagation.

Answer 2

When you submit the form, it submits its contents to the action attribute. If no action attribute is set, it submits to itself.

ev.preventDefault(); prevents the form from submitting the normal way, and is what you need in this case. As you noted, it left the modal on the screen, that is because it stopped the page refreshing. And to get rid of the modal you use $('#login-modal').modal('hide'); as you thought.

To grab the data you can serialize the form contents.

Give your form an id <form id="login_form">

Use $('#login_form').serialize(); to serialize the data and then you can use ajax to post the data to the server.