Search code examples
javascriptjquerymodal-dialogdocument-ready

Action on submit


I have beginner question about submit behavior. Every time I press submit my loginModal keep coming back up, is this expected behavior? Its like the ready() function is fired again. I would like my initiate App() function to be executed after submit

Here is bits of my code:

//Show loginModal on page ready
    $(document).ready(function(){
        $('#loginModal').modal('show');
    });

//loginModal submit
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>`enter code here`
</div>

//When submit button is clicked 
$('#loginModal').submit(function() {}
    initiateApp()

});

Solution

  • You need to prevent the default behviour of the submit button i.e. to refresh the page. Use event.preventDefault()

    $('#loginModal').submit(function(event) {
            event.preventDefault();
            initiateApp()
        }
    
    );