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();"
Related
I have two dropdown lists and I want for example, if value=fetch selected then show second dropdown but it doesn't work.
I have tried with call external PHP file but I was stuck again.
I think that the problem is when I call the on change method but I don't know what to type.
function action(dropdown) {
var value = dropdown.options[dropdown.selectedIndex].value;
if (value == 'Fetch'){
document.getElementById("student_list").style.display = "block";
document.getElementById("subject_list").style.display = "none";
}
if(value == 'Count'){
document.getElementById("student_list").style.display = "block";
}
if(value == 'Percentage'){
document.getElementById("subject_list").style.display = "block";
}
}
<body>
<div class="main_container">
<form method="post">
<select name="action" id ="fetch" onchange="action(this.value);">
<option value="" id="action">--Select Action--</option>
<option value="Fetch">Fetch</option>
<option value="Count">Count</option>
<option value="Percentage">Percentage</option>
</select>
<select name="student_name" id ="student_list" onChange="" style="display:none;"> <!--onchange="getNext(this.value);" -->
<option value="">--Select Action --</option>
<option value="All">All Students</option>
<option value="NameS">Student Name</option>
</select>
</form>
</div>
You cannot use a function named "action" please see https://stackoverflow.com/a/37590405/5391965
You should retrieve your values within the function instead of passing it in parameters like so :
function displayStudentList(dropdown) {
let subject = document.getElementById("subject_list").value;
if (subject === 'Fetch') {
document.getElementById("student_list").style.display = "block";
document.getElementById("subject_list").style.display = "none";
}
if (subject === 'Count') {
document.getElementById("student_list").style.display = "block";
}
if (subject === 'Percentage') {
document.getElementById("subject_list").style.display = "block";
}
}
<div class="main_container">
<form method="post">
<select name="action" id="subject_list" onchange="displayStudentList()">
<option value="" id="action">--Select Action--</option>
<option value="Fetch">Fetch</option>
<option value="Count">Count</option>
<option value="Percentage">Percentage</option>
</select>
<select name="student_name" id ="student_list" onChange="" style="display:none;">
<!--onchange="getNext(this.value);" -->
<option value="">--Select Action --</option>
<option value="All">All Students</option>
<option value="NameS">Student Name</option>
</select>
</form>
</div>
First question here so please go easy on me ! Trying to get this form select working but after hours still struggling. Code works fine when just one option has an id, but will not work with multiple id's. Have a feeling the right approach would be to assign each select option with a class but still can't figure it out.
Any assistance would be gratefully appreciated !
<form>
<p align="center">Size :
<input type="hidden" value="1" name="qty1" />
<select name="productpr1" id="getFname" onchange="showdiv(this);">
<option selected value="ERROR - Please select finish">please select</option>
<option id="show" value="product 1:5:0:105805">product 1</option>
<option id="" value="product 2:10:0:105205">product 2</option>
<option id="show" value="product 3:15:0:105605">product 3</option>
</select>
</p>
<div id="admDivCheck" style="display:none;text-align:center;">Choose delivery date</div>
<p><input type="submit" class="button" value="ADD TO BASKET" /></p>
</form>
<script>
function showdiv(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
admOptionValue = document.getElementById("show").value;
if(admOptionValue == nameSelect.value){
document.getElementById("admDivCheck").style.display = "block";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
</script>
Edit
Thanks for the assistance on here - the final version which works as I need :
<input type="hidden" value="1" name="qty1" />
<select name="productpr1" id="getFname" onchange="showdiv();">
<option selected value="ERROR - Please select finish">please select</option>
<option class="show" value="product 1:5:0:105805">product 1</option>
<option class="" value="product 2:10:0:105205">product 2</option>
<option class="show" value="product 3:15:0:105605">product 3</option>
</select>
<div id="admDivCheck" style="display:none">Choose delivery date</div>
<p><input type="submit" class="button" value="ADD TO BASKET" /></p>
<script>
function showdiv() {
var getFname= document.getElementById("getFname");
var askForDelivery = getFname.options[getFname.selectedIndex].classList;
if(askForDelivery.contains('show')){
document.getElementById('admDivCheck').style.display = 'block';
}
else{document.getElementById('admDivCheck').style.display = 'none';
}}
</script>
the id property is for the object document model and should be unique, just use 1,2,3 for it
In your script admOptionValue == nameSelect.value This value checking will always same, because selected option only the value of select tag.....
function showdiv(nameSelect)
{
console.log('choosed option',nameSelect.value);
if(nameSelect.value !="") document.getElementById("admDivCheck").style.display = "block";
else document.getElementById("admDivCheck").style.display = "none";
}
<form>
<p align="center">Size :
<input type="hidden" value="1" name="qty1" />
<select name="productpr1" id="getFname" onchange="showdiv(this);">
<option selected value="">please select</option>
<option value="product 1:5:0:105805">product 1</option>
<option value="product 2:10:0:105205">product 2</option>
<option value="product 3:15:0:105605">product 3</option>
</select>
</p>
<div id="admDivCheck" style="display:none;text-align:center;">Choose delivery date</div>
<p><input type="submit" class="button" value="ADD TO BASKET" /></p>
</form>
The reason that it is not working when having multiple id's is this line here:
admOptionValue = document.getElementById("show").value;
That is always going to return the first element with id show.
You should be able to get the selected value like this:
function showdiv() {
var getFname= document.getElementById("getFname");
var selectedValue = getFname.options[getFname.selectedIndex].value;
alert(selectedValue);
}
<select name="productpr1" id="getFname" onchange="showdiv();">
<option selected value="ERROR - Please select finish">please select</option>
<option value="product 1:5:0:105805">product 1</option>
<option value="product 2:10:0:105205">product 2</option>
<option value="product 3:15:0:105605">product 3</option>
</select>
So All I did was get the selectedIndex of the select box, rather than getting the individual option by id. All the options should have a unique id, and trying to get all of them would be a huge waste of time
EDIT
As mentioned earlier, you wanted to add a class to a specific item to determine if it should show or hide another div.
All you would do is check for classList instead of value to determine if it is true.
All you would have to do is get the classList of the selected item. If it contains the desired class, show your hidden div.
function showdiv() {
var getFname= document.getElementById("getFname");
var askForDelivery = getFname.options[getFname.selectedIndex].classList;
if(askForDelivery.contains('show')){
document.getElementById('admDivCheck').style.display = 'block';
}
}
I made a fiddle to demonstrate:
https://jsfiddle.net/k68nuams/
I have a select option list for my form and I want to make sure the user has selected one of the options. My function logic implies that if the user keeps the dropdown on the default option, an alert will pop up prompting them to change it. However, no alert shows up whatsoever. What am I doing wrong?
function isOption(form) {
var type = form.getElementByID("pastimetype")
var selectedValue = type.options[type.selectedIndex].value;
if (selectedValue == "selectpastime") {
alert("Please select a pastime.")
return false
}
return true
}
<p><label for="pastime"> Favourite pastime: </label>
<select name="pastime" select id="pastimetype">
<option value="selectpastime">---Please choose an option---</option>
<option value="surfingtheweb">Surfing the Web</option>
<option value="playingsport">Playing Sport</option>
<option value="listeningtomusic">Listening to Music</option>
<option value="watchingtv">Watching TV</option>
<option value="playinggames">Playing Games</option>
<option value="communityservice">Community Service</option>
<option value="daydreaming">Daydreaming</option>
<option value="reading">Reading</option>
<option value="meditation">Meditation</option>
</select>
</p>
you need to add the function to the submit event of the form.
you misspelled getElementById
no need to use form.getElementById
easier to get the value using select.value
use preventDefault instead of returning true/false
Also
function isOption(e) {
var sel = document.getElementById("pastimetype");
var selectedValue = sel.value;
if (selectedValue == "") { // I removed the value from the "Please select"
alert("Please select a pastime.")
e.preventDefault(); // stop submission
}
}
window.addEventListener("load",function() {
document.getElementById("form1").addEventListener("submit",isOption)
})
<form id="form1">
<p><label for="pastime"> Favourite pastime: </label>
<select name="pastime" select id="pastimetype">
<option value="">---Please choose an option---</option>
<option value="surfingtheweb">Surfing the Web</option>
<option value="playingsport">Playing Sport</option>
<option value="listeningtomusic">Listening to Music</option>
<option value="watchingtv">Watching TV</option>
<option value="playinggames">Playing Games</option>
<option value="communityservice">Community Service</option>
<option value="daydreaming">Daydreaming</option>
<option value="reading">Reading</option>
<option value="meditation">Meditation</option>
</select>
</p>
<input type="submit" />
</form>
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');
});
I'm new to Javascript and I'm trying to link two comboboxes ! In the first combo box I have the names of some states in greece and in the other the cities ! In the second I have all the cities in Greece and I want when I select a state from the first combo box only certain cities to appear on the second ! For example if I select Attikis , then I want to be shown in dropdown menu only Agias Paraskeuis and not Agias Varvaras and Agiou Dimitriou and vice versa !
My code is this :
<form action="?" method="get">
<div class="jtype">
<label for="nomos"> Νομός </label>
<form name="nomoi_poleis" action="">
<select id="combo_nomoi" name="combo_nomoi" onchange="cityChange()" >
<option value="attikis"> Attikis</option>
<option value="thessalonikis"> Thessalonikis</option>
</select>
<br></br>
<label for="poli">Πόλη</label>
<select id="poleis" name="poleis">
<option value="agias varvaras"> Agias Varvara</option>
<option value="agias paraskeuis">Agias Paraskeuis</option>
<option value="agiou dimitriou"> Agiou Dimitriou</option>
</select>
</form>
</div>
</form>
Ana my JS :
<script type="text/javascript">
function changeCity(){
var nomos = document.getElementById("combo_nomoi");
if (nomos.value == "attikis"){
document.getElementById("attikis");
}
else{
document.getElementById("thessalonikis");
}
}
</script>
0The easiest way is to have a set of <select> menus, all but one of which has its display property set to none, with the one you want to display set to inline. Then in your onchange handler you run through your list of selects in a loop, setting the display property accordingly. Note inline event handlers like that are not very good practice; better to set them up via JavaScript in your page initialisation code. It misght look something like:
(HTML)
<select id="states">
<option value="0" selected="selected">State 1</option>
<option value="1">State 2</option>
...
</select>
<select id="cities_0" style="display: inline;">
<option value="...">Name 1</option>
<option value="...">Name 2</option>
...
</select>
<select id="cities_1" style="display: none;">
<option value="...">Name 1</option>
<option value="...">Name 2</option>
...
</select>
JavaScript
function change_city(evt)
{
var states=document.getElementById('states'),whichstate;
whichstate=states.options[state.selectedIndex].value;
for(var i=0;i<states.options.length;i++)
document.getElementById('cities_'+i).style.display=(i==whichstate ? 'inline' : 'none');
}
The following is a crude example(using only JS) to get this working:
http://jsfiddle.net/FMZ2H/
HTML
<form action="?" method="get">
<div class="jtype">
<label for="nomos">Νομός</label>
<form name="nomoi_poleis" action="">
<select id="combo_nomoi" name="combo_nomoi">
<option value="attikis">Attikis</option>
<option value="thessalonikis">Thessalonikis</option>
</select>
<br></br>
<label for="poli">Πόλη</label>
<select id="poleis" name="poleis">
<option id="option1" value="agias varvaras">Agias Varvara</option>
<option id="option2" value="agias paraskeuis">Agias Paraskeuis</option>
<option id="option3" value="agiou dimitriou">Agiou Dimitriou</option>
</select>
</form>
Javascript:
document.getElementById("combo_nomoi").onchange = cityChange
function cityChange() {
var elem = document.getElementById("combo_nomoi");
if (elem.options[elem.selectedIndex].text == "Attikis") {
document.getElementById("option1").disabled = true;
document.getElementById("option2").disabled = false;
document.getElementById("option3").disabled = false;
}
if (elem.options[elem.selectedIndex].text == "Thessalonikis") {
document.getElementById("option1").disabled = false;
document.getElementById("option2").disabled = true;
document.getElementById("option3").disabled = true;
}
}
As shown above, you could disable the options you don't want your user to select. I'll leave it to you to do it an better way than selecting each option by their id.