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>
Related
i got one more doubt im close to the answer but not getting it to worked, Actually i have the a default input text & default drop-down(drop-down which consist of west Bengal & others). NOW if some one click's on the west Bengal state under drop-down then the default input should get hide and the west Bengal drop-down should get displayed.Below is the code what i have tried.can any one please guideme a bit new to jQuery.
thanks!!
<div class="col-sm-4">
<div class="form-group">
<select id="state" name="state" class="form-control" required="true" autocomplete="false" style="margin-bottom:10px">
<option value="" disabled="" selected="">Select State</option>
<option value="WestBengal">West Bengal</option>
<option value="Others">Others</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group otherdistricts">
<input class="form-control form-control-lg" type="text" name="other_district" id="other_district" placeholder="Enter Your District" autocomplete="false">
</div>
<div class="westbengaldistrict" style="display:none">
<select class="form-control" name="district" id="district" autocomplete="false">
<option value="" selected disabled>Select Your District</option>
<option value="Alipurduar">Alipurduar</option>
<option value="Bankura">Bankura</option>
<option value="PaschimBardhaman">Paschim Bardhaman</option>
<option value="PurbaBardhaman">Purba Bardhaman</option>
<option value="Birbhum">Birbhum</option>
<option value="CoochBehar">Cooch Behar</option>
<option value="Darjeeling">Darjeeling</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="DakshinDinajpur">Dakshin Dinajpur</option>
<option value="Hooghly">Hooghly</option>
<option value="Howrah">Howrah</option>
<option value="Jalpaiguri">Jalpaiguri</option>
<option value="Jhargram">Jhargram</option>
<option value="UttarDinajpur">Uttar Dinajpur</option>
<option value="Kalimpong">Kalimpong</option>
<option value="Malda">Malda</option>
<option value="PaschimMedinipur">Paschim Medinipur</option>
<option value="PurbaMedinipur">Purba Medinipur</option>
<option value="Murshidabad">Murshidabad</option>
<option value="Nadia">Nadia</option>
<option value="North24Parganas">North 24 Parganas</option>
<option value="South24Parganas">South 24 Parganas</option>
<option value="Purulia">Purulia</option>
</select>
</div>
</div>
<script>
$(document).ready(function(){
$("#state").on("select",function() {
if ($(this).val() === "WestBengal") {
$(".otherdistricts").hide();
$(".westbengaldistrict").show();
}
});
});
</script>
You have errors in the jquery code. Use the below code, it is working fine and tested.
<script>
$(document).ready(function(){
$("select").change(function(){
$( "select option:selected").each(function(){
//enter bengal districts
if($(this).attr("value")=="WestBengal"){
$(".enterotherstates").hide();
$(".enterbengaldistricts").show();
}
//enter other states
if($(this).attr("value")=="Others"){
$(".enterbengaldistricts").hide();
$(".enterotherstates").show();
}
});
});
});
</script>
Your closing parentheses and brackets are the other way around in your javaScript code.
Should be like this
$(document).ready(function () { code here });
But you have
$(document).ready(function () { code here )};
Try this
<script>
$(document).ready(function () {
$("select").change(function () {
$("select option:selected").each(function () {
//enter bengal districts
if ($(this).attr("value") == "WestBengal") {
$(".enterotherstates").hide();
$(".enterbengaldistricts").show();
}
//enter other states
if ($(this).attr("value") == "Others") {
$(".enterbengaldistricts").hide();
$(".enterotherstates").show();
}
});
});
});
</script>
$(document).ready(function () {
$("select").change(function () {
if ($(this).val() === "WestBengal") {
$(".enterotherstates").hide();
$(".enterbengaldistricts").show();
}
else {
$(".enterbengaldistricts").hide();
$(".enterotherstates").show();
}
});
});
Your code has error. Your code is:
$(document).ready(function())};
Change to:
$(document).ready(function()});
Since select is a form element you can right use val() method instead of $(this).attr("value") to get value.
You have several issues in your code. First of all, your closing brackets are wrong. You should have )}; instead of });
Your inputfield has display: none, you should remove that, because $(".enterotherstates").show(); won't let it appear, only the parent element.
Next, you don't need to iterate with each. It's easier and faster to use $(this).
$(document).ready(function() {
$("select").change(function() {
if ($(this).val() === "WestBengal") {
$(".enterotherstates").hide();
$(".enterbengaldistricts").show();
} else {
$(".enterbengaldistricts").hide();
$(".enterotherstates").show();
}
});
});
Optional performance advice
you could make your code faster by caching your jQuery objects and reuse them. So the browser doesn't have to search the complete HTML again and again:
$(document).ready(function() {
var otherStates = $(".enterotherstates");
var bengal = $(".enterbengaldistricts");
$("select").change(function() {
if ($(this).val() === "WestBengal") {
otherStates.hide();
bengal.show();
} else {
bengal.hide();
otherStates.show();
}
});
});
answer to your updated question
$(document).ready(function(){
$(".westbengaldistrict").hide(); // first hide the select
$("#state").on("change",function() {
if ($(this).val() === "WestBengal") {
$(".otherdistricts").hide();
$(".westbengaldistrict").show(); // show on change
}
});
});
Below is the updated jquery code as per the updated question. It is working fine and tested.
$(document).ready(function(){
$("#state").change(function() {
if ($(this).val() === "WestBengal") {
$(".otherdistricts").hide();
$(".westbengaldistrict").show();
}else{
$(".otherdistricts").show();
$(".westbengaldistrict").hide();
}
});
});
I would like to display some text according to what we select.
Here is my select options:
<select onchange=Change(this.value)>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<p></p>
And I would like to apply a function that insert a certain text into the p element according to what option is selected.
Here is the function:
Change(x){
if (x=="1"){$("p").innerHTML ="One cat"}
if (x=="2"){$("p").innerHTML ="Two cats"}
}
And here is a fiddle:
https://jsfiddle.net/tksbkmdj/2/
A few things to notice here:
1- You need to declare the function Change
2- With jQuery you do not do innerHtml, but instead, .html(newtext), for instance.
Here you go:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function Change(x) {
if (x == "1") {
$("p").html("One cat")
}
if (x == "2") {
$("p").html("Two cats")
}
}
</script>
<select onchange=Change(this.value)>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<p>
</p>
If you are using jQuery you can simplify things greatly:
function Change(x){
if (x=="1"){
$("p").text("One cat");
}
if (x=="2"){
$("p").text("Two cats");
}
}
$("select").change(function() {
Change(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<p></p>
Try this code.
The innerHTML is for JavaScript
Try text()or html()
$("p").text("One Cat");
$("p").text("Two Cats");
Or
$("p").html("One Cat");
$("p").html("Two Cats");
you have the following mistakes:
no "function" before "Change"
better to name it "change"
$("p") return a jquery object, you should use "$('p')[0]" or "$('p').html"
the function is not in the global scope, therefore you cannot call it like that
check this https:enter code here//jsfiddle.net/ftb0tmds/
I am trying to display select box when user input some values in the textbox , I tried using onchange property of jquery but its not working.
Below is my code
$(document).ready(function() {
$("#total_enter").change(function() {
$(".gst_sel_wrap").css("display", "block");
});
})
.gst_sel_wrap {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap_box">
<input type="text" name="total_enter" id="total_enter">
<select class="gst_sel_wrap">
<option>GST SLABS</option>
<option value="">0%</option>
<option value="">5%</option>
<option value="">12%</option>
<option value="">18%</option>
<option value="">28%</option>
</select>
</div>
Try using the jQuery keydown method: https://api.jquery.com/keydown/
I also added some code to hide the dropdown in the beginning, so the effect becomes obvious.
$(document).ready(function(){
$(".gst_sel_wrap").hide();
$("#total_enter").keydown(function(){
$(".gst_sel_wrap").show();
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap_box">
<input type="text" name="total_enter" id="total_enter">
<select class="gst_sel_wrap">
<option>GST SLABS</option>
<option value="">0%</option>
<option value="">5%</option>
<option value="">12%</option>
<option value="">18%</option>
<option value="">28%</option>
</select>
</div>
You can use either keyup or keydown or both as I do here:
$(document).ready(function() {
$("#total_enter").on("keyup keydown",function() {
$(".gst_sel_wrap").css("display", "block");
});
})
.gst_sel_wrap {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap_box">
<input type="text" name="total_enter" id="total_enter">
<select class="gst_sel_wrap">
<option>GST SLABS</option>
<option value="">0%</option>
<option value="">5%</option>
<option value="">12%</option>
<option value="">18%</option>
<option value="">28%</option>
</select>
</div>
To achieve this you can use the input event, as it fires when a key is pressed and also when a value is copy/pasted in. You should also check the value of the element to ensure that it isn't empty, as the value can be deleted, when I would assume your select should be hidden again.
Finally, note that you can use toggle() to hide or show the select based on the given value, in a more succinct way. Try this:
$(document).ready(function() {
$("#total_enter").on('input', function() {
$(".gst_sel_wrap").toggle(this.value.trim() != '');
});
})
.gst_sel_wrap {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap_box">
<input type="text" name="total_enter" id="total_enter">
<select class="gst_sel_wrap">
<option>GST SLABS</option>
<option value="">0%</option>
<option value="">5%</option>
<option value="">12%</option>
<option value="">18%</option>
<option value="">28%</option>
</select>
</div>
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()
<select>
<option value='34'>Trees</option>
<option value='13' class='create_sub_category'>Add new sub-category</option>
<option value='24' class='create_sub_category'>Add new sub-category</option>
<option value='57'>Cats</option>
<option value='34' class='create_sub_category'>Add new sub-category</option>
</select>
<script type='text/javascript'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
if (selected(".create_sub_category")) {
alert('hi');
}
</script>
Obviously, there's no such javascript or jQuery function called 'selected' that I used above in my if statement, but could someone help me find something that would do what I'm describing?
$('select').change(function() {
if($('select option:selected').hasClass('create_sub_category'))
{
alert("SELECTED");
}
});
You should put some id/class on that select element.
You can do this:
if($("select option:selected").hasClass("create_sub_category")) {
alert("hi");
}
The key here is: option:selected
No need for jQuery
if(/\bcreate_sub_category\b/.test(select.options[ select.selectedIndex ].className))
//...
jsFiddle