Submitting a form using ajax and php

Question

Hi I have a page that allows the user to view results for a specific tournament and round.

The user selects a sport, then the tournament is filled based on the choice of sport, then the user will select a round that is filled based on the choice of tournament

When everything is done, click the "Submit" button, which will search for results for the result based on the tournament and round selected

My code works fine:

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 the submit button, select results from someTable Where sport='Football' AND... will be requested select results from someTable Where sport='Football' AND...

My problem

I get data from selectboxes 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 that when I click the submit button everything works, but the form reloads, which I don’t want

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

Any ideas / help would be much appreciated

Answer 1

There are several ways to avoid reloading the submit form.

The solution is to process the action of submitting the form and return "false" ( Example here and here ) or prevent the default action ( Example here )

You can also replace input type input for an input type button (or button) and handle the action of the click button instead of processing the form submit action. This would be an easy workaround for most of your problems with the submit form, but it is the worst solution at the semantic and valid code point.

Answer 2

You can submit the form from jQuery as an AJAX request and succeed.

 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 values ​​into Sport: Dropdown

Then dynamically fill 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 the 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>'; } }