I am working on a network scripting generator that utilizes HTML and JS. The user inputs values, and the output auto generates/updates with every change to the input values using either the onChange, onKeyUp, or OnClick event triggers to trigger the current form values to run through the JS function.
Any input elements, including text and radio types, work just fine, but to save real estate I'd like to convert a number of the radio lists into dropdown menus using either select or datalist plus option elements. However, doing this conversion seems to break things and the function no longer runs or the output doesn't generate.
I'm guessing there is some fundamental form concept I am missing here. The code snippet here shows a simplified summary of what I'm attempting to do. I've tried variations of including event triggers onSelect, onChange, and onClick in the option tag as well as the select tag, but no joy. Same thing using datalists. Anyone know what I'm doing wrong?
Doesn't Work:
<head>
<script type="text/javascript" src="functions.js"></script>
</head>
<body>
<form name="example">
<div>
<table>
<tr><td>Speed</td></tr>
<tr>
<td>
<select name="speed" onChange="exampleName()">
<option value="5M" >5M</option>
<option value="10M">10M</option>
<option value="15M">15M</option>
</select>
</td>
</tr>
</table>
</div>
</form>
</body>
Works:
<head>
<script type="text/javascript" src="functions.js"></script>
</head>
<body>
<form name="example">
<div>
<table>
<tr><td>Speed</td></tr>
<tr><td><input type="radio" name="speed" value="5M" onClick="exampleName()" checked="" >5M</input></td></tr>
<tr><td><input type="radio" name="speed" value="10M" onClick="exampleName()">10M</input></td></tr>
<tr><td><input type="radio" name="speed" value="15M" onClick="exampleName()">15M</input></td></tr>
</table>
</div>
</form>
</body>
I figured out my issue after going through all the code. It wasn't a naming issue, and it wasn't even really an HTML issue. It was actually the JS which was setup up to parse through radio inputs to find checked fields. This didn't work with select/option because they get "selected" vs "checked" states.