jQuery Bootstrap Confirmation Dialog Modal - Submit Button Does not work

0
votes

I have a sample code below which consists of a simple bootstrap modal for delete confirmation message. The code is working perfectly,while i give input type= button , but once i give type=submit it does not submit form and dialog modal dont open. Here is my code.

<?php
if(isset($_POST['submit'])){
echo $_POST['first_name'];
}
?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<script type="text/javasript">
$('.submit').click(function(e){
  e.preventDefault();
});
</script>

  <title>JS Bin</title>
</head>
<body>
<form action="" method="post">
  <input type="text" name="first_name" id="first_name">
  <!--<button type="button" class="btn btn-default" data-toggle="modal" data-target="#confirm-submit">Submit</button>-->
  <button type="submit" name="submit" class="btn btn-default" data-toggle="modal" data-target="#confirm-submit">Submit</button>


  <div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h2 class="modal-title">Confirm</h2>
        </div>
        <div class="modal-body">
          <p>Are you sure you want to submit?</p>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-success">Yes, Submit</button>
          <button type="submit" name="" class="btn btn-danger" data-dismiss="modal">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</form>
</body>
</html>

Please help me..

2
phpjquerybootstrap-modal

2 Answers

0
votes

In the modal footer [SOLVED]

<div class="modal-footer">
      <button type="submit" class="btn btn-success">Yes, Submit</button>
      <button type="submit" name="submit" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>

As your first button on the form, 

<button type="submit" name="submit" class="btn btn-default" data-toggle="modal" data-target="#confirm-submit">Submit</button>

opens the modal but doesn't submit the form as you have used e.preventDefault(); on that button click,

After modal opens once you click on 'Yes, Submit' it will submit the form again but this time isset($_POST['submit']) will be blank as the 'Yes, Submit' button doesn't have name.

Just add name to that button and it will work.

Final code will look like as above [SOLVED]

0
votes

<script type="text/javascript">
$(document).on('submit', 'form', function(e){
  e.preventDefault();
});
</script>

You (first) have a typo in the script tag (should be javascript). Then you have to listen to the submit of the form to prevent it. You listen to a click of an element with the class submit which doesn't exist.