JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<form id="form" action="register.php" name="tripleplay" method="post">
                            <div style='margin-top: 10px;'></div>
                            <input placeholder="First Name" class="form" type="text" name="fname" size="33"><div id='spacing'></div>
                            <div id="newsline"></div><input placeholder="Last Name" class="form" type="text" name="lname" size="33" /><div id='spacing'></div>
                            <div id="newsline"></div><input placeholder="Email Address" class="form" type="text" name="email" size="33" /><div id='spacing'></div>
                            <div id="newsline"></div><input placeholder="Password" class="form" type="password" name="password" size="33" /><div id='spacing'></div>
                            <div id="newsline"></div><input placeholder="Repeat Password" class="form" type="password" name="repeat" size="33" /><div id='spacing'></div>
                            <div id="newsline"></div><input placeholder="Mobile Number" class="form" type="text" name="number" size="33" ><div id='spacing'></div>
                            <div style='margin-top: 10px;'></div>
                            <select style="width: 195px" name='List1' onchange="fillSelect(this.value,this.form['List2'])" >
                            <option value=''selected>Choose Region</option>
                            </select><div id="newsline"></div>
                            <div style='margin-top: 10px;'></div><select style="width: 195px" name='List2' onchange="fillSelect(this.value,this.form['List3'])">
                            <option value=''selected>Choose Club</option>
                            </select><div id="newsline"></div>
                            <div style='margin-top: 10px;'></div><select style="width: 195px" name='List3' nchange="getValue(this.value, this.form['List2'].value, this.form['List1'].value)">
                            <option value='' selected>Choose Team</option>
             ...

JavaScript

/*
Triple Combo Script Credit
By Philip M: http://www.codingforums.com/member.php?u=186
Visit http://javascriptkit.com for this and over 400+ other scripts
*/

var categories = [];
categories["startList"] = ["Taranaki","Auckland"]
// Regions + Clubs
categories["Taranaki"] = ["NPOB","Tukapa","Coastal","Clifton","Inglewood","Hawera","Stratford"];
categories["Auckland"] = ["Marist","Takapuna"];
// Clubs + Teams within that Club
categories["NPOB"] = ["Senior As","Senior Bs","Colts U21s"];
categories["Tukapa"] = ["Senior As","Senior Bs","Colts U21s"];
categories["Coastal"] = ["Senior As","Senior Bs","Colts U21s"];
categories["Clifton"] = ["Senior As","Senior Bs","Colts U21s"];
categories["Inglewood"] = ["Senior As","Senior Bs","Colts U21s"];
categories["Stratford"] = ["Senior As","Senior Bs","Colts U21s"];
categories["Hawera"] = ["Senior As","Senior Bs","Colts U21s"];
categories["Marist"] = ["Senior As","Senior Bs","Colts U21s"];
categories["Takapuna"] = ["Senior As","Senior Bs","Colts U21s"];

var nLists = 3; // number of select lists in the set

function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms['tripleplay']['List'+i].length = 1;
document.forms['tripleplay']['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option'); 
var nData = document.createTextNode(nCat[each]); 
nOption.setAttribute('value',nCat[each]); 
nOption.appendChild(nData); 
currList.appendChild(nOption); 
} 
}

// function getValue(L3, L2, L1) {
// alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3);
// }

function init() {
fillSelect('startList',document.forms['tripleplay']['List1'])
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);