Ajax form submission inside modal box

Question

Ok here is a strange little problem:

Here is a test page, which user clicks to open:

When user clicks view results I have 3 selectboxes inside the modal box.

box1 => populates =>Box 2 => populates Box 3

My problem

When user clicks submit, instead of results being displayed from the query based on selectbox selections, the test page opens again inside the modalbox... as you can see in below image

On submit

Any idea why when form is submitted current page opens inside modalbox?

Submit Form

  <script type="text/javascript">
    jQuery(document).click(function(e){
        var self = jQuery(e.target);
        if(self.is("#resultForm input[type=submit], #form-id input[type=button], #form-id button")){
            e.preventDefault();
            var form = self.closest('form'), formdata = form.serialize();
            //add the clicked button to the form data
            if(self.attr('name')){
                formdata += (formdata!=='')? '&':'';
                formdata += self.attr('name') + '=' + ((self.is('button'))? self.html(): self.val());
            }
            jQuery.ajax({
                type: "POST",
                url: form.attr("action"), 
                data: formdata, 
                 success: function(data) { $('#resultForm').append(data); }
            });
        }
    });
    </script>

Populate Textboxes

 <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>


<label>Sport :</label> 
<form method="post" id="resultForm" name="resultForm" action="result.php">
<select name="sport" class="sport">
<option selected="selected">--Select Sport--</option>
<?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

Display result

  if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {

       echo $sport=$_POST['sport'];
        echo $tour=$_POST['tournament'];
        echo $round=$_POST['round'];

        $sql="Select * FROM Multiple_Picks WHERE tournament ='$tour' AND round='$round' GROUP BY member_nr";
        $result = mysql_query($sql);
        ?>
        <?php
        while($row=mysql_fetch_array($result)){
            $memNr = $row['member_nr']; 
            $pick = $row['pick'];
            $score = $row['score'];
            ?>

            echo $memNr;
            echo $pick;
            echo $score;
        }

    }

    ?>

Answer 1

It would appear that:

success: function(data) { $('#resultForm').append(data); } you are telling it to put the ajax response in the resultForm, which appears to be inside your modal. Is that not what is happening. Hard to tell from your question and code what SHOULD be happening vs what IS happening now.