show hide div based on select option value jQuery - javascript

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!

Related

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

Verify values of selctbox using jquery

i'm new to this. I'm using in a html page with 2 selctboxs, one for min price and the other for max price and a hidden input to put on it the combination of the two values of the selectboxs.
<div class="option-bar mini first">
<label><?=__("Min Price")?></label>
<span class="selectwrap">
<select name="min-price" id="pmin" class="search-select">
<option value=""></option>
<option value="1000">$1000</option>
<option value="2000">$2000</option>
<option value="3000">$3000</option>
<option value="4000">$4000</option>
<option value="5000">$5000</option>
<option value="6000">$6000</option>
<option value="7000">$7000</option>
<option value="8000">$8000</option>
<option value="9000">$9000</option>
</select>
</span>
</div>
<div class="option-bar mini">
<label><?=__("Max Price")?></label>
<span class="selectwrap">
<select name="max-price" id="pmax" class="search-select">
<option></option>
<option value="2000">$2000</option>
<option value="3000">$3000</option>
<option value="4000">$4000</option>
<option value="5000">$5000</option>
<option value="6000">$6000</option>
<option value="7000">$7000</option>
<option value="8000">$8000</option>
<option value="9000">$9000</option>
<option value="10000">$10,000</option>
</select>
</span>
</div>
<input type="hidden" id="prix" name="prix" class="sel2" value="" />
and i got this jquery code :
$("#pmin, #pmax").change(function(){
update();
});
function update() {
$("#prix").val($('#pmin').val() + "-" + $('#pmax').val());
}
So what i want to do is when the user select options in the two selectbox, verify if the min price value is lower than the max price value and if not show a message.
Thnx a lot guys.
$("#pmin, #pmax").change(function() {
if ($("#pmin").val() && $("#pmax").val()) { //check if both have values
if (parseFloat($("#pmin").val()) > parseFloat($("#pmax").val())) { //check if valid range
alert('invalid range')
return;
}
}
update();
});
$(".search-select").change(fucntion(){
var max_val = $("#pmax").val();
var min_val = $("#pmin").val();
if(max_val != '' && min_val != '' && max_val < min_val){
alert("Max value is less than Min value.");
}
});
Try this..!!
You should modify the change and update method as shown below:
$("#pmin, #pmax").change(function() {
if ($('#pmin').val() != "" && $('#pmax').val() != "") {
update();
}
});
function update() {
var computedValue = parseInt($('#pmin').val()) - parseInt($('#pmax').val());
if (computedValue < 0) {
alert('Invalid selection.');
}
$("#prix").val(computedValue);
}
Refer the demo.

Jquery select option val

im working in a project that i will have about 10 select boxes with same class and i want to check if ALL of selected boxes are selected with jquery. Here is my html code
<form class="form-horizontal" action="analysis.php" method="post" id="mobileform" >
<select class="form-control selectx" name="phone1">
<option value="" selected>Select phone</option>
<option value="iphone6" selected>Iphone 6</option>
<option value="galaxys5" selected>Galaxy S5</option>
</select>
<select class="form-control selectx" name="phone2">
<option value="" selected>Select phone</option>
<option value="iphone6" selected>Iphone 6</option>
<option value="galaxys5" selected>Galaxy S5</option>
</select>
<button type="submit" name="submit" class="btn btn-success" id="submit"> Submit !</button><br>
And here is my jquery
$(document).ready(function() {
$('form').submit(function(event) {
$(".selectx option:selected").each(function()
{
if($(this).val() === "") {
$('#selecterror').fadeIn(300);
event.preventDefault();
}else{
$('#selecterror').hide();
}
});
});
});
But it doesnt work if you example in 1st selectbox with name phone1 you dont select anything and in selectbox with name phone2 you select a phone.
Sorry for my english
In your case, both select options have to be empty for the validation. You can use .filter to see if any of the select options is empty:
$('form').submit(function(event) {
var empty = $(".selectx option:selected").filter(
function() {
return $(this).val() == "";
});
if(empty.length) {
$('#selecterror').fadeIn(300);
event.preventDefault();
}else{
$('#selecterror').hide();
}
});
DEMO: https://jsfiddle.net/hptqq1tL/

Nested Hide, show javascript not working

