将下拉菜单更改为无线电类型表单？ [英] Changing a Drop Down menu into a Radio type form?

问题描述

我最近制作了一个下拉式表单，用户可以选择其中一个列出的项目，然后点击添加到购物车，然后将它们带到另一个页面。

是否有可能将其更改为Radio类型表单，他们可以选择他们想要的内容并点击添加到购物车而不是下拉类型？我浏览了Google上几乎所有的页面，所有的Radio Type帮助部分基本上只是将信息写入文件。我不需要任何写入文件的东西，只是基本上重定向到另一个页面，当用户选择一个选择，并点击添加到购物车：

我目前的下拉菜单形式是：

 < form> 
< p align =center>< b>选择付款方式：< / b> 
< select id =setitstyle =color：＃000size =1name =testonchange =displayValue（）;> 
< option value =/>选择一个< / option> 
<选项值=/> 1个月：$ 4.99< / option> 
<选项值=/> 3个月：$ 14.99< / option> 
< option value =/> 6个月：$ 29.99< / option> 
< / select> $ b $ < b> 
< div id =displayValue>< / div> 
< br /> 
< center>< input type =按钮value =添加到购物车onclick =window.open（setit.options [setit.selectedIndex] .value）>< / center> 
< / p> 
< / form> 
  

感谢您的宝贵时间！

解决方案

是的，你可以。试试这个：

HTML

 < form> 
< p align =center> 
< b>选择付款方式：< / b> 
< input type =radioid =setit1name =setitvalue =1/>< label for =setit1> 1 Month：$ 4.99< / label> 
< input type =radioid =setit2name =setitvalue =3/>< label for =setit2> 3个月：$ 14.99< / label> 
< input type =radioid =setit3name =setitvalue =6/>< label for =setit3> 6个月：$ 29.99< / label> 
< br /> 
< div id =displayValue>< / div> 
< br /> 
< center>< input type =buttonid =button-add-to-cartvalue =Add to Cart>< / center> 
< / p> 
< / form> 
  

JS

  var app = {
 
 payments：{
 
 option1：1 Month：$ 4.99，
 option3：3 Months：$ 14.99，
 option6：6个月：$ 29.99
 
}，
 
 init：function（）{
 
 var button = document.getElementById（ 'button-add-to-cart'），
 radios = document.forms [0] .setit，
i = 0; 
 
 //处理按钮点击
 button.onclick = function（e）{
 
 var selected = app.getCheckedRadio（document.forms [0]。 setit）; 
 
 if（selected）{
 window.open（'//someurl.com?val='+ selected.value）; //打开窗口
返回false; 
} 
 
 alert（没有选择付款）; // Else通知用户
}; 
 
 //这处理选择更改
（（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（）; 
  

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!

解决方案

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

这篇关于将下拉菜单更改为无线电类型表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！