Joe Joe - 2 months ago 22
HTML Question

Drop down menu Validation on button press w/ Alert

The user should select one of the options in the drop down menu before proceeding with the form. The "next button" should send an alert if no option is selected. Both Yes and No should allow the next button to work. I need a JavaScript for this.

Here is my HTML:



<fieldset>
<h2 class="fs-title">Past History </h2>
<h3 class="fs-subtitle">Please select one of the following</h3>
<div>
<select name="past" id="past">
<option value=""disabled selected>Select One</option>
<option value="a">Yes</option>
<option value="b">No</option>
</select>
</div>
<br>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" id="nextpast" value="Next" />
</fieldset>




Answer Source

This one works fine and won't let the user continue unless they have selected an option

function alertBox() {
    if($("#past option:selected").text() == "Select One"){
    alert("You must select an option!");
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
		<h2 class="fs-title">Past History </h2>
		<h3 class="fs-subtitle">Please select one of the following</h3>
        <div>
<select name="past" id="past">
  <option value=""disabled selected>Select One</option>
  <option value="a">Yes</option>
  <option value="b">No</option>
</select>
         </div>
        <br> 
		<input type="button" name="previous" class="previous action-button" value="Previous" />
		<input type="button" onclick="alertBox()" name="next" id="next" class="next action-button" id="nextpast" value="Next" />
	</fieldset>