We Keep Coding

Apply Js to show or hide elements

I'm trying to show a select option and then show a input to filter
here's my js code
function showSearch(id) {
if (id == "statusSearch") {
$("#statusSearch").show();
$("#monthSearch").hide();
$("#employeeSearch").hide();
}
}
But it doesn't work, it doesn't show anything. Only my first select option
<select id="status" name="status" onChange="showSearch(this.value);">
<option selected disabled>Select</option>
<option name="statusSearch">Estado de OT</option>
<option name="monthSearch">Mes</option>
<option name="employeeSearch">Empleado</option>
</select>
<button type="submit">Ver todo</button>
Example, if I choose "statusSearch"
<div id="statusSearch" style="display: none;">
<h2>Estado de OT</h2>
<select type="text" name="searchByStatus">
<option selected disabled>Elegir</option>
<option name="open">Abierta</option>
<option name="closed">Cerrada</option>
</select>
</div>
And it's my view
$req3=$request;
if($req3) {
$query = trim($req3->get('statusSearch'));
$search = MaintenanceTasks::select('Employee_Id_created','Task_Id','Machine_Id',
'Request_date')//etc
->get();
}
Well, I don't know what I'm doing wrong

use value="statusSearch" than name="statusSearch" on your options
example :
<option selected disabled>Select</option>
<option value="statusSearch">Estado de OT</option>
<option value="monthSearch">Mes</option>
<option value="employeeSearch">Empleado</option>
like here https://codepen.io/JUSEN/pen/dyOperB?editors=1010

