Ajax incorrect results are displayed when submitting form data

I've been learning ajax while working on some online tutorials and looking at some stakoverflow posts when I get stuck.

However, I am having a very strange problem (which might not be strange to a more experienced user) that I simply cannot figure out. I will be infinitely grateful to everyone who can help me here.

What I'm doing is this: allows the user to search for a match result based on tournament, round number and sport_type

SportType (fills in) → Tournament (fills in) → Round

When the user clicks the submit button, the result is displayed based on the selection above

Example

My problem

When I run the script below on a blank page without any other data, it works fine. But when I add this code to one of my existing pages, the following happens:

When I hit submit like a get request is sent to all other forms contained on the page, here's an example of what I mean.

• user clicks sport Type: GOOD

• Custom clicks roundNr: GOOD

• User Clicks Submit Problem

the GET request gets a message with all of the below: and only the wrong page is displayed, not just displaying the result of my request

Again: if I run my code on the page without any other data, it works great, but when I include it in another page, I get this problem described above

Code for submitting a form without reloading

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) {
                console.log(data);
            }
        });
    }
});

      

        
        
        
      

    

PHP below form

  if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
       $sport = $_POST['sport'];
       $round = $_POST['round'];
       $tournament=$_POST['tournament'];

       echo $sport;
       echo $round;
       echo $tournament;

    }

      

        
        
        
      

    

I hope my question makes sense and someone can tell me what is wrong, if you need any other information let me know

It is probably worth mentioning that I am running this script inside an i-frame fancybox

Update

The problem is that the page I'm on is showing inside an iframe ... which is very strange?

HTML CODE

<label>Sport :</label> 
<form method="post" id="resultForm" name="resultForm">
<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>