I have html code like this,
<select id="select1">
<option value="1">..<option>
..
</select>
<div id="select2" style="display:none;"></div>
<div id="select3" style="display:none;"></div>
If one option is selected, it displays corresponding div. Code I used is
$("#select1").change(function() {
if($(this).val() == 1) {
$("#select2").show();
} else {
$("#select2").hide();
}
if($(this).val() == 2) {
$("#select3").show();
} else {
$("#select3").hide();
}
if($(this).val() == 3) {
$("#select4").show();
} else {
$("#select4").hide();
}
});
If one div is displayed, I again used the same script for another select which shows/hides a textarea.
<div id="select2">
<select id="select4"></select>
<textarea id="select5" style="display:none;"></textarea>
<script>
$("#select4").change(function() {
if($(this).val() == 1) {
$("#select5").show();
} else {
$("#select5").hide();
}
});
</script>
But that textarea is not displaying.
Well, the HTML you show has no option elements in the select, so the select will have no value.
If the HTML is actually different, you should edit your question.
try this, hope it does what you are expecting :
$("#select1").change(function() {
if ($(this).val() == 1) {
$("#select2").show();
} else {
$("#select2").hide();
}
if ($(this).val() == 2) {
$("#select3").show();
} else {
$("#select3").hide();
}
});
$("#select4").change(function() {
if ($(this).val() == 1) {
$("#select5").show();
} else {
$("#select5").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="select1">
<option value="1">1
</option>
<option value="2">2
</option>
<option value="3">3
</option>
</select>
<div id="select3" style="display:none;">div2</div>
<div id="select2" style="display:none;">
<select id="select4">
<option value="1">1
</option>
<option value="2">2
</option>
</select>
<textarea id="select5" style="display:none;"></textarea>
</div>

Change style of select box when Other select box change in html

I am trying to change the CSS property of select box when other select box is change.
When Id=project-type , is changes its value than bgt-hourly and bgt-fixed select box show show accordingly.
if hourly selected than bgt-hourly should show and when it select Fixed than bgt-fixed select options should show.
i tried many time with different codes from stack-overflow but it didn't help me well.
if any one can solve this than I appreciate his/her help.
thanks
I have following Code:
HTML:
<span class="service-tab">
<span class="sub-cat span6">
<label for="project-type">Project Type:</label>
<select class="project-type " id="project-type" >
<option value="hourly">Hourly</option>
<option value="fixed">Fixed</option>
</select>
</span>
<span class="sub-cat span6 " id="bgt-fixed">
<label for="budget">Budget:</label>
<select class="budget " id="budget" required >
<option value="250">$0 - $250</option>
<option value="750">$250 - $750</option>
<option value="5000">$750 - $5000</option>
<option value="5000">$1500 - $5000</option>
<option value="5000">$3000 - $5000</option>
<option value="10000">$5000 - $10000</option>
<option value="10001">$10000 and Above</option>
</select>
</span>
<span class="sub-cat span6" id="bgt-hourly">
<label for="budget-hourly">Budget:</label>
<select class="budget-hourly" id="budget-hourly" required>
<option value="10">$0 - $10</option>
<option value="20">$10 - $20</option>
<option value="50">$20 - $50</option>
<option value="100">$50 - $100</option>
<option value="200">$100 - $200</option>
</select>
</span>
</span>
JS:
<script type="text/javascript">
$(document).ready(function(){
$("#project-type").change(function(){
if($('#project-type').val() == "fixed")
{
$('#bgt-fixed').show();
alert('value 1 (wich refers to Chef) got selected');
}
});
if($(this).val() == "hourly")
{
alert('value 1 (wich refers to Chef) got selected');
}
});
});
Error: you have placed if($(this).val() == "hourly") outside change function.
Try:
$(document).ready(function () {
$("#project-type").change(function () {
if ($('#project-type').val() == "fixed") {
$('#bgt-fixed').show();
alert('value 1 (wich refers to Chef) got selected');
} else if ($(this).val() == "hourly") {
alert('value 1 (wich refers to Chef) got selected');
}
});
});
DEMO
Try this:
$(document).ready(function(){
$("#project-type").change(function(){
if($('#project-type').val() == "fixed")
{
$('#bgt-fixed').show();
$('#bgt-hourly').hide();
$('#project-time').hide();
$('#project-hours').hide();
}
else if($(this).val() == "hourly")
{
$('#bgt-hourly').show();
$('#bgt-fixed').hide();
$('#project-time').show();
$('#project-hours').show();
}
});
});
must not set class or id same for best code practises
$("#project-type").change(function(){}
this should be
$(".project-type").change(function(){}
and
<select class="project-type" id="projects" >
eliminate extra spaces
$(".project-type").change(function(){...}

Categories