0

私は最近、ユーザーがリストされたアイテムの 1 つを選択し、[カートに追加] をクリックして別のページに移動できるドロップダウン タイプのフォームを作成しました。

これをラジオタイプのフォームに変更して、ドロップダウンタイプではなく、好きなものを選択して「カートに追加」を押すだけにすることはできますか? 私は Google のほぼすべてのページに目を通しましたが、Radio Type のヘルプ セクションは基本的にファイルに情報を書き留めただけです。ファイルに書き込むものは何も必要ありません。基本的に、ユーザーが選択肢を選択して「カートに追加」をクリックすると、別のページにリダイレクトされるだけです。

私の現在のドロップダウンメニューフォームは次のとおりです。

<form> 
   <p align="center"><b>Select a Payment:</b> 
      <select id="setit" style="color: #000" size="1" name="test" onchange="displayValue();"> 
         <option value="/">Select one</option>     
         <option value="/">1 Month: $4.99</option>    
         <option value="/">3 Months: $14.99</option>      
         <option value="/">6 Months: $29.99</option>
      </select> 
      <br /> 
      <div id="displayValue"></div>
      <br />
      <center><input type="button" value="Add to Cart" onclick="window.open(setit.options[setit.selectedIndex].value)"></center>
   </p>
</form>

お時間をいただきありがとうございます！

4

2 に答える 2

0

はい、できます。これを試して：

HTML

    <form>
    <p align="center">
        <b>Select a Payment:</b>
        <input type="radio" id="setit1" name="setit" value="1" /><label for="setit1">1 Month: $4.99</label>
        <input type="radio" id="setit2" name="setit" value="3" /><label for="setit2">3 Months: $14.99</label>
        <input type="radio" id="setit3" name="setit" value="6" /><label for="setit3">6 Months: $29.99</label>
        <br />
        <div id="displayValue"></div>
        <br />
        <center><input type="button" id="button-add-to-cart" value="Add to Cart"></center>
    </p>
</form>

JS

var app = {

    payments: {

        option1: "1 Month: $4.99",
        option3: "3 Months: $14.99",
        option6: "6 Months: $29.99"

    },

    init: function () {

        var button = document.getElementById( 'button-add-to-cart' ),
            radios = document.forms[0].setit,
            i = 0;

        // This handles the button click
        button.onclick = function ( e ) {

            var selected = app.getCheckedRadio( document.forms[0].setit );

            if ( selected ) {
                window.open( '//someurl.com?val=' + selected.value ); // Open window
                return false;
            }

            alert( "No payment selected." ); // Else notify user
        };       

        // This handles the selection change
        for ( ; i < radios.length; i++ ) {
            radios[ i ].onclick = app.radioChange;
        }

    },

    getCheckedRadio: function ( radio_group ) {

        for ( var i = 0; i < radio_group.length; i++ ) {

            var button = radio_group[ i ];

            if ( button.checked ) {
                return button;
            }
        }

        return undefined;
    },

    radioChange: function ( e ) {

        var display = document.getElementById( 'displayValue' ),
            radio = app.getCheckedRadio( document.forms[0].setit ),
            value = radio.value;

        display.innerHTML = app.payments[ "option" + value ];
    }

};

window.load = app.init();
于 2012-10-23T20:57:25.097 に答える
-1

これを試して：

<form name="form1"> 
    <p align="center">
    <b>Select a Payment:</b>
    <input type="radio" name="setit" value="1" /><label for="setit1">1 Month: $4.99</label>
    <input type="radio" name="setit" value="2" /><label for="setit2">3 Months: $14.99</label>
    <input type="radio" name="setit" value="3" /><label for="setit3">6 Months: $29.99</label>
    <br /> 
    <div id="displayValue"></div>
    <br />
    <center><input type="button" value="Add to Cart" onclick="window.open(GetRadioValue())"></center>
    </p>
</form>

チェックされたラジオの値を取得するには、js 関数が必要です。

<script type="text/javascript">
    function GetRadioValue() {
        len = document.form1.setit.length;
        for (i = 0; i <len; i++) {
            if (document.form1.setit[i].checked) {
                return document.form1.setit[i].value;
            }
        }
    }
</script>
于 2012-10-23T21:31:28.993 に答える