Javascript HTML drop down validation - javascript

i want to be able to add a validation to my dropdown lists. If the user was to select cardiff in the first dropdown(select1) and again in the second dropdown(select2) if should give a alert message to the user saying "destination can't be same as the departure".
I know this isn't user friendly but it needs to be done=S
I was getting issues with the second drop down as it doesn't seem to work as a double AND if statement.
Please use jsfiddle.net to help me thanks.
Departure: <br>
<select id="select1">
<option value="" disabled selected>Please Select</option>
<option>Birmingham</option>
<option>Bristol</option>
<option>Cardiff</option>
<option>Liverpool</option>
<option>London</option>
<option>Manchester</option>
</select>
<br><br>
Destination: <br>
<select id="select2">
<option value="" disabled selected>Please Select</option>
<option>Birmingham</option>
<option>Bristol</option>
<option>Cardiff</option>
<option>Liverpool</option>
<option>London</option>
<option>Manchester</option>
</select>
<br><br>
<input type="Button" value="Order Tickets" onClick="myFunction()">
<script>
function myFunction()
{
if (document.getElementById("select1" && "select2").value == "Cardiff")
alert("Destination can't be same as Departure.");
else
alert("That's Fine");
}
</script>


You need to get the values of both selects.
var one=document.getElementById("select1");
var two=document.getElementById("select2");
if (one.options[one.selectedIndex].value == two.options[two.selectedIndex].value)
alert("Destination can't be same as Departure");


Its better to use unique names as option values.
Departure: <br>
<select id="select1">
<option value="" disabled selected>Please Select</option>
<option value="1">Birmingham</option>
<option value="2">Bristol</option>
<option value="3">Cardiff</option>
<option value="4">Liverpool</option>
<option value="5">London</option>
<option value="6">Manchester</option>
</select><br><br>
Destination: <br>
<select id="select2">
<option value="" disabled selected>Please Select</option>
<option value="1">Birmingham</option>
<option value="2">Bristol</option>
<option value="3">Cardiff</option>
<option value="4">Liverpool</option>
<option value="5">London</option>
<option value="6">Manchester</option>
</select><br><br>
<input type="Button" value="Order Tickets" onClick="myFunction()">
<script>
function myFunction() {
if (document.getElementById("select1").value == document.getElementById("select2").value)
alert("Destination can't be same as Departure.");
else
alert("That's Fine");
}
</script>


function myFunction() {
if (document.getElementById("select1").value === "Cardiff" && document.getElementById("select2").value === "Cardiff")
alert("Destination can't be same as Departure.");
else
alert("That's Fine");
}
or better :
function myFunction() {
if (document.getElementById("select1").value === document.getElementById("select2").value)
alert("Destination can't be same as Departure.");
else
alert("That's Fine");
}


Replace
if (document.getElementById("select1" && "select2").value == "Cardiff")
with
if (document.getElementById("select1").value == document.getElementById("select1").value ) {
...
}
Also, you would be better off if you stripped the departure from the destination list. But the code in your question sounds like that is a bit too much for your current skills.


I have updated your JavaScript. Here's the code.
function myFunction() {
var dest1 = document.getElementById("select1").value;
var dest2 = document.getElementById("select2").value;
if (dest1 === dest2)
alert("Destination can't be same as Departure.");
else
alert("That's Fine");
}

Related

Activate TextBox if another option is selected in PHP

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>

Function to check option list validation not working

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>

show hide div based on select option value jQuery

I have a select list with value 0,1,2,3,4,5,6,7 .On select with value 0 and 1 I want to show a div, but on select with value 2,3,4,5,6,7 I want to hide that div.The code I have right now is below
HTML
<select class="rel_status">
<option value="0">---</option>
<option value="1">Single</option>
<option value="2">In a relationship</option>
<option value="3">Engaged</option>
<option value="4">Married</option>
<option value="5">Separated</option>
<option value="6">Divorced</option>
<option value="7">Widowed</option>
</select>
<div class="rel_part">
<input type="text" name="part_name" placeholder="Search">
</div>
jQuery
//hide partner search form
$('.rel_part').hide();
//Search Relationship partner
$(document).ready(function(){
$('.rel_status').change(function(){
if($('.rel_status').val() == '2','3','4','5','6','7') {
$('.rel_part').show();
} else {
$('.rel_part').hide();
}
});
});
The code actually works when I put
.val() == '2')
instead of
.val() == '2','3','4','5','6','7')
But then I cant show the div for other values

