CODEWITHSUNDEEP
ajaxformssubmitbootstrap-modalpreventdefault
user3390251
user3390251

Reputation: 327

Can't prevent redirect - submit form in modal

I have a simple submit form that is inside a bootstrap modal This code works fine if I don't use a modal, but once inside the modal, the preventDefault no longer works and the submit function redirects to the page to my endpoint :( Any ideas what bootstrap's modal is doing to break the preventDefault? Or another way to prevent the redirect?

<div id="bootstrapModal" class="bootstrapModal">
<div id="modal-dialog" class="modal-dialog">
<div class="modal-content" id="modal-content">
<form action="/myendpoint.cmd" id="myForm" name="myForm" role="form">
<div class="input-group">
<input type="email" name="userEmail" class="form-control" id="emailSignUp"   placeholder="Email Address">
<span class="input-group-btn">
<button type="submit" class="btn btn-secondary" id="emailbtn"">Sign Up</button>
</span>
</div>
</form>
</div>
</div>
</div




<script>
$('#myForm').submit(function(e) {
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
    $.ajax({
        url: formURL,
        type: "POST",
        data: postData,
        success: function(data) {
    console.log('success!')
        }
    });
    e.preventDefault(); //STOP default action
});
</script>

Upvotes: 0

Views: 2386

Answers (2)

steven
steven

Reputation: 104

Looks like you have invalid (double quoted) written in button that might break the behaviour.

<button type="submit" class="btn btn-secondary" id="emailbtn"">Sign Up</button>

Just remove the duplicate quotes like below:

<button type="submit" class="btn btn-secondary" id="emailbtn">Sign Up</button>

Upvotes: 0

taiabur rahman
taiabur rahman

Reputation: 51

may you can try with jquery syntax

<script>
$(document).ready(function(){
   $('#myForm').submit(function(e) {
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
    $.ajax({
        url: formURL,
        type: "POST",
        data: postData,
        success: function(data) {
        console.log('success!')
      }
    });
    e.preventDefault(); //STOP default action
});
});
</script>

Upvotes: 1

Related Questions