如何使用ajax提交無線電輸入選擇？

Question

我已創建myform.php模板，使用無線電組輸入類型，值更新爲onchange="javascript:document.post.submit()"';。所以每當我更改我的選擇時，值都會隨着頁面刷新而更新。有沒有什麼辦法可以更新我的選擇而不使用ajax刷新頁面？

 <?php 
      $foods = array('pasta', 'burger', 'pizza','popcorn'); 


      foreach ($foods as $food) { 
      echo '<input name="my_favorite_food" type="radio" onchange="javascript:document.post.submit()"'; 
      $option = 'id=" ' .$food . '"'; 
      $option = 'value="' . $food . '"'; 

      if ($food == $my_favorite_food) $option .= 'checked="checked"'; 
      $option .= '>'; 
      $option .= '<label for=" '.$food .' ">' . $food .' '; 
      $option .= '</label>'; 
      echo $option; 
       } 
     ?> 

     <div id ="block"> 
     <?php 

     if ($my_favorite_food == "pasta") : ?> 

      <h2>your favorite food is pasta</h2> 
      <p> my pasta recipe...... </p> 

     <?php endif;?> 

     if ($my_favorite_food == "burger") : ?> 

      <h2>your favorite food is burger</h2> 
      <p> my burger recipe...... </p> 

     <?php endif;?> 

     if ($my_favorite_food == "pizza") : ?> 

      <h2>your favorite food is pizza</h2> 
      <p> my pizza recipe...... </p> 

     <?php endif;?> 

     if ($my_favorite_food == "popcorn") : ?> 

      <h2>your favorite food is popcorn</h2> 
      <p> my popcorn recipe...... </p> 

     <?php endif;?> 
<div> 

Answer 1

生成所有選項的HTML，並有條件地隱藏（style="display:none"）那些當前沒有選擇。的（產生的）HTML會是這個樣子：

<input type="radio" value="burger" name="favourite_food" class="favourite"/> Burger 
<input type="radio" value="popcorn" name="favourite_food" class="favourite"/> Popcorn 
... 

<div id="burger" class="favourite-display"> 
    <h2>your favorite food is burger</h2> 
    <p> my burger recipe...</p> 
</div> 
... 

然後jQuery的：

$(document).ready(function() { 
    $('.favourite').on('change', function(event) { 
     $('.favourite-display').hide(); 
     $('#' + this.value).show(); 
    }); 
}); 

不應該有必要以實際提交表單（帶或不帶AJAX）每一次只是爲了控制顯示哪個部分。