CODEWITHSUNDEEP
javascriptphpjqueryajax
Tim C
Tim C

Reputation: 5714

ajax incorrect results displayed when sending form data

Ive been learning ajax by working some online tutorials and reading through some stakoverflow posts when I get stuck.

However I've got a very strange problem (which is maybe not strange for a more experienced user) that I just cant figure out. I will be eternally grateful to anyone being able to assist me here.

Im doing the following: Let user search for a match result based on tournament, round number and sport_type

SportType (populates) -> Tournament (populates) -> Round

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

Example

enter image description here

My Problem

When I run the script below on a clean page with no other data it works perfectly. But When I add this code to one of my existing pages the following happens:

When I click submit its like a get request is send to all other forms contained on the page, here is an example of what I mean.

a GET request gets send with all the following: and a completely wrong page is displayed instead of just displaying the result of my query

enter image description here

Again: If I run my code on a page with no other data it works fine but when I incorporate it into another page I get this problem described above

Code to submit 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 advise me what is wrong, if you need any other info let me know

Its probably worth mentioning im running this script inside a fancybox i-frame

Update

The problem is the page I am on gets displayed inside the 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>

Upvotes: 3

Views: 140

Answers (2)

Pratik Joshi
Pratik Joshi

Reputation: 11693

Set action to your Form so that you get desired output thru jQuery code

use <form action="Your_page"...>....</form>

Upvotes: 1

Jim
Jim

Reputation: 22646

Your form doesn't have an action so it will always send a request to the current page. Set the action to the page you wish to submit to.

Upvotes: 1

Related Questions