Develop Reference

drop-down validation and Combine If statement on JavaScript with extra condition for validation?

I have a function to check if the value meet the requirement, it is working fine so I have another drop-down(select) to validate with same condition but the drop-down values different I am only checking the blank selection.
Goal:
any way to improve the JS or combine them correctly.
Many thanks in advance
// for 1st drop down
function checkPrimeSelectChangeValue() {
var selObj = document.getElementById("dropdown1");
var selValue = selObj.options[selObj.selectedIndex].value;
if (selValue == "") { // if blank is selected add css for validation
$("#dropdown1").attr('disabled', 'disabled');
$("#dropdown1").addClass("text-error");
} else {
$("#btnUpdateForm").removeAttr('disabled'); // disabled button
removeError("#dropdown1"); // remover error
}
return;
}
// 2nd dropdown like below
function checkSecondSelectChangeValue() {
var selObj2 = document.getElementById("dropdown2");
var selValue2 = selObj.options[selObj.selectedIndex].value;
if (selValue2 == "") { // if blank is selected add css for validation
$("#dropdown2").attr('disabled', 'disabled');
$("#dropdown2").addClass("text-error");
} else {
$("#btnUpdateForm").removeAttr('disabled'); // disabled button
removeError("#dropdown2"); // remover error
}
return;
}
// Can I do this or Any ipmorvent can be done to this
function checkCombinedSelectChangeValue() {
var selObj = document.getElementById("dropdown1");
var selObj2 = document.getElementById("dropdown2");
var selValue = selObj.options[selObj.selectedIndex].value;
var selValue2 = selObj.options[selObj.selectedIndex].value;
if (selValue == "") { // if blank is selected add css for validation
$("#dropdown1").attr('disabled', 'disabled');
$("#dropdown1").addClass("text-error");
} else {
$("#btnUpdateForm").removeAttr('disabled'); // disabled button
removeError("#dropdown1"); // remover error
}
return;
if (selValue2 == "") { // if blank is selected add css for validation
$("#dropdown2").attr('disabled', 'disabled');
$("#dropdown2").addClass("text-error");
} else {
$("#btnUpdateForm").removeAttr('disabled'); // disabled button
removeError("#dropdown2"); // remover error
}
return;
}
<p>1st dropdown1 </p>
<select name="test" id="select">
<option value="">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="nil">nil</option>
</select>
<br>
<p>2nd dropdown1 </p>
<select name="test" id="select2">
<option value="">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="nil">nil</option>
</select>

I optimized your function a little, assuming it's supposed to run when your select changes. I also assume that you want to add the disabled property to your #btnUpdateForm since that isnt really clear with the code you provided.
First add the disabled property to your Update button like this:
<button id="btnUpdateForm" disabled>Update</button>
HTML:
<p>1st dropdown1 </p>
<select class="dropdown" name="test" id="select">
<option value="">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="nil">nil</option>
</select>
<br>
<p>2nd dropdown1 </p>
<select class="dropdown" name="test" id="select2">
<option value="">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="nil">nil</option>
</select>
JQuery:
$('.dropdown').change(function() {
var val1 = $('#select').val();
var val2 = $('#select2').val();
if (val1 == '' || val2 == '') {
$('#btnUpdateForm').prop('disabled', true);
if (val1 == '') {
$('#dropdown1').addClass('text-error');
if (val2 !== '') {
$('#dropdown2').removeClass('text-error');
}
}
else if (val2 == '') {
$('#dropdown2').addClass('text-error');
if (val1 !== '') {
$('#dropdown1').removeClass('text-error');
}
}
}
else {
$('#btnUpdateForm').prop('disabled', false);
$('#dropdown1').removeClass('text-error');
$('#dropdown2').removeClass('text-error');
}
});
Basically now the Error will show up for each Dropdown with value="" and the button will only be enabled when both Dropdown's value isn't 0.

Jquery Select Dropdown to add or remove a class

