представления формы с помощью AJAX и PHP

Question

Привет У меня есть страница, которая позволяет конкретные результаты пользователю просматривать на определенный турнир и круглые

пользователь будет выбирать спорт, то турнир заполняется на основе выбора спорта, то пользователь будет выбрать тур, который заполняется на основе отборочного турнира

Когда все сделано пользователь нажимает кнопку, которая будет искать результаты для результата на основе турнира и круглый выбранную Отправить

M у код работает прекрасно:

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 

    } 
} 
?> 

ПРИМЕР

Спорт => Футбол; Турнир => EPL; Круглый => 5;

Учитывая вышеизложенное, выбирается, когда пользователь нажимает кнопку отправить код будет запрашивать select results from someTable Where sport='Football' AND...

Моя проблема

Я получаю данные из selectboxes с помощью простого PHP isset() функцию

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

Теперь моя проблема в том, когда отправить нажата, все работает, но форма получает r eloaded, что это то, что я не хочу

Im ищет эквивалент AJAX в Исеть() или способ для данных, которые будут представлены без формы перегрузочного

идеи/помощь будет в значительной степени будет оценивается

Answer 1

Существует несколько способов избежать перезагрузки формы отправки.

Раствор будет обрабатывать представить действие формы и возвращать «ложь» (Example here и here) или предотвращение действия по умолчанию (Example here)

Вы также можете заменить тип входного представить для типа входного (или кнопку) и обработайте действие кнопки клика вместо обработки действия отправки формы. Это было бы легким обходным решением для большинства ваших проблем с формой отправки, но это худшее решение в семантической и действительной кодовой точке.

Answer 2

Вы можете подать заявку от JQuery в качестве запроса AJAX и добиться успеха.

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

Первоначально загрузить все значения в Sport: раскрывающийся

Затем динамически заполнить Tournament и 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); 
     } 
    }); 
}); 

В вашем Соответствующим 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>'; 
    } 
}