0

次のようなコードがあります。

<form action="/test.html" method="get">
    <p><b>Question?</b></p>
    <p><input type="radio" name="answer" value="a">C<Br>
       <input type="radio" name="answer" value="b">B<Br>
       <input type="radio" name="answer" value="c">C</p>

    <div class="btn-group" data-toggle="buttons-checkbox">
    <button type="button" name="bb" value="b1" class="btn btn-primary">Left</button>
    <button type="button" name="bb" value="b2" class="btn btn-primary">Middle</button>
    <button type="button" name="bb" value="b3" class="btn btn-primary">Right</button>
    </div>

    <p><input type="submit"></p>
</form>

get メソッドに送信する方法は? おそらくいくつかの js(jquery) コードを作成する必要がありますが、何も思いつきません。

4

2 に答える 2

1

あなたが抱えている問題は、ボタンの値が送信されていないことです。

以下は、フォームが送信されるときに選択されるボタンの非表示の入力要素を作成します。

<form action="/test.html" id="the-form" method="get">
    <p><b>Question?</b></p>
    <p><input type="radio" name="answer" value="a">C<Br>
       <input type="radio" name="answer" value="b">B<Br>
       <input type="radio" name="answer" value="c">C</p>

    <div class="btn-group" data-toggle="buttons-checkbox">
        <button type="button" name="bb1" value="b1" class="btn btn-primary">Left</button>
        <button type="button" name="bb2" value="b2" class="btn btn-primary">Middle</button>
        <button type="button" name="bb3" value="b3" class="btn btn-primary">Right</button>
    </div>

    <p><input type="submit"></p>
</form>
<script>
    $('#the-form').on('submit', function() {
        $('.btn.active', '#the-form').each(function() {
            var input = document.createElement("input");
            input.setAttribute("type", "hidden");
            input.setAttribute("name", this.name);
            input.setAttribute("value", this.value);
            document.getElementById("the-form").appendChild(input);
        });
    });
</script>

注: これが機能するためには、フォームに ID を指定し、ボタンに一意の名前を付ける必要がありました (buttons-checkboxではなく、 docsbuttons-radioを参照してください)。

動作が必要buttons-groupな場合:

<div class="btn-group" data-toggle="buttons-radio">
    <button type="button" name="bb" value="b1" class="btn btn-primary">Left</button>
    <button type="button" name="bb" value="b2" class="btn btn-primary">Middle</button>
    <button type="button" name="bb" value="b3" class="btn btn-primary">Right</button>
</div>
于 2013-09-04T17:07:10.160 に答える