I am building a web application where you can mark TV shows as "Want to Watch", "Currently Watching", "Finished Watching", or "Stopped Watching." There is a dropdown to select between these. If "Currently Watching" is selected, two more dropdowns should also be displayed for a user to enter their last watched season and episode. However, I am having trouble getting the jQuery to work properly
HTML
<select name="updateTvStatus" class="form-control" id="updateTvStatus">
<option value="4" selected>Want to Watch</option>
<option value="1">Currently Watching</option>
<option value="2">Finished Watching</option>
<option value="3">Stopped Watching</option>
</select>
<div id="last-watched" class="hidden">
<select name="updateLastSeason" class="form-control" id="updateLastSeason">
<option value="0">Select Season:</option>
<option value="1">Season 1</option>
<option value="2">...</option>
</select>
<select name="updateLastEpisode" class="form-control" id="updateLastEpisode">
<option value="0">Select Episode:</option>
<option value="1">Episode 1</option>
<option value="2">...</option>
</select>
</div> <!-- /last-watched -->
jQuery
$(document).ready(function() {
$("#updateTvStatus").change(function() {
var TVstatus = $("#updateTvStatus").val();
var ishidden = $('#last-watched').hasClass("hidden");
if (TVstatus == 1 && ishidden == TRUE) {
$('#last-watched').removeClass("hidden");
} elseif (TVstatus != 1 && ishidden == FALSE) {
$('#last-watched').addClass("hidden");
}
});
});

else if (elseif) - syntax error.
Since JS is case sensitive, you'll ve to change TRUE/FALSE to true/false.
You've specified class selector instead of id selector. Pls change $('.last-watched') to $('#last-watched').
(And you may use === instead of == for strict comparison).
So, a completed code ll look like this to work:
$(document).ready(function() {
$("#updateTvStatus").change(function() {
var TVstatus = $("#updateTvStatus").val();
var ishidden = $('#last-watched').hasClass("hidden");
if (TVstatus == 1 && ishidden == true) {
$('#last-watched').removeClass("hidden");
} else if (TVstatus != 1 && ishidden == false) {
$('#last-watched').addClass("hidden");
}
});
});

I don't know what exactly you are looking for . But this is what you want for :
$(document).ready(function() {
$('#last-watched').hide();
$("#updateTvStatus").change(function() {
var TVstatus = $("#updateTvStatus").val();
if(TVstatus == 1){
$('#last-watched').show();
}else {
$('#last-watched').hide();
}
});
});
</script>

Converting a JavaScript function to jQuery - Select option list

