We Keep Coding

Validate select dropdown with javascript

I'm having trouble with validating my dropdown list with javascript. What I want is to display an error message underneath the field inside span tags if the user hasn't selected any options. I've checked almost every tutorials out there but no luck.
Here is the code for the form:
<form name="subform" id="subform" action="submit.php" onsubmit="return checkForBlank()" method="POST" enctype="multipart/form-data">
<div class="md-form">
<input type="text" id="subcim" name="subcim" class="form-control"><span class="error_form" id="subcim_error_message"></span>
<label for="subcim" class="">Title</label><br>
</div>
<div class="md-form">
<select class="mdb-select" id="subcat" name="subcat"><span class="error_form" id="subcat_error_message"></span>
<option value="0" selected>Please select an option</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<label id="subcat_info">Category</label><br>
</div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>
</form>
and here is the Javascript code (the first if statement validates the input field in the form:
function checkForBlank() {
if(document.getElementById("subcim").value == "") {
document.getElementById("subcim_error_message").textContent="You must add a title!";
return false;
} else if(document.getElementById("subcim").value.length < 5 || document.getElementById("subcim").value.length > 80) {
document.getElementById("subcim_error_message").textContent="The title must be between 5 and 80 characters!";
return false;
}
var result = document.getElementById('subcat').value;
if (result === "0") {
document.getElementById("subcat_error_message").textContent="You must select an option!";
return false;
}
}
I'm using
onsubmit="return checkForBlank()"
inside the form tag.
When I submit the form without selecting an option, the form seems to be submitted properly, but it does not display the error message.
Any help is appreciated

function Validate() {
var subcat= document.getElementById("subcat");
if (subcat.value == "") {
//If the "Please Select" option is selected display error.
alert("Please select an option!");
return false;
}
return true;
}
onsubmit ="return Validate()"

function Validate() {
var subcat= document.getElementById("subcat");
if (subcat.value == "0") {
//If the "Please Select" option is selected display error.
alert("Please select an option!");
return false;
}
return true;
}
onsubmit ="return Validate();"

Change your syntex from
<div class="md-form">
<select class="mdb-select" id="subcat" name="subcat"><span class="error_form" id="subcat_error_message"></span>
<option value="0" selected>Please select an option</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<label id="subcat_info">Category</label><br>
</div>
To syntex as below
<div class="md-form">
<select class="mdb-select" id="subcat" name="subcat">
<option value="0" selected>Please select an option</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<span class="error_form" id="subcat_error_message"></span>
<label id="subcat_info">Category</label><br>
</div>
The only mistake that you are doing is putting your error span within your select tag it self which is not a predefined HTML format for select tag. As you can see that after putting your span tag out side your select tag every thing will work as you want.

Html
<div class="md-form">
<select class="mdb-select" id="subcat" name="subcat">
<option value="0" selected>Please select an option</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<span class="error_form" id="subcat_error_message"></span>
<label id="subcat_info">Category</label><br>
</div>
JavaScript
function Validate() {
var subcat= document.getElementById("subcat");
if (subcat.value == "0") {
//If the "Please Select" option is selected display error.
document.getElementById("subcat_error_message").innerHTML="Error Message";
//OR
document.getElementById("subcat_error_message").textContent="Error Message";
return false;
}
return true;
}
onsubmit ="return Validate();"

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
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.

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

<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.

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');
});

Redirect to a page according to selected option from radio button through 'onclick' , without 'submit' the form in php

