You should start by having things working even when JavaScript is not available. There are many different situations that result in imperfect JavaScript execution, so assuming no JavaScript at first, gives you more reliable results.
I’ve placed the select box inside of the form, with some temporary options, so that when someone clicks on an option and then presses Enter, the form submits too.
I’ve also removed the inline event attributes as those should not be used, and placed things inside paragraph elements to more appropriately keep them separate.
<form name= "Next_Button_Form" method="post" action="EditRecordPage.php">
<p>
<select class="select" name="selected_item" size="9" id="selected_item" style="width: 290px">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
</select>
</p>
<p>
Choose The Correct Item and Click:
<input type="submit" id="nextbutton" name="nextbutton" value="NEXT">
</p>
</form>
That achieves the base behaviour of the selected option being submitted with the form.
Because the form can be submitted without interaction with the next button, just disabling the next button is not enough for desired behaviour to occur. Because of that, two different things want to be done with JavaScript.
- Prevent form submission until an option is selected
- Disable the next button until an option is selected, to serve as good visual feedback
This is when we now use JavaScript to add on the additional behaviour, of preventing the form from submitting when an option is not selected.
Prevent form submission
To prevent the form submission, we must capture the form being submitted.
const form = document.querySelector("[name=Next_Button_Form]");
form.addEventListener("submit", formSubmitHandler);
We can ensure that the form is not being submitted, by using preventDefault in the formSubmitHandler function.
function formSubmitHandler(evt) {
evt.preventDefault();
}
And the form no longer submits.
Allow form to be submitted
We only want the preventDefault to occur when there’s no selected option, so we can put the preventDefault inside of an if statement.
function formSubmitHandler(evt) {
const form = evt.target;
if (!hasSelectedOption(form)) {
evt.preventDefault();
}
}
The hasSelectedOption function just need to check if the selectedIndex is more than -1.
function hasSelectedOption(select) {
return select.selectedIndex > -1;
}
And now the form only submits when an option is selected.
Disable next button
For added visual feedback, the next button is to be disabled until an option is selected.
First we disable the button:
function disableButton(button) {
button.setAttribute("disabled", "disabled");
}
const next = form.elements.nextbutton;
disableButton(next);
Enable next button
And then we use the select change event, to enable it.
function enableButton(button) {
button.removeAttribute("disabled");
}
function selectChangeHandler(evt) {
const select = evt.target;
const form = select.form;
const next = form.elements.nextbutton;
enableButton(next);
}
const select = form.elements.selected_item;
select.addEventListener("change", selectChangeHandler);
Cleaning up
The code can now be tidied up so that it is in the following order:
- functions
- event handler functions
- variable declarations
- function calls
- event listeners
And we’re left with the following code:
function disableButton(button) {
button.setAttribute("disabled", "disabled");
}
function enableButton(button) {
button.removeAttribute("disabled");
}
function hasSelectedOption(select) {
return select.selectedIndex > -1;
}
function selectChangeHandler(evt) {
const select = evt.target;
const form = select.form;
const next = form.elements.nextbutton;
enableButton(next);
}
function formSubmitHandler(evt) {
const form = evt.target;
if (!hasSelectedOption(form)) {
evt.preventDefault();
}
}
const form = document.querySelector("[name=Next_Button_Form]");
const select = form.elements.selected_item;
const next = form.elements.nextbutton;
disableButton(next);
select.addEventListener("change", selectChangeHandler);
form.addEventListener("submit", formSubmitHandler);
Doing things in this way tends to be more reliable, because each section has only one responsibility, and it’s easy to reliably make changes to meet different future changes that may need to occur.
An example of the code can be found at https://jsfiddle.net/pmw57/5j2qw1n4/