CODEWITHSUNDEEP
javascripthtmljquerybootstrap-modal
D_P
D_P

Reputation: 862

How to close the Bootstrap modal after submit?

Here I have a Bootstrap modal. My requirement is when I successfully submit the form with submit button then I want to close the modal after some seconds. The problem here is when I enter some text instead of integer in my input or if I enter some invalid inputs and then when I click the submit button the input field shows the error and the modal closes after some seconds immediately.

I don't want to close the Bootstrap modal if the input field is invalid when clicking submit button.

How can I do it ?

EDIT: It works perfect with valid input.

html

 <div class="modal-body">
 <form action="">
     <input type="number" name="rows" min="0" value="0" max="10" required><br>
     <button type="submit" id="my_button" class="btn btn-info btn-sm">Submit</button>
 </form>
 </div>

script

<script>
 $('#my_button').click(function() {
    setTimeout(function() {$('#myModal').modal('hide');}, 4000);
});
</script>

Upvotes: 5

Views: 3660

Answers (2)

Shah Alam
Shah Alam

Reputation: 87

please try this code snippet

<div class="modal-body">
    <form action="">
        <input type="number" name="rows" min="0" value="0" max="10" required><br>
        <button type="submit" id="my_button" class="btn btn-info btn-sm">Submit</button>
    </form>
</div>

<script>
 $('#my_button').click(function() {
    setTimeout(function() {$('#myModal').modal('toggle');}, 4000);
});
</script>

Upvotes: 0

kmoser
kmoser

Reputation: 9273

Don't set the timeout if the form has invalid values:

$('#my_button').click(function() {
  if ( ! $('form input:invalid' ).length ) {
    setTimeout(function() {$('#myModal').modal('hide');}, 4000);
  }
});

Upvotes: 5

Related Questions