-1

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

1 に答える 1

2

すべてのオプションの 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 の有無にかかわらず) フォームを実際に送信する必要はありません。

于 2013-03-25T11:20:20.930 に答える