CODEWITHSUNDEEP
javascriptjqueryajaxtwitter-bootstrap
Tim C
Tim C

Reputation: 5714

ajax stop bootstrap modal box from closing when user clicks submit

This is a bit of a tricky problem to explain but here goes:

I would like to display results inside a bootstrap modalbox, doing the following:

enter image description here

  1. Selectbox1-->populates-->SelectBox2-->populates-->Selectbox3
  2. Get values from selectboxes when user clicks submit
  3. Query database with selectbox values
  4. Display result in modal box

My problem

Everything is working however when user clicks submit the modalbox closes, when I open the modalbox again the result is inside the modalbox

HOW CAN I GET THE MODALBOX TO NOT CLOSE WHEN USER CLICKS SUBMIT? 

  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
      <script type="text/javascript">
$("form").on("submit", function(e) {
  var formData = $(this).serialize();
  e.preventDefault();
  $.ajax({
    url: 'functionTest.php',
    data: formData,
    type: 'post',
    success: function(data) {
        $('#resultForm').replaceWith(data);

    }

  });
});

</script>
<script type="text/javascript">
$(document).ready(function()
{
 $(".sport").change(function()
 {
  var id=$(this).val();
  var dataString = 'id='+ id;

  $.ajax
  ({
   type: "POST",
   url: "get_sport.php",
   dataType : 'html',
   data: dataString,
   cache: false,
   success: function(html)
   {
      $(".tournament").html(html);
   } 
   });
  });


 $(".tournament").change(function()
 {
  var id=$(this).val();
  var dataString = 'id='+ id;

  $.ajax
  ({
   type: "POST",
   url: "get_round.php",
   data: dataString,
   cache: false,
   success: function(html)
   {
    $(".round").html(html);
   } 
   });
  });

});
</script>

</head>

<body>

         <center>
<div>
<label>Sport :</label> 
<form method="post" id="resultForm" name="resultForm">
<select name="sport" class="sport">
<option selected="selected">--Select Sport--</option>
<?php
    include('connect.php');
 $sql="SELECT distinct sport_type FROM events";
 $result=mysql_query($sql);
 while($row=mysql_fetch_array($result))
 {
  ?>
        <option value="<?php echo $row['sport_type']; ?>"><?php echo $row['sport_type']; ?></option>
        <?php
 } 
?>
</select>

<label>Tournamet :</label> <select name="tournament" class="tournament">
<option selected="selected">--Select Tournament--</option>
</select>


<label>Round :</label> <select name="round" class="round">
<option selected="selected">--Select Round--</option>
</select>
<input type="submit" value="View Picks" name="submit" />
</form>


<?php
if(isset($_POST['submit'])){
echo  $tour = $_POST['tournament'];
 echo $round = $_POST['round'];
    }

Upvotes: 5

Views: 1911

Answers (3)

Driver
Driver

Reputation: 548

I haven't tested your solution, but try putting e.stopPropagation(); before e.preventDefault();

UPDATE

Why is your Modal in the <head> part ?

Upvotes: 1

Vaibhav Sah
Vaibhav Sah

Reputation: 142

Try to remove the class close from the button

Upvotes: 1

rozerocool
rozerocool

Reputation: 170

It seems that you're missing a "return false;" in your form submit event handler:

$("form").on("submit", function(e) {
  var formData = $(this).serialize();
  e.preventDefault();
  $.ajax({
    url: 'functionTest.php',
    data: formData,
    type: 'post',
    success: function(data) {
        $('#resultForm').replaceWith(data);

    }

  });
  //Return false to cancel submit
  return false;
});

Upvotes: 2

Related Questions