JSFiddle - React, Tailwind, and code Playground

by Nathan Woods

HTML

<form action="#" id="baseForm" onsubmit="return test(this)" method="post">
    <fieldset>
		<label for="iniValue">Value</label>
       	<input type="text" id="iniValue" name="iniValue" value="2" />
        <br />
       	<label for="theBase">Base</label>
       	<input type="text" id="theBase" name="theBase" value="2" />
        <br />
       	<label for="theSymbols">Symbols</label>
       	<input type="text" id="theSymbols" name="theSymbols" value="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-._~" />
        <br />
       	<label for="theResult">Result</label>
       	<input type="text" id="theResult" name="theResult" value="2" />
        <br />
        <input type="submit" id="submit" name="submit" value="Submit" />
	</fieldset>
</form>

CSS

form { width: 500px }
form input[type=text] { width: 400px; text-align: right; }
form input[type=submit] { width: 100px; }
form label { width: 50px; display: inline-block; text-align: right; margin-right: 3px; }

JavaScript

// unreserved  = ALPHA / DIGIT / "-" / "." / "_" / "~"

function test() {
    alert('hi');
    return false;
}
/*
// getCakeSizePrice() finds the price based on the size of the cake.
// Here, we need to take user's the selection from radio button selection
function getCakeSizePrice()
{
    var cakeSizePrice=0;
    //Get a reference to the form id="cakeform"
    var theForm = document.forms["cakeform"];
    //Get a reference to the cake the user Chooses name=selectedCake":
    var selectedCake = theForm.elements["selectedcake"];
    //Here since there are 4 radio buttons selectedCake.length = 4
    //We loop through each radio buttons
    for(var i = 0; i < selectedCake.length; i++)
    {
        //if the radio button is checked
        if(selectedCake[i].checked)
        {
            //we set cakeSizePrice to the value of the selected radio button
            //i.e. if the user choose the 8" cake we set it to 25
            //by using the cake_prices array
            //We get the selected Items value
            //For example cake_prices["Round8".value]"
            cakeSizePrice = cake_prices[selectedCake[i].value];
            //If we get a match then we break out of this loop
            //No reason to continue if we get a match
            break;
        }
    }
    //We return the cakeSizePrice
    return cakeSizePrice;
}//*/