Develop Reference

Shorten or simplify jQuery logic

Are there any possible method to shorten the below jQuery code section?
I may need to repeat using the same logic for the other 8 select boxes. Many thanks.
Code
$('#select_client').on('change', function() {
var val = this.value;
/* Possible to shorten this section? I have more cases like this */
if (val == 'OTHER') {
$('#input_client').addClass('show');
$('#input_client').removeClass('hide');
$('#input_client').val('');
$('#input_client').focus();
} else {
$('#input_client').addClass('hide');
$('#input_client').removeClass('show');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select class="form-control" id="select_client" name="select_client">
<option value="1">Company A</option>
<option value="2">Company A</option>
<option value="3">Company A</option>
<option value="4">Company A</option>
<option value="OTHER">Other</option>
</select>
<input id="input_client" type="text" class="form-control hide" placeholder="Please provide Client name" />

please try this
$('#select_client').on('change', function() {
var val = this.value;
/* Possible to shorten this section? I have more cases like this */
if(val=='OTHER'){
$('#input_client').addClass('show').removeClass('hide').val('').focus();
} else {
$('#input_client').addClass('hide').removeClass('show');
}
})

$('#select_client').on('change', function() {
$input = $('#input_client')
.toggleClass('show',$(this).val() ==='OTHER')
.removeClass('hide',$(this).val() !=='OTHER');
if($(this).val()==='OTHER'){
$input.val('').focus();
}
});
this is shorter... And you can add some condition to make it work the same function with multiple select-input couple ;)

Since you are using jQuery, you can chain functions to reduce redundancy for typing selector.
You can also look into .toggleClass if you wish to add/remove a class based on condition.
Also, instead of fetching the element again and again, you can save it in a variable and use this variable everywhere.
$('#select_client').on('change', function() {
var valid = this.value === 'OTHER';
var $input = $('#input_client');
$input
.toggleClass('show', valid)
.toggleClass('hide', !valid);
if (valid) {
$input
.val('')
.focus();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select class="form-control" id="select_client" name="select_client">
<option value="1">Company A</option>
<option value="2">Company A</option>
<option value="3">Company A</option>
<option value="4">Company A</option>
<option value="OTHER">Other</option>
</select>
<input id="input_client" type="text" class="form-control hide" placeholder="Please provide Client name" />

You can just use .toggle to toggle the display of your input according to conditionals.
Also if you are planning to have multiple select and input boxes to that, you should use classes instead of id.
Targeting id is not a good idea here if you have same multiple elements in your webpage.
In the below example I have used .input_client class as a selector.
$('#select_client').on('change', function() {
var val = this.value;
/* Possible to shorten this section? I have more cases like this */
if (val == 'OTHER') {
$(this).next(".input_client").toggle("display");
$(this).next(".input_client").val('');
$(this).next(".input_client").focus();
}
})
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="form-control" id="select_client" name="select_client">
<option value="1">Company A</option>
<option value="2">Company A</option>
<option value="3">Company A</option>
<option value="4">Company A</option>
<option value="OTHER">Other</option>
</select>
<input id="input_client" type="text" class="input_client form-control hide" placeholder="Please provide Client name" />

Div class not showing on dropdown select?

Good day
I require some aid with this issue.
I have a "Location1" dropdown with about 10 options. I then have a div class I would like to show if the user selects "Other".
Code:
<script>
$(document).ready(function(){
$("#Location1").on('change' function(){
if (this.value == 'Other') {
$(".otherlocation1").show();
}
else {
$(".otherlocation1").hide();
}
});
});
</script>
It's supposed to hide div class "otherlocation1" on by default, and then show "otherlocation1" based on a selection from the "Location1" text box.
Only problem is, it's not working. I've tried numerous other ways and can't get it working.
Any help would be appreciated.

You are missing a , after change. Try this:
$(document).ready(function() {
$("#Location1").on('change', function() {
if (this.value == 'Other') {
$(".otherlocation1").show();
} else {
$(".otherlocation1").hide();
}
});
});
.otherlocation1{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='Location1'>
<option disabled selected>Select an option</option>
<option value='Other'>Other</option>
<option value='Other 2'>Other 2</option>
<option value='Other 3'>Other 3</option>
<option value='Other 4'>Other 4</option>
<option value='Other 5'>Other 5</option>
</select>
<p class='otherlocation1'>otherlocation1</p>

In Jquery the on function takes two parameters.
events
handler
So when you call the on function you pass the event and the handler separated by a comma ',' . Refer this for more info.
Thus refactor your line as follows
$("#Location1").on('change', function()

Jquery hide dropdown list not working

Hi I have a small question.
I have 2 select form , and i want when i choose rental the employed type become hidden and here's my code :
<label>Type</label>
<select id="Type-option" class="form-control">
<option value="employed">Employed</option>
<option value="rental">Rental</option>
</select>
<label>Employed Type</label>
<select id="employedType-option" value="employedType-option" class="form-control">
<option value="fulltime">FULLTIME</option>
<option value="parttime">PARTTIME</option>
</select>
$(function() {
var select = $('#Type-option');
select.on('change', function() {
if (select.val() == "rental") {
$('#employedType-option').hide();
} else {
$('#employedType-option').show();
}
});
});
any idea ?

Few suggestions here
1. Never mix your mark up with your javascript.Consider binding events at javascript
2. I have modified your markup a bit,because when you hide employeetype u need to hide the label too
check the following snippet
$(document).ready(function(){
var select = $('#Type-option');
var employeeTypeOption=$('#employedType-option');
var employedType=$('#employedType');
select.on('change', function() {
var selectOption=select.find('option:selected').val();
if (selectOption == "rental") {
employeeTypeOption.hide();
employedType.hide();
} else {
employeeTypeOption.show();
employedType.show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Type</label>
<select id="Type-option" class="form-control">
<option value="employed">Employed</option>
<option value="rental">Rental</option>
</select>
<span id="employedType">
<label>Employed Type</label>
<select id="employedType-option" value="employedType-option" class="form-control">
<option value="fulltime">FULLTIME</option>
<option value="parttime">PARTTIME</option>
</select>
</span>
Hope this helps

wrong syntax.
check $(document).on.('action','selection',function(){}); signature.
Tyr with below code
$(document).on('change','#Type-option', function() {
if ($(this).val() == "rental") {
$('#employedType-option').hide();
} else {
$('#employedType-option').show();
}
});

I am not sure but i guess you have missed one of these otherwise your code is working fine
Add reference to jquery library
Wrap your jquery code inside script tag.
<script>
$(function() {
var select = $('#Type-option'); select.on('change', function() {
if (select.val() == "rental") {
$('#employedType-option').hide();
}
else {
$('#employedType-option').show();
}
});
});
</script>

I think this is what you want. try the working demo
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<label>Type</label>
<select id="Type-option" class="form-control">
<option value="employed">Employed</option>
<option value="rental">Rental</option>
</select>
<label id="emp">Employed Type</label>
<select id="employedType-option" value="employedType-option" class="form-control">
<option value="fulltime">FULLTIME</option>
<option value="parttime">PARTTIME</option>
</select>
<script type="text/javascript">
$("#Type-option").on('change',function(){
var theVal = $(this).val();//get the selected value
if(theVal == "rental"){
$("#emp").hide();
$("#employedType-option").hide()
}
else{
$("#emp").show();
$("#employedType-option").show()
}
})
</script>
</body>
</html>

Hide div when dropdown value is 0

I have a formula page where the dropdowns has a default value = 0.
I would like it to hide a div when the value is = 0, even when the page is loaded.
I believe i should use javascript, but should i use jQuery?
i tried with and without jQuery, but couldn't get my code to work.
This is the dropdown
<select class="products-dropdown" name="lease-product" id="sel-lease-product" onchange="hideDiv">
<option value="0"><?php _e('Select product', 'wp-woo-leasing'); ?></option>
This is the div i want to hide.
<div id="product-description" class="product-description"></div>
i tried this JS
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#sel-lease-product").change(function() {
if(jQuery(this).find("option:selected").val() == 0) {
jQuery(".product-description").hide();
}
});
});
</script>
and JS
function hideDiv(elem) {
if(elem.value == 0){
document.getElementById("product-description").style.display = "none";
} }
My whole code looks like this http://pastebin.com/WTFu3Hte
what am i doing wrong?

Try this code:
$(document).ready(function() {
$("#sel-lease-product").change(function() {
if($(this).val() === "0") {
$(".product-description").hide();
}else{
$(".product-description").show();
}
});
$("#sel-lease-product").change();
});
If you want execute the code when the page is load remember to run the event change your select
Result: https://jsfiddle.net/cmedina/mwz5udwz/

Invoke the change handler initially to achieve expected results on page load using jQuery.change().
jQuery.toggle could be used instead of using both jQuery.show and jQuery.hide
Note: Use either of JavaScript or jQuery, do not use them together!
$(document).ready(function() {
$("#sel-lease-product").change(function() {
$(".product-description").toggle(this.value != 0);
}).change();
//-^^^^^^^^
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select class="products-dropdown" name="lease-product" id="sel-lease-product">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div class="product-description">Content here....</div>

If you need to check the onchange() value that is from the select tag you can prefer two methods
Directly write the onchange() function to the select tag itself
Invoke the function with the help if select ID so that you can write the on change over to the script itself.
Method One:
HTML:
<select class="products-dropdown" name="lease-product" id="sel-lease-product" onchange="hide_function(this.value);">
<option value="">Please Select</option>
<option value="0">Zero</option>
<option value="1">One</option>
</select>
<div id="product-description" class="product-description">product-description</div>
JS:
function hide_function(a)
{
if(a=='0')
{
$('#product-description').hide();
}
else
{
$('#product-description').show();
}
}
Method Two:
Directly calling the on change function in the script file itself.
$(document).ready(function() {
$("#sel-lease-product").change(function() {
if($(this).val() === "0") {
$(".product-description").hide();
}else{
$(".product-description").show();
}
});
$("#sel-lease-product").change(); //Again invoking the change function on-load of the page
});

$(document).ready(function() {
$("#sel-lease-product").change(function() {
if($(this).val() == 0) {
$(".product-description").hide();
}else{
$(".product-description").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="products-dropdown" name="lease-product" id="sel-lease-product">
<option value="">select</option>
<option value="0">0</option>
<option value="1">1</option>
</select>
<div id="product-description" class="product-description">Hide if 0</div>

Well your code will never reshow the value so you need to do if/else type of check. The nice thing is jQuery has it built in so you can just call toggle with a boolean.
Also there is not need to look for the selected option, val() will do that for you. And to make sure the element is in the correct state when the page loads, you want to trigger the change event.
$("#sel-lease-product").on("change", function() {
$(".product-description").toggle($(this).val() !== "0");
}).trigger("change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="sel-lease-product">
<option value="0">Pick</option>
<option value="1">FOO</option>
</select>
<div class="product-description">Description</div>

Try this :
$(document).ready(function() {
$("#sel-lease-product").on("change",function(){
if($(this).val() == 0) {
$(".product-description").hide();
}
}).change();
})
<select class="products-dropdown" name="lease-product" id="sel-lease-product">
<option value="1">1</option>
<option value="0">0</option>
</select>
<div id="product-description" class="product-description">product-description</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Hide a div upon option change in select dropdown in HTML using jQuery

To get straight to the point here's I want to accomplish. I want to hide a certain DIV when a certain <OPTION> in <SELECT> was selected.
Here's my HTML markup:
THE SELECT
<select name="cutoffselect" id="cutoff" class="text ui-widget-content ui-corner-all" style="padding-right: 80px;">
<option value="">Choose One</option>
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="semimonthly">Semi Monthly</option>
<option value="monthly">Monthly</option>
</select>
and the DIV I want to hide if DAILY was selected.
THE PERIOD
<div class="input-group-addon" style="width:20%;" title='Filter By' id = "perioddiv">
<!--PERIOD-->
<label for="period" style="padding-right: 10px;margin-top:7px;" visible="false">Period</label>
<select name="period" id="period" class="text ui-widget-content ui-corner-all">
<option value="">Choose Period</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</select>
<!--PERIOD-->
</div>
I have tried using different query but I cannot do what I want. Here's the query I used but its not functioning and if I may ask for another jQuery suggestion that actually might work the greater. Thanks to all in advance.
HERE'S THE QUERY
<script type="text/javascript">
$("#cutoffselect").change(function(){
$("#perioddiv div:eq(" + $(this).attr("selectedIndex") + ")").show();
});
</script>

this will do it:
<script type="text/javascript">
$(function(){
$("#cutoff").change(function(){
if($(this).val()=='daily'){
$('#perioddiv').hide();
}
else{
$('#perioddiv').show();
}
});
});
</script>

here is your answer.
$('#cutoff').change(function () {
if ($('#cutoff').find(":selected").text() == 'Daily') {
$('#perioddiv').hide();
} else {
$('#perioddiv').show();
}
});
jsfiddle:
http://jsfiddle.net/LNMW3/

Check this Fiddle
Using the ID's you can easily sort this out by using:
$("#selectorID").hide();

try
$("#cutoff").change(function () {
if (this.value == "daily") {
$("#perioddiv").hide();
} else {
$("#perioddiv").show();
}
});
DEMO

try this:
$('#period').change(function(){
// check if "daily" is selected
if($(this).val() == "daily") {
$('#perioddiv').hide();
}
});

Check if the selected option is daily and then hide the div.
$(document).ready(function(){
$('#cutoff').change(function(){
if($('#cutoff option:selected').val() == 'daily')
{
$('#perioddiv').hide();
}
else
{
$('#perioddiv').show();
}
});
});
DEMO FIDDLE

To hide div with id=perioddiv when daily option selected, you can try below jquery:
<script type="text/javascript">
// bind change event using '#cutoff' as select id="cutoff"
$("#cutoff").change(function(){
// hide if selected value is "daily"
if($(this).val() == "daily")
$("#perioddiv").hide();
else
$("#perioddiv").show();
});
</script>