Changing a Drop Down menu into a Radio type form?

问题:

I recently made a Drop Down type form where a user can select one of the listed items and hit "Add to Cart" where it brings them to another page.

Is it possible to change this into a Radio type form where they can just select which one they would like and hit "Add to Cart" instead of a drop down type? I looked through almost every page on Google and all the Radio Type help sections basically just writes down the information in a file. I don't need anything that writes in a file, just basically redirects to another page when a user selects a choice and hit "Add to cart:

My current Drop Down menu form is:

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

Thank you for your time!

回答1:

Yes, you can. Try this:

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();

回答2:

Try this:

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

You need a js function to get the checked radio's value:

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