submitting form with ajax and php

Question

Hi I have a page that lets a user view results for a certain tournament and round

User will select sport then tournament is populated based on sport selection then user will select round which is populated based on tournament selection

When all is done user press Submit button which will look up the results for the result based on tournament and round selected

My code is working great:

mainPage.php

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

get_sport.php

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

get_round.php

if($_POST['id'])
{
    $id=$_POST['id'];
    $sql="SELECT DISTINCT round FROM events WHERE tournament='$id'";
    $result=mysql_query($sql);
    ?>
    <option selected="selected">Select Round</option><?php
    while($row=mysql_fetch_array($result)){
    ?>
    <option value="<?php echo $row['round'] ?>"><?php echo $row['round'] ?></option>
    <?php

    }
}
?>

EXAMPLE

Sport=>Football; Tournament=>EPL; Round=>5;

Assuming the above is selected when the user clicks submit the code will query select results from someTable Where sport='Football' AND...

My Problem

I get the data from the selectboxes by using a simple php isset() function

if(isset($_POST['submit'])){
    echo $sport=$_POST['sport'];
    echo $tour=$_POST['tournament'];
    echo $round=$_POST['round'];
    :
    :

Now my problem is when submit is clicked everything works BUT the form gets reloaded, which is what I don't want

Im looking for an AJAX equivalent of isset() or a way for the data to be submitted without the form reloading

Any ideas/help will greatly be appreciated

Answer 1

There is a different ways to avoid the reload of a submit form.

A solution would be to handle the submit action of the form and return 'false' ( Example here and here ) or preventing the default action ( Example here )

You can also replace the input type submit for an input type button (or button), and handle the click button action instead of handling the form submit action. This would be an easy workaround to most of your 'form submit' problems, but is a worst solution in the semantic and valid code point of view.

Answer 2

You can do the form submission from JQuery as an AJAX request and do the resulting in the success.

jQuery(document).ready(function(){

    jQuery('#form').submit(function(ev) {

        $.ajax({
            url     : 'url',
            type    : 'POST',
            dataType: 'json',
            data    : $('#form').serialiseArray(),
            success : function( data ) {
               // Populate the result
            }
        });

        ev.preventDefault();
    });
}); 

Answer 3

Initially load all the values in Sport: Dropdown

Then dynamically populate the Tournament and Round

// To Trigger Sport Change
$(".sport").change(function () {

    var selected_sport = $(".sport").val();
    var dataString = 'sport=' + selected_sport;
    var urlAddress = "get_sport.php";
    $.ajax({
        url: urlAddress,
        cache: false,
        method: 'post',
        data: dataString,
        dataType: 'html',
        success: function (result_data) {
            $(".tournament").html(result_data);
            // This will append the tournament drop-down dynamically
        }
    });
});

// To Trigger Tournament Change
$(".tournament").change(function () {

    var selected_sport = $(".sport").val();
    var selected_tournament = $(".tournament").val();

    var dataString = 'sport=' + selected_sport + '&tournament=' + selected_tournament;
    var urlAddress = "get_round.php";
    $.ajax({
        url: urlAddress,
        cache: false,
        method: 'post',
        data: dataString,
        dataType: 'html',
        success: function (result_data) {
            $(".round").html(result_data);
        }
    });
});

In your Corresponding PHP get_round.php

while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)) {
    foreach ($row as $r) {
        $round = $r['round'];
        echo '<option value = "' . $round . '">' . $round . '</option>';
    }
}