Ok so I've managed to do most of what I want to do with this form, but missing one thing from the puzzle. I have a dropdown form which requires you to select a number of different options. However, I have one option, which is what is shown when the page loads "-- select an option --", that disables the submit button when it is selected, but it does not disable it when the page loads, which is the option that is automatically selected, if that makes sense. How do I automatically make the submit button disabled when the page loads?
function selectChanged() {
attacks = document.getElementById("attacks");
if (attacks.value == "not_valid") {
document.getElementById("sbattle").disabled = true;
} else {
document.getElementById("sbattle").disabled = false;
}
}
<form>
<select name="attacks" id="attacks" value="Select" onchange="selectChanged()">
<option value="not_valid">-- select an option --</option>
<option value="example1">example 1</option>
<option value="example2">example 2</option>
<option value="example3">example 3</option>
<option value="example4">example 4</option>
<option value="example5">example 5</option>
</select>
<br>
<input type="button" id="sbattle" onclick="sBattle()" value="Battle">
</form>
Add disabled
to your HTML
<input type="button" id="sbattle" onclick="sBattle()" value="Battle" disabled="disabled">