This is literally the first time I've worked with jQuery and I've read the entire chapter in my textbook but am finding a hard time wrapping my head around it. I'm attempting to convert a JavaScript function (a simple option selection drop-down list) to jQuery. I've attempted a few lines of code that I've gotten from the book or from w3schools and api.query but to no avail. I'll try to make this quick and simple, I just cannot understand jQuery for some reason.
What I've attempted usually doesn't work. Before my option list works fine, then I tried experimenting but I didn't get too far.
I also apolgize for the vagueness of the question, I'd appreciate any help!
Here's something I've tried:
$(document).ready( function () {
var c = ???
if ($(c...
calc.js and index.html below it
function selectedCountry() {
var c = document.getElementById("countryChooser").value;
var message;
if (c == "nothing") { //if they selected the default option, error pops up.
alert("Please select a country.");
} else if (c == "usa") {
message = "United States of America";
document.getElementById("count").innerHTML = "Your country is: " + message;
} else if (c == "canada") {
message = "Canada";
document.getElementById("count").innerHTML = "Your country is: " + message;
} else {
message = "Mexico";
document.getElementById("count").innerHTML = "Your country is: " + message;
}
}
<script src = "calc.js"></script> <!--JavaSript link -->
<select name="countrylist" id="countryChooser" onchange="selectedCountry()">
<option value="nothing">Select a country</option>
<option value="usa">United States of America</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<p id="count"></p>

Through jQuery you can do it like below:-
Example:-
$(document).ready(function(){
$('#countryChooser').change(function(){ // on change of select
if($(this).val()!=='nothing'){ // if selected value is some country
$('#count').html("Your country is: "+$("#countryChooser option:selected").text()); // get country name and add it to paragraph
}else{
$('#count').html("");
alert('Please select a country.'); // alert for selecting a country
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="countrylist" id="countryChooser">
<option value="nothing">Select a country</option>
<option value="usa">United States of America</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<p id="count"></p>

Get an element by id:
var c = $('#countryChooser');
Get the value of this input/select element
var value = c.val();
Set the html of an element using the element id
$('#count').html('some html');
or set the text (html is not parsed this way)
$('#count').text('some html');
You can also handle the events with jQuery
$(document).ready(function() {
$('#countryChooser').on('change', function(event) {
// this is the DOM element with the id 'countryChooser'
// same as the native: var val = this.value;
var val = $(this).val();
// ...
});
});

I have bind the onchange() event of your select list inside the jQuery(document).ready() method. check this out-
// Updated code--
$(document).ready(function (){
$('#countryChooser').on('change' ,function () {
if(this.selectedIndex){
$('#count').html("Your country is: "+ this.options[this.selectedIndex].text);
}else{
$('#count').html("");
alert("Please select a country.");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "calc.js"></script> <!--JavaSript link -->
<select name="countrylist" id="countryChooser">
<option value="nothing">Select a country</option>
<option value="usa">United States of America</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<p id="count"></p>

$('#countryChooser').change(function(){
var selectedCountry = $(this).val();
if(selectedCountry == 'nothing'){
console.log('Select A country');
}
else{
$('#count').html('Your country is '+$('#countryChooser option:selected').text());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--JavaSript link -->
<select name="countrylist" id="countryChooser" >
<option value="nothing">Select a country</option>
<option value="usa">United States of America</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<p id="count"></p>
Please check the code might help you out
thanks

How would I validate my Scrolling List with my current code?

So I am trying to create a function that will validate if an option is selected in my Scrolling List. If nothing is selected, and alert will go off, if one is selected, then it passes validation. This is the code I am using:
<select id="topList" name="toppings" size="8" multiple>
<option value="opCream">Whipped Cream</option>
<option value="opFudge">Hot Fudge</option>
<option value="opMarsh">Marshmallow</option>
<option value="opCherry">Cherries</option>
<option value="opChocSprinkles">Chocolate Sprinkles</option>
<option value="opRainSprinkles">Rainbow Sprinkles</option>
<option value="opCheese">Cheesecake</option>
<option value="opOreo">Oreo Crumbles</option>
</select>
function checkScrollList() {
var ddl = document.getElementById("topList");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == false)
{
alert("Please select a sundae topping.");
}
}
Thanks for the suggestions!

You could use the selectedIndex property of the select object, like this:
function checkScrollList() {
var ddl = document.getElementById("topList");
if (ddl.selectedIndex === -1) {
alert("Please select a sundae topping.");
}
}
The selectedIndex property will give the zero-based index of the first selected option, so it is not useful for actually retrieving all the selected options. But it is guaranteed to be -1 when no options are selected.

Jquery + form : no validation if val is null

My form is composed of chained select. When I arrive at last, I submit it, if and only if all the select are filled.
Here is my function.
$("#form_maps select").each(function(index, el){
var val = $(el).val();
if(val === null)
{
alert('error message');
return false;
}
else
{
$('#form_maps').submit();
}
});
When I do my testing, an error is generated (the alert), but after a few seconds (I would say 2 or 3), the form is still submitted.
here is my html form
<form id="form_maps" method="post" style="height: 100px;">
<select name="select_0" id="select_0">
<option value="c_5" class="c_4">Excavateur</option>
<option value="c_11" class="c_4">Compaction</option>
</select>
<select name="select_1" id="select_1">
<option value="c_6" class="c_5">série 100</option>
<option value="c_9" class="c_5">série 200</option>
</select>
<select name="select_2" id="select_2">
<option value="c_7" class="c_6">above</option>
<option value="c_10" class="c_6">thru</option>
</select>
<select name="select_3" id="select_3">
<option value="c_8" class="c_7">système hydraulique</option>
<option value="c_12" class="c_7">système électrique</option>
</select>
</form>
What is my problem please? Thank you for your assistance to come.

I guess your form is submitted because one of the your selects has a valid value and the return false isn't stopping the loop. If you want to prevent to submit to form unless all selects do have a valid value, then I would suggest to use a boolean that will be set to false if one of the selects is invalid.
Something like this:
var canSubmit = true;
$("#form_maps select").each(function(index, el){
var val = $(el).val();
if(val === null)
{
alert('error message');
canSubmit = false;
}
});
if(canSubmit) {
$('#form_maps').submit();
}

There is a triple is so that might be something to begin with...