CODEWITHSUNDEEP
javascriptjqueryhtml
Albert
Albert

Reputation: 11

how do I alert user when they didn't select an option on a drop-down menu

I made a drop-down menu for user to select,for the date, it looks like this

enter image description here

How do I the alert user that they didn't select a date? The month, day and year are options in the <select> element

if(document.forms[0].checkindate.selectedIndex == 1) {
    window.alert("You must select a date.");
    return false;
}

I did this, but it doesn't work.

Upvotes: 1

Views: 878

Answers (3)

Sampad
Sampad

Reputation: 1793

<html>
<head>
<title>Form</title>
<script type="text/javascript">
function validate()
{

   if(document.getElementById("city").value=="-1")
    {
        alert('Please select a city');
        return false;
    }
    else if (document.getElementById('day').value=='')
    {
    alert('Please provide date for D.O.B');
    document.getElementById("day").style.borderColor="red";
    document.getElementById("day").style.backgroundColor="yellow";
    document.getElementById("day").style.borderWidth=2;
    return false;
    }
else if (document.getElementById('month').value=='')
    {
    alert('Please provide month for D.O.B');
    document.getElementById("month").style.borderColor="red";
    document.getElementById("month").style.backgroundColor="yellow";
    document.getElementById("month").style.borderWidth=2;
    return false;
    }
else if (document.getElementById('year').value=='')
{
    alert('Please provide year for D.O.B');
    document.getElementById("year").style.borderColor="red";
    document.getElementById("year").style.backgroundColor="yellow";
    document.getElementById("year").style.borderWidth=2;
    return false;
}
}
</script>
<body>
<form >
  City : <select id="city">
          <option value="-1">-~Select One~-</option>
          <option>City 1</option>
          <option>City 2</option>
          <option>City 3</option>
          <option>City 4</option>
          <option>City 5</option>
    </select>
    <br>

      Date of Birth:
Day
<input type="number" name="day" id='day' min="1" max="31" value="" required>
Month
<input type="number" name="month" min="1" id='month' max="12" value="" required>
Year
<input type="number" name="year" min="1950" id='year' max="2020" value="" required>


         <input type="submit" value="Login" onclick="return(validate());"
</form>
</body>
</html>

Refer to the above given example to have a clear view. Hope you will understand.

Upvotes: 1

Romy Mathews
Romy Mathews

Reputation: 827

You can use the .each() function to check if any of the dropdowns are not selected by the user. 

$('select').each(function () { 
   if (this.value) 
      alert('value selected'); 
   else 
      alert('no selection'); 
});

Upvotes: 0

Mani
Mani

Reputation: 2655

Give select values are empty and validate by using html required like

<select required>
   <option value="">Month</option>
   <option vslue="1">1</option>
</select>
<select required>
   <option value="">Day</option>
   <option vslue="1">1</option>
</select>
<select required>
   <option value="">Year</option>
   <option vslue="2016">2016</option>
</select>

Or use Javascript or jQuery Validation

Upvotes: 1

Related Questions