You can do it like this if ($.inArray($(this).val(), "2,3,4,5,6,7") == -1) {
Demo
//hide partner search form
$('.rel_part').hide();
//Search Relationship partner
$(document).ready(function() {
$('.rel_status').change(function() {
if ($.inArray($(this).val(), "2,3,4,5,6,7") == -1) {
$('.rel_part').show();
} else {
$('.rel_part').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="rel_status">
<option value="0">---</option>
<option value="1">Single</option>
<option value="2">In a relationship</option>
<option value="3">Engaged</option>
<option value="4">Married</option>
<option value="5">Separated</option>
<option value="6">Divorced</option>
<option value="7">Widowed</option>
</select>
<div class="rel_part">
<input type="text" name="part_name" placeholder="Search">
</div>

use this it will works
$('.rel_status').change(function(){
if($('.rel_status').val() < 2) {
$('.rel_part').show();
} else {
$('.rel_part').hide();
}
});
//hide partner search form
$('.rel_part').hide();
//Search Relationship partner
$(document).ready(function(){
$('.rel_status').change(function(){
if($('.rel_status').val() < 2) {
$('.rel_part').show();
} else {
$('.rel_part').hide();
}
});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<select class="rel_status">
<option value="0">---</option>
<option value="1">Single</option>
<option value="2">In a relationship</option>
<option value="3">Engaged</option>
<option value="4">Married</option>
<option value="5">Separated</option>
<option value="6">Divorced</option>
<option value="7">Widowed</option>
</select>
<div class="rel_part">
<input type="text" name="part_name" placeholder="Search">
</div>

That's not a valid way of comparing one value to many others.
if($('.rel_status').val() == '2','3','4','5','6','7')
Use a logic OR Operator instead:
if($('.rel_status').val() == '0' || $('.rel_status').val() = '1') {
$('.rel_part').hide();
} else {
$('.rel_part').show();
}
Notice, that I switched the cases in the if clause so it's less code to write.

The problem is this is not a valid way to use , in Javascript, because you will end up validating if($('.rel_status').val() == '7') { instead.
You can change the code into this
if($.inArray($('.rel_status').val(), ['2','3','4','5','6','7']) != -1) {
and it should work.
Hope it helps!

Output text changes based on two drop down menus

So basically I am trying to make a page where the user can select options from two drop down menus, when the second drop down menu has been completed and both have options in them I want it to trigger some javascript that takes those values and then returns text depending on the output.
E.g. a user selects xbox and comfort trade, the price is returned as £5, or maybe they select playstation and comfort trade, the price is returned as £2.50, or maybe they want pc and player auction the price is only £0.99.
HTML
<select id="platform" name="platform">
<option select value=""></option>
<option value="xbox">Xbox</option>
<option value="playstation">PlayStation</option>
<option value="pc">PC</option>
</select><br>
<p>Select Method:</p>
<select id="method" name="method" onChange="price()">
<option selected value=""></option>
<option value="comfortTrade">Comfort Trade</option>
<option value="playerAuction">Player Auction</option>
</select><br>
<h3 id="price"></h3>
Javascript
function price() {
if ($(document.getElementById("platform")) === "xbox" && $(document.getElementById("method")) === "comfortTrade") {
document.getElementById("price").innerHTML = "£5";
} else if ($(document.getElementById("platform")) === "playstation" && $(document.getElementById("method")) === "comfortTrade") {
document.getElementById("price").innerHTML = "£2.50";
}
}
I'm quite new to Javascript but I had a go at doing this, I also have spent the past hour or so trying to search for tutorials on this but nothing got it to work.

Try with this javascript function:
function price() {
if (document.getElementById("platform").value == "xbox" && document.getElementById("method").value == "comfortTrade") {
document.getElementById("price").innerHTML = "£5";
} else if (document.getElementById("platform").value == "playstation" && document.getElementById("method").value == "comfortTrade") {
document.getElementById("price").innerHTML = "£2.50";
}
}

A couple things need to be updated in the existing code to get this to work:
1) onchange has no capital letters, and needs to be added to "platform" <select> as well
2) no need for $ here, can simply use document.getElementById
3) after selecting the element in step 2, will need to get the value of the select by accessing the property .value on the element.
Fixed code:
<div id="app">
<select id="platform" name="platform" onchange="price()">
<option select value=""></option>
<option value="xbox">Xbox</option>
<option value="playstation">PlayStation</option>
<option value="pc">PC</option>
</select><br>
<p>Select Method:</p>
<select id="method" name="method" onchange="price()">
<option selected value=""></option>
<option value="comfortTrade">Comfort Trade</option>
<option value="playerAuction">Player Auction</option>
</select><br>
<h3 id="price"></h3>
</div>
<script>
function price() {
if(document.getElementById("platform").value === "xbox" && document.getElementById("method").value === "comfortTrade") {
document.getElementById("price").innerHTML = "£5";
} else if(document.getElementById("platform").value === "playstation" && document.getElementById("method").value === "comfortTrade") {
document.getElementById("price").innerHTML = "£2.50";
}
}
</script>

Presuming you have jQuery installed because you are using $(...) in your code, you can solve your issue like this:
<select id="platform" name="platform" onchange="findPrice()">
<option select value=""></option>
<option value="xbox">Xbox</option>
<option value="playstation">PlayStation</option>
<option value="pc">PC</option>
</select><br>
<p>Select Method:</p>
<select id="method" name="method" onchange="findPrice()">
<option selected value=""></option>
<option value="comfortTrade">Comfort Trade</option>
<option value="playerAuction">Player Auction</option>
</select><br>
<h3 id="price"></h3>
<script type="application/javascript">
window.findPrice = function() {
if($("#platform").val() === "xbox" && $("#method").val() === "comfortTrade") {
document.getElementById("price").innerHTML = "£5";
}else if($("#platform").val() === "playstation" && $("#method").val() === "comfortTrade") {
document.getElementById("price").innerHTML = "£2.50";
}
}
</script>
You can see a working example of this at: https://jsfiddle.net/L2vgqmtL/
However, I would actually propose a slightly different solution that I find more elegant:
<script type="application/javascript">
window.findPrice = function() {
var platform = $("#platform").val();
var method = $("#method").val();
var priceUpdateText = "";
if(method == 'comfortTrade'){
switch(platform){
case "xbox":
priceUpdateText = "£5";
break;
case "playstation":
priceUpdateText = "£2.50";
break;
default:
priceUpdateText = "";
}
}
$("#price").text(priceUpdateText);
}
</script>
<select id="platform" name="platform" onchange="findPrice()">
<option select value=""></option>
<option value="xbox">Xbox</option>
<option value="playstation">PlayStation</option>
<option value="pc">PC</option>
</select><br>
<p>Select Method:</p>
<select id="method" name="method" onchange="findPrice()">
<option selected value=""></option>
<option value="comfortTrade">Comfort Trade</option>
<option value="playerAuction">Player Auction</option>
</select><br>
<h3 id="price"></h3>
A working example of this solution is available here: https://jsfiddle.net/8wafskbw/2/
Important Note: Both of these solutions operate under the presumption that have jQuery included in your page.

javascript - how would you write the if(...) statement for selection options in a form?

How do you write the if statement for a select option using javascript?
I wrote a form and made a select option list. I want to write an if statement that will do something if an option is selected.
JS
function name(obj) {
if (option.value == "cat") {
document.getElementById("owner").jim.disabled = true;
}
}
HTML
<p>
selection:*
<select id="Sone" name="Selection" size="1">
<option>Select</option>
<option value="cat" onclick="name(this);">cat</option>
<option value="dog" onclick="name(this);">dog</option>
<option value="bird" onclick="name(this);">bird</option>
<option value="Other" onclick="name(this);">Other</option>
</select>
</p>

<select id= "Sone" name="Selection" onchange="check()">
<option value="cat">cat</option>
<option value="dog">dog</option>
</select>
<input type="text" id="res" size="25"/>
And the function is :-
function check() {
var val = document.getElementById('Sone').value;
if(val=='cat') {
document.getElementById('res').value = "Thanks for selecting cat";
} else {
document.getElementById('res').value = "please select CAT";
}
}

You have to work as below
<form name="AddEditUser">
.
.
<select name="listCompany" style="width:200px" id="listCompany" onchange="fnCompany()">
<option value="None">None</option>
<option value="ABC">ABC</option>
<option value="XYZ">XYZ</option>
</select>
</form>
You have to call the javascript function a
function fnCompany(){
if(document.frmAddEditUser.listCompany.value=='None'){
//do something
}
}

Categories