JSFiddle - React, Tailwind, and code Playground

by kboucher

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>

JavaScript

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