This is the code which is not working according to my requirement
<head>
<script type="text/javascript">
function test(){
if(document.form.choice.value='pc'){
window.open('pc.php','_self');
return true;
}
else if(document.form.choice.value='ps2'){
window.open('ps2.php','_self');
return true;
}
else if(document.form.choice.value='ps3'){
window.open('ps3.php','_self');
return true;
}
else if(document.form.choice.value='psp'){
window.open('psp.php','_self');
return true;
}
}
</script>
</head>
<body>
Games<br /><br />
<form name="form">ALL
<input type="radio" onClick="test()" name="choice" value="pc">PC
<input type="radio" onClick="test()" name="choice" value="ps2">PS2
<input type="radio" onClick="test()" name="choice" value="ps3">PS3
<input type="radio" onClick="test()" name="choice" value="psp">PSP
</form>
</body>
Also i want to know that how to display the field automatically just by selecting the selected field in Drop down list without 'submit'
<select name="genre">
<option value="">--Select Genre and Click Go--</option>
<option value="All">All</option>
<option value="Action / Mission">Action / Mission</option>
<option value="Arcade">Arcade</option>
<option value="Racing">Racing</option>
<option value="Sports">Sports</option>
<option value="Kids">Kids</option>
<option value="Strategy">Strategy</option>
<option value="Adventure">Adventure</option>
</select>

Try this...
EDITED:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script type="text/javascript">
function idForm(){
var selectvalue = $('input[name=choice]:checked', '#idForm').val();
if(selectvalue == "pc"){
window.open('http://www.google.com','_self');
return true;
}
else if(selectvalue == "ps2"){
window.open('http://www.google.com','_self');
return true;
}else if(selectvalue == 'ps3'){
window.open('http://www.google.com','_self');
return true;
}else if(selectvalue == 'psp'){
window.open('http://www.google.com','_self');
return true;
}
return false;
};
</script>
</head>
<body>
Games<br /><br />
<form id="idForm">ALL
<input type="radio" onclick="idForm()" name="choice" value="pc"/>PC
<input type="radio" onclick="idForm()" name="choice" value="ps2"/>PS2
<input type="radio" onclick="idForm()" name="choice" value="ps3"/>PS3
<input type="radio" onclick="idForm()" name="choice" value="psp"/>PSP
</form>
</body>
Jsfiddle
link

You can get the value of the option by adding onchange event in the <select> tag.
<select name="genre" onchange="selectOption()">
<option value="">--Select Genre and Click Go--</option>
<option value="All">All</option>
<option value="Action / Mission">Action / Mission</option>
<option value="Arcade">Arcade</option>
<option value="Racing">Racing</option>
<option value="Sports">Sports</option>
<option value="Kids">Kids</option>
<option value="Strategy">Strategy</option>
<option value="Adventure">Adventure</option>
</select>
In your script add this
function selectOption(){
//each option value
var option=document.form.genre.value;
alert(option);
}
For redirecting you can use window.location in your test() method
use this window.location=yourpage.php instead of this window.open('pc.php','_self')

validation for select option not working

I doing a form for a small project, and having a trouble trying to validate the select option
hope someone can help
THanks in advance
HTML:
<form method="post" name="vehicleform" action=" " onSubmit="return (validateForm())">
First Name: <input type="text" name="fname"><br>
Last Name: <input type="text" name="lname"><br>
Phone Number <font size="1px">(ex. 123-456-7890)</font>: <input type="text" name="phonenumber"><br>
Location
<select name="location">
<option value="-1">Select one..</option>
<option value="lota">Lot A</option>
<option value="lotb">Lot B</option>
<option value="lotc">Lot C</option>
</select><br>
JS:
function validateForm(){
var d = document.forms['vehicleform']['location'].value;
if( document.vehicleform.location.value == "-1" )
{
alert("Please select your location");
return false;
}
}

There is no need for grouping in the listener, and passing this gives immediate access to the form:
<form ... onsubmit="return validateForm(this)">
You only need to check the selected index to see if something other than the first option (or no option all) is selected:
function validateForm(form) {
if (form.location.selectedIndex < 1) {
alert("Please select your location");
return false;
}
}
And as suggested in the comments, make the first option selected by default:
<select name="location">
<option value="-1" selected>Select one..
<option value="lota">Lot A
as browsers may not make any option selected by default and users won't see "Select one...". That should be a label anyway to assist with accessiblity.

