1

私は決してJavaScriptプログラマーではないので、誰かがこれで私を助けてくれたらうれしいです. 以下の例のように、同じページにこれらの評価セクションが複数ある場合。

ここで、クリックされたラジオボタンの値を、送信ボタンなしで、できれば更新せずにデータベースに送信する必要があります。

<body>
    <section class="rating">
        <input type="radio" class="radio twenty" name="progress" value="twenty" id="twenty" <?php if($num === 1) { echo 'checked'; } ?>>
        <label for="twenty" class="label">1</label>

        <input type="radio" class="radio fourty" name="progress" value="fourty" id="fourty" <?php if($num === 2) { echo 'checked'; } ?>>
        <label for="fourty" class="label">2</label>

        <input type="radio" class="radio sixty" name="progress" value="sixty" id="sixty" <?php if($num === 3) { echo 'checked'; } ?>>
        <label for="sixty" class="label">3</label>

        <input type="radio" class="radio eighty" name="progress" value="eighty" id="eighty"<?php if($num === 4) { echo 'checked'; } ?>>
        <label for="eighty" class="label">4</label>

        <input type="radio" class="radio onehundred" name="progress" value="onehundred" id="onehundred" <?php if($num === 5) { echo 'checked'; } ?>>
        <label for="onehundred" class="label">5</label>

        <div class="progress">
            <div class="progress-bar"></div>
        </div>
    </section>
</body>

チェック済みのラジオボタンの取得を 1 ～ 5 の評価に対応するように既に設定しているので、現在 testdata を使用して 1 ～ 5 の評価を表示しています。

必ずしもすべての詳細が必要なわけではありません。実行する必要がある手順の概要は、すでに非常に役に立ちます。

4

3 に答える 3

3

これでできるはず

デモ

jQuery インクルードの後に​​ head に追加し、クラスをプログレスバーの id に変更しました

$(function() { // when document has loaded
  $(".radio").on("click",function() { // all radios with class="radio ..." 
    // ajax get or post someserver.php?value=twenty/fourty...
    $.get("someserver.php", {value:this.value},function(data) { 
      // add the returned value to a container
      $("#progress-bar").append("Updated "+ data); 
    });
  });
});
于 2013-04-29T11:09:05.133 に答える
2

これには AJAX を使用できます。Jquery を使用している場合は、要素のクリックを検出して関数呼び出しを開始するクリック ハンドラーを使用できます。関数呼び出しは、AJAX 関数を呼び出してサーバー側コードと対話し、データベースに挿入する値を送信できます。

于 2013-04-29T11:07:12.740 に答える
2
  • 適切なパラメータで ajax リクエストを送信する入力に onclick または onchange アクションを追加します
  • リクエストの受信、データの検証
  • 行の挿入/更新
于 2013-04-29T11:08:05.443 に答える