CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapmodal-dialog
DenisMasot
DenisMasot

Reputation: 747

open modal bootstrap on submit form

how can I open a modal when the user has validated the form ? S’inscrire 

    <div class="modal fade" id="registration" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <h3 class="modal-title">Merci !</h3>
          </div>
        </div>
      </div>
    </div>

Upvotes: 4

Views: 24524

Answers (4)

Shubham Goyal
Shubham Goyal

Reputation: 1

you can add this on validation success:

$("#registration").modal('show');

Upvotes: 0

Master Yoda
Master Yoda

Reputation: 4412

I would use an Ajax solution to submit the form without refreshing the page.

You could even update the modal response based on the outcome of the request.

$("#ajaxform").submit(function(e) {

  var url = "path/to/your/script.php"; // the script where you handle the form input.

  $.ajax({
    type: "POST",
    url: url,
    data: $("#ajaxform").serialize(), // serializes the form's elements.
    success: function(data) 
    {
     //if request successful
     $(".modal-title").text('Request successful');
     $('#registration').modal('show');
    },
    error: function(data) 
    {
      //if request unsuccessful
      $(".modal-title").text('Request failed');
      $('#registration').modal('show');
    }
  }).done(function() {
    //finally, reinitialise modal text back to default 'merci'
    $(".modal-title").text('merci');
  });

  e.preventDefault(); // avoid to execute the actual submit of the form.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<form name="ajaxform" id="ajaxform" action="ajax-form-submit.php" method="POST" class="form-group">
  First Name: <input type="text" name="fname" value="" class="form-control"/> <br/> Last Name: <input type="text" name="lname" value="" class="form-control"/> <br/> Email : <input type="text" name="email" value="" class="form-control"/> <br/>
  <button type="submit" class="btn btn-default">submit</button>
</form>

<div class="modal fade" id="registration" tabindex="1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <h3 class="modal-title">Merci !</h3>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Steven
Steven

Reputation: 1414

You can add this to to your function when you the form is validated:

$('#registration').modal({
        show: 'false',
        backdrop: 'static',
        keyboard: false
    });
  • Keyboard false means when you press escape the modal won't disappeared.
  • Setting the backdrop to static means when people click with their mouse outside of the modal. The modal won't close.

EDIT

if ($("form button").valid()) { 
       $('#registration').modal({
            show: 'false',
            backdrop: 'static',
            keyboard: false
            });
};

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You can use the modal id or class to open it when the user clicks on submit button. Lets say you have this HTML

<form id="submit-button">
    //form components
</form>

Then you can write this JQuery code:

//trigger when form is submitted
$("#submit-button").submit(function(e){
    $('#registration').modal('show');
    return false;
});

The $('#registration').modal('show'); will display the modal and return false; prevent the form to post the data which will stop the page to reload. Or, you can also do this

$(document).ready(function() {
  $('#submit-button').on('submit', function(e){
      $('#registration').modal('show');
      e.preventDefault();
  });
});

e.preventDefault(); will stop the page from the page reload.

Upvotes: 6

Related Questions