Your selector is not correct:
function showSearch(id) {
$( "#statusSearch option" ).each(function( index ) {
if (id == "statusSearch") {
$("#statusSearch option).each(function( ) {
if($this).attr('name') == "statusSearch"){
$(this).show();
}else if($this).attr('name') == "monthSearch"){
$(this).hide();
}else if {
//and so on
:
});//end each

Add a bootstrap class to JS class

I have a small question,
At the moment I have a 2 option boxes in my Test.php file. I want to show my second option box when I select leverancier in the first one. so far so good!
But now I want to apply some CSS to it...
for example the bootstrap form-control class...
this is my (simple) code:
<script>
$(function() {
$("#corracrtieby").on("change", function() {
var select_val = $(this).val();
console.log(select_val);
if (select_val === 'Leverancier') {
$("#Klanttable").removeClass("hidden");
}
else {
$("#Klanttable").addClass("hidden");
$("#Klanttable").val("");
}
});
});
</script>
Correctie maatregelen:<br>
<select name="corracrtieby" class="form-control" id="corracrtieby" style="width: 300px">
<option value="--corracrtieby--">--corracrtieby--</option>
<option value="Petrogas">Petrogas</option>
<option value="Leverancier">Leverancier</option>
<option value="Klant">Klant</option>
</select>
<br>
<select name="Klanttable" class="hidden" id="Klanttable" style="width: 300px">
<option value="--Klanttable--">--Correctie maatregel--</option>
<option value="Test1">Petrogas</option>
<option value="Test2">Leverancier</option>
<option value="Test3">Klant</option>
<option value="Test4">Klant</option>
<option value="Test5">Klant</option>
</select>
So how can I make my first option box the same as my second option box?

With Jquery you can add multiple classes at once so your solution would just be:
$(function() {
$("#corracrtieby").on("change", function() {
var select_val = $(this).val();
console.log(select_val);
if (select_val === 'Leverancier') {
$("#Klanttable").removeClass("hidden form-control");
}
else {
$("#Klanttable").addClass("hidden form-control");
$("#Klanttable").val("");
}
});
});

<script>
$(function() {
$("#corracrtieby").on("change", function() {
var select_val = $(this).val();
console.log(select_val);
if (select_val === 'Leverancier') {
$("#Klanttable").removeClass("hidden form-control");
}
else {
$("#Klanttable").addClass("hidden form-control");
$("#Klanttable").val("");
}
});
});
</script>
Correctie maatregelen:<br>
<select name="corracrtieby" class="form-control" id="corracrtieby" style="width: 300px">
<option value="--corracrtieby--">--corracrtieby--</option>
<option value="Petrogas">Petrogas</option>
<option value="Leverancier">Leverancier</option>
<option value="Klant">Klant</option>
</select>
<br>
<select name="Klanttable" class="hidden form-control" id="Klanttable" style="width: 300px">
<option value="--Klanttable--">--Correctie maatregel--</option>
<option value="Test1">Petrogas</option>
<option value="Test2">Leverancier</option>
<option value="Test3">Klant</option>
<option value="Test4">Klant</option>
<option value="Test5">Klant</option>
</select>
now it's removing only the class, not the option box itself......

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!

jQuery if select is not selected add error

I'm trying to make the <select id="jobCategory"> and job <select id="industry"> fields mandatory by adding a error message.
Not sure if I have to make them also disable in order to do it properly.
My if statement doesn't work for both field.
Error message in red doesn't show.
var maleFemale = '';
$('#submitBtn').click(function() {
var errors = false;
if (maleFemale == '') {
errors = true;
$('#areYou').css('color', '#F00');
} else {
$('#areYou').css('color', '#000');
}
if ($("#twitterInput").val() == '' || $("#twitterInput").val() == '#yourname' || $("#twitterInput").val() == '#') {
errors = true;
$('#enterTwitterHandle').css('color', '#F00');
} else {
$('#enterTwitterHandle').css('color', '#000');
}
if ($('#jobCategory option:selected').length == 0) {
alert('nothing selected');
$('#enterCategory').css('color', '#F00');
} else {
$('#enterCategory').css('color', '#000');
}
if ($('#industry option:selected').length == 0) {
alert('nothing selected');
$('#enterIndustry').css('color', '#F00');
} else {
$('#enterIndustry').css('color', '#000');
}
if (!errors) {
$('body').addClass('submitted');
}
});
#submitBtn {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='form'>
<p id='areYou'>Are you...</p>
<div id='maleFemaleSelector'>
<p class='maleFemaleSelectorBtn transform' id='maleBtn'>Male</p>
<p class='maleFemaleSelectorBtn transform' id='femaleBtn'>Female</p>
<div style='clear:both'></div>
</div>
<p id='enterTwitterHandle'>Enter a Twitter handle</p>
<input type='text' id='twitterInput' value='#yourname' />
<div style='clear:both'></div>
<p id='enterCategory'>Select your job category</p>
<select id="jobCategory" class="select">
<option value="" disabled selected>job category</option>
<option value="it"> IT</option>
<option value="finance">Finance</option>
<option value="hr">HR</option>
<option value="marketing">Marketing</option>
<option value="security">Security</option>
<option value="developer">Developer</option>
<option value="others">Others</option>
</select>
<div style='clear:both'></div>
<p id='enterIndustry'>Select your industry</p>
<select id="industry" class="select">
<option value="" disabled selected>industry</option>
<option value="retail">Retail</option>
<option value="travel-transportation">Travel & Transportation</option>
<option value="telco-media">Telco / Media</option>
<option value="banking">Banking</option>
<option value="health-government">Health & Government</option>
<option value="energy-utilities">Energy & Utilities</option>
</select>
<p id='submitBtn'>Discover your AI iD</p>
<div style='clear:both'></div>
</div>

If you change:
if ($('#jobCategory option:selected').length == 0) {
to
if ($('#jobCategory option:selected').val() == '') {
And
if ($('#industry option:selected').length == 0)
to
if ($('#industry option:selected').val() == '')
this should work.
The original one finds the length == '12' (which is not 0) because the text inside the option is 'job category' which is 12 charactors long.
the new one will search for the values instead, which only == '' on
<option value="" disabled selected>job category</option> which is basically nothing selected.
Working example:
var maleFemale = '';
$('#submitBtn').click(function() {
var errors = false;
if (maleFemale == '') {
errors = true;
$('#areYou').css('color', '#F00');
} else {
$('#areYou').css('color', '#000');
}
if ($("#twitterInput").val() == '' || $("#twitterInput").val() == '#yourname' || $("#twitterInput").val() == '#') {
errors = true;
$('#enterTwitterHandle').css('color', '#F00');
} else {
$('#enterTwitterHandle').css('color', '#000');
}
if ($('#jobCategory option:selected').val() == '') {
alert('nothing selected');
$('#enterCategory').css('color', '#F00');
} else {
$('#enterCategory').css('color', '#000');
}
if ($('#industry option:selected').val() == '') {
alert('nothing selected');
$('#enterIndustry').css('color', '#F00');
} else {
$('#enterIndustry').css('color', '#000');
}
if (!errors) {
$('body').addClass('submitted');
}
});
#submitBtn {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='form'>
<p id='areYou'>Are you...</p>
<div id='maleFemaleSelector'>
<p class='maleFemaleSelectorBtn transform' id='maleBtn'>Male</p>
<p class='maleFemaleSelectorBtn transform' id='femaleBtn'>Female</p>
<div style='clear:both'></div>
</div>
<p id='enterTwitterHandle'>Enter a Twitter handle</p>
<input type='text' id='twitterInput' value='#yourname' />
<div style='clear:both'></div>
<p id='enterCategory'>Select your job category</p>
<select id="jobCategory" class="select">
<option value="" disabled selected>job category</option>
<option value="it"> IT</option>
<option value="finance">Finance</option>
<option value="hr">HR</option>
<option value="marketing">Marketing</option>
<option value="security">Security</option>
<option value="developer">Developer</option>
<option value="others">Others</option>
</select>
<div style='clear:both'></div>
<p id='enterIndustry'>Select your industry</p>
<select id="industry" class="select">
<option value="" disabled selected>industry</option>
<option value="retail">Retail</option>
<option value="travel-transportation">Travel & Transportation</option>
<option value="telco-media">Telco / Media</option>
<option value="banking">Banking</option>
<option value="health-government">Health & Government</option>
<option value="energy-utilities">Energy & Utilities</option>
</select>
<p id='submitBtn'>Discover your AI iD</p>
<div style='clear:both'></div>
</div>
An alternative (but not recommended) is to search for the text itself inside the option:selected.
Like this:
if ($('#jobCategory option:selected').text == 'job category') {

jQuery bind three select menus hide/show

I have three select menus.
<form>
<select id="mass" name="mass">
<option value="Blank" selected>--</option>
<option value="Light">Light</option>
<option value="Medium">Medium</option>
<option value="Heavy">Heavy</option>
</select>
<select id="colour" name="colour">
<option value="Blank" selected>--</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
</select>
<select id="textureColour" name="textureColour">
<option value="Blank" selected>--</option>
<option value="Orange">Orange</option>
<option value="Purple">Purple</option>
<option value="Black">Black</option>
</select>
</form>
I want the first menu to display, and the second and third menus to be hidden, until called upon.
If the first menu changes from the default option, I want the second menu to display.
Once a selection has been made within the second menu, I want the third menu to display.
However, I only want the third menu to display, if the selected value in the first menu is either 'Medium' or 'Heavy'. Selecting the default 'Blank' or 'Light' should hide the third menu.
Currently it isn't functioning as I would I like.
$(function() {
var mass = $('#mass');
var colour = $('#colour');
var textureColour = $('#textureColour');
mass.change(function() {
if (mass.val() != 'Blank') {
$(colour).show();
} else {
$(colour).hide();
}
if (mass.val() === 'Light') {
$(textureColour).show();
} else {
$(textureColour).hide();
}
}).trigger('change');
colour.change(function() {
if ((mass.val() === 'Medium') || (mass.val() === 'Heavy')) {
$(textureColour).show();
} else {
$(textureColour).hide();
}
}).trigger('change');
});
JSFiddle

So, I guess that you want something like this
$(function() {
var mass = $('#mass');
var colour = $('#colour');
var textureColour = $('#textureColour');
mass.change(function() {
if (mass.val() != 'Blank') {
$(colour).show();
$(colour).change();
} else {
$(colour).val('Blank');
$(textureColour).val('Blank');
$(colour).hide();
$(textureColour).hide();
}
});
colour.change(function() {
if ((mass.val() === 'Medium') || (mass.val() === 'Heavy') && colour.val() !== 'Blank') {
$(textureColour).show();
} else {
$(textureColour).hide();
}
});
});
#colour {
display: none;
}
#textureColour {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="mass" name="mass">
<option value="Blank" selected>--</option>
<option value="Light">Light</option>
<option value="Medium">Medium</option>
<option value="Heavy">Heavy</option>
</select>
<select id="colour" name="colour">
<option value="Blank" selected>--</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
</select>
<select id="textureColour" name="textureColour">
<option value="Blank" selected>--</option>
<option value="Orange">Orange</option>
<option value="Purple">Purple</option>
<option value="Black">Black</option>
</select>
</form>
Hope it helps :)

Maybe you just forget to write $(colour).hide(); and $(textureColour).hide(); instead of $(colour).hide; and $(textureColour).hide;.
EDIT
I had to change complete your code. I think this is what you are looking for.
$(function() {
var mass = $('#mass');
var colour = $('#colour');
var textureColour = $('#textureColour');
mass.change(function() {
if(mass.val() == 'Blank'){
colour.hide();
textureColour.hide();
}else{
colour.show();
if(colour.val() != 'Blank') textureColour.show();
}
if(mass.val() == 'Light') textureColour.hide();
}).trigger('change');
colour.change(function() {
if(colour.val() == 'Blank') return textureColour.hide();
if('Medium,Heavy'.split(',').indexOf(mass.val()) != -1){
textureColour.show();
}
}).trigger('change');
});

I updated the javascript and now it is functioning how I wanted it too:
$(function() {
var mass = $('#mass');
var colour = $('#colour');
var textureColour = $('#textureColour');
mass.change(function() {
if (mass.val() != 'Blank') {
$(colour).show();
$(colour).change();
} else {
$(colour).val('Blank');
$(textureColour).val('Blank');
$(colour).hide();
$(textureColour).hide();
}
});
colour.change(function() {
if (((mass.val() === 'Medium') && colour.val() !== 'Blank') || ((mass.val() === 'Heavy') && colour.val() !== 'Blank')) {
$(textureColour).show();
} else {
$(textureColour).hide();
}
});
});
JSFiddle