http://jsfiddle.net/LVBSZ/1/
You have no submit button in your code and close tag for form. The other works for me
<script>
function validateForm() {
if (document.forms['vehicleform'].location.value == "-1") {
alert("Please select your location");
return false;
}
}
</script>
<form method="post" name="vehicleform" onSubmit="return validateForm()">
First Name:
<input type="text" name="fname">
<br>Last Name:
<input type="text" name="lname">
<br>Phone Number <font size="1px">(ex. 123-456-7890)</font>:
<input type="text" name="phonenumber">
<br>Location
<select name="location">
<option value="-1">Select one..</option>
<option value="lota">Lot A</option>
<option value="lotb">Lot B</option>
<option value="lotc">Lot C</option>
</select>
<br>
<input type="submit" value="Submit">
</form>

Change Form "action" on selection

I am still learning javascript and need some help changing form "action" based selected option value. Please see html code below:
<form method="post" title="myForm" id="myForm" name="myForm" action="test_auth.php">
<fieldset>
<legend>Request Details</legend>
<p><label>Brand: </label>
<select id="Brand" name="Brand">
<option value"">Select...</option>
<option value="brand">Brand 1</option>
<option value="brand">Brand 2</option>
<option value="brand">Brand 3</option>
<option value="brand">Brand 4</option>
<option value="brand">Brand 5</option>
</select>
</p>
<br />
<p class="submit"><input class="button" name="Submit" type="submit" value="Submit" onclick="actionDetermine();" /></p>
So basically when option "Brand 1" is selected, I want to change the form "action" to test.php. I have written some javascript, see below, but the forms errors on submitting when "Brand 1" is submitted
function actionDetermine() {
var thisform = document.myForm;
if (thisform.elements["brand"] [1].selectedIndex) {
thisform.action ="test.php";
} else if (thisform.elements["brand"] [2].selectedIndex) {
thisform.action="test_auth.php";
} else if (thisform.elements["brand"] [3].selectedIndex) {
thisform.action="test_auth.php";
} else if (thisform.elements["brand"] [4].selectedIndex) {
thisform.action="test_auth.php";
} else if (thisform.elements["brand"] [5].selectedIndex) {
thisform.action="test_auth.php";
} else if (thisform.elements["brand"] [0].selectedIndex) {
thisform.action="test_auth.php";
}
return true;
};
Obviously there is something wrong with the above, can anyone help me out?
Cheers!

You could also have the actions defined in a dataset:
<form method="post" title="myForm" id="myForm" name="myForm" onsubmit="submit_function(this)" action="test_auth.php">
<fieldset>
<legend>Request Details</legend>
<label>Brand: </label>
<select id="Brand" name="Brand">
<option value"">Select...</option>
<option value="brand 1" data-action="test.php">Brand 1</option>
<option value="brand 2">Brand 2</option>
<option value="brand 3">Brand 3</option>
<option value="brand 4">Brand 4</option>
<option value="brand 5">Brand 5</option>
</select>
<button class="button" name="Submit" value="Submit">Submit</button>
</fieldset>
</form>
In your javascript code, you could have:
function submit_function(form) {
var selected = document.getElementById('Brand');
var dataset = selected[selected.selectedIndex].dataset;
if (dataset.action) {
form.action = dataset.action;
}
return true;
};

I would swap the
<input class="button" name="Submit" type="submit" value="Submit" onclick="actionDetermine();" />
to
<input class="button" type="button" value="Submit" onclick="actionDetermine();" />
And then I would make the <select> tags <options> have the values of 1, 2, 3, 4. Then do the following with your code.
var actions = ['brand1_process.php', 'brand2_process.php', 'brand3_process.php', 'brand4_process.php'];
//actions correspond to the values of the selector
var brand = document.getElementById('Brand').value;
brand = brand-1;
document.getElementById('myForm').setAttribute('action', actions[brand]);
document.getElementById('myForm').submit();
I'm pretty sure that's what you need to do though I haven't messed around with forms in a long time.