I'm passing values from one page to another by posting them and then putting them in to hidden fields on the next page. I've tried using the initial values and that doesn't work either, so my assumption is that it's to do with the jquery not checking for initial values. This is what I want to run:
function check() {
var Q1 = $("#question1").val();
if (Q1 == 'yes') {
$(".A1").css("display", "block");
} else {
$(".A1").css("display", "none");
}
Where #question1 is the ID of the field populated from the previous page, but how do I get the check function to run when the page has loaded? I've tried adding:
<script type="text/javascript">
check();
</script>
To the bottom of the page with no success, the only way it works at the moment is by clicking a button with this applied:
$(".theanswer").click(function() {
check();
return false;
});
I'm sure there's probably a simple way i'm unaware of so any help is much appreciated.
Cheers
Your check() function uses jQuery to retrieve elements. Because of this, you need to run the function after the DOM has been loaded. To do that, place the call to check() within a DOM ready event handler:
<script type="text/javascript">
$(function() {
check();
});
</script>
Also, you can simplify the check() function:
function check() {
$('.A1').css('display', $('#question1').val() == 'yes' ? 'block' : 'none');
}
Warp it the call to check function in document.ready.
<script type="text/javascript">
$(document).ready(function(){
check();
})
</script>
Just create a js file and link it you your html page
JS File
$(document).ready(function(){
check();
});
function check()
{
var Q1 = $("#question1").val();
if (Q1 == 'yes')
{
$(".A1").css("display", "block");
}
else
{
$(".A1").css("display", "none");
}
}
Html link
<script type="text/javascript" language="javascript" src="yourjsfilename.js"></script>
Related
I would like to display a div which is by default is hidden, if checkbox value is "Yes". here is my html code
<div class="bestsell_wrapper">
<div style="display:none;" itemprop="best-sell" class="best-sell"></div>
<input type="checkbox" class="bestsell_chkbox" name="bestsellchk_box"
value="<%=getCurrentAttribute('item','custitem_sumisho_overlay1')%>" style="display:none;" />
</div>
There are multiple items and for which the checkbox value is "Yes" i want to display div having class name "best-sell".This jquery code i have tried but its not working
<script type="text/javascript">
$(".bestsell_chkbox").each(function(){
if ($("this").val().trim() == "Yes")
{
$(".best-sell").css("display", "block");
}
});
</script>
Simply change your jQuery to:
$(".bestsell_chkbox").each(function(){
var $that = $(this);
if ($that.val().trim() == "Yes") {
$that.prev(".best-sell").css("display", "block");
}
})
Hi please do the following
if($(this).val().trim() == "Yes"){
Use this:
$("input.bestsell_chkbox[type='checkbox']").each(function () {
if ($(this).attr("checked") !== "checked") {// do your stuff here}
});
You have a few mistakes in your Script. If you want this to show only checkboxes on load this is the code that will get it done.
$(".bestsell_chkbox").each(function(){
if ($(this).val().trim() == "Yes"){
$(".bestsell_chkbox").css("display", "block");
}
});
Your code was trying to show div but your div is already visible. Your checkbox was hidden. That is why I changed the class inside if clause
Use This Code
<script type="text/javascript">
$(document).ready(function () {
$(".bestsell_chkbox").each(function(){
if ($(this).attr("checked"))
{
$(this).closest('.best-sell').css({'display':'block'});
}
});
});
</script>
is there a way to do in javascript such that if I check a few checkboxes as a condition, one of the checkbox will be check. Currently here's my logic for the codes but it cant work.
$(document).ready( function a()
{
if ( $('#condition1' && $('#condition2').is(':checked'))
{
$('#checkbox1').attr('checked', true);
}
});
Also, is it possible to put a class in the checkbox to do the check function instead of id?
You script is executed on document ready. After the execution is won't react to any action you take. In order to accomplish what you want, you need to run the script every time a check box is clicked.
$(document).ready( function(){
$('input[type="checkbox"]').click(function(){
if ( $('#condition1').is(':checked') && $('#condition2').is(':checked')){
$('#checkbox1').prop('checked', true);
}else{
$('#checkbox1').prop('checked', false);
}
});
});
http://jsfiddle.net/CaZ7j
Your need to use a change handler
jQuery(function ($) {
var $checks = $('#condition1, #condition2').change(function () {
$('#checkbox1').prop('checked', $checks.is(':checked'));
})
});
Demo: Fiddle
I have a simple html5 page that renders a table with several rows. On two of the rows I gave a button that I want to act as a toggle button to show/hide a couple of other rows each.
The table is rendered intitally will all rows then I have a function that hides the 4 columns and sets the buttons to have the correct symbol.
When I run the page all the rows are visible... the window.load function does not run. I even tried document.ready and no joy. The toggle buttons once the inital click hides the rows functions correctly.
My code is...
<script type="text/javascript">
function toggleRetail() {
if ($('#but_RToggle').val()=="+"){
$('#but_RToggle').val("-");
$('#qretail').show("slow");
$('#hretail').show("slow");
} else {
$('#but_RToggle').val("+");
$('#qretail').hide("fast");
$('#hretail').hide("fast");
}
}
function toggleWholesale() {
if ($('#but_WToggle').val() == "+") {
$('#but_WToggle').val("-");
$('#qwholesale').show("slow");
$('#hwholesale').show("slow");
} else {
$('#but_WToggle').val("+");
$('#qwholesale').hide("fast");
$('#hwholesale').hide("fast");
}
}
$(window).bind("load", function () {
$('#but_RToggle').val("+");
$('#qretail').hide();
$('#hretail').hide();
$('#but_WToggle').val("+");
$('#qwholesale').hide();
$('#hwholesale').hide();
});
</script>
Any help appreciated.
Make sure that the jquery script tag is before this script block.
For loading, any of these:
$(document).ready(function(){
//code
});
$(function(){
//code
});
window.addEventListener('load', function(){
//code
},false);
I'm using this code to hide a div container where I'm placing text dynamically.
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
The problem I have is that I want to trigger the show div from a javascript function instead of a predefined click event. I've found this example which mateches the function I want, but I'm not sure how to trigger it from javascript instead of a click function.
JSFiddle Here
just hide the div using css
display:none;
.slidingDiv{
display:none;
}
and show it when ever you want using
.show()
$(".slidingDiv").show();
edit:
after you question edit, you can always trigger the click event programatically like
function yourFunction(){
$(".show_hide").click();
}
At any point in your script you can call the jQuery object with your div's id/class and run the show() function. i.e.
var javascript = "cool";
var foo = "I'm doing stuff";
var bar = "And some more stuff";
if (javascript === "cool")
jQuery(".slidingDiv").show();
else
$(".slidingDiv").show();
<script>
$(document).ready(function(){
$("input[type='file']").on("change", function () {
if(this.files[0].size > 1000000) //file size less than 1MB {
{
$("#fileAlert").show(); //calling a bootstrap 4 alert
}
$(this).val('');
}
});
});
</script>
I have a basic JQuery script that changes a few divs when you click - thus showing them - via toggle.
<script type="text/javascript">
$('#content_display').click(function() {
$(this).toggleClass('selected');
$('#content_display_selector_container').toggle();
});
</script>
However - to call the even you need to click only on the first main div with the ID of "content_display".
My question is this: how can I hide these changes using JQuery if the user also clicks on BODY - i.e. if you click away, the divs go back to their original hidden state?
Thanks for helping a JQuery clutz!
Something like this should work:
$('body').click(function(e) {
if (!$(e.target).is('#content_display')) {
$('#content_display').removeClass('selected');
$('content_display_selector_container').hide();
}
});
Hey - found a way to do this - does anyone think there's a better way?
Here's the result:
<script type="text/javascript">
var mousetrap = false;
$('body').click(function() {
if (mousetrap == false) {
$('#content_display').removeClass('selected');
$('#content_display_selector_container').hide();
}
});
$('#content_display').hover(function() {
mousetrap = true;
},function(){
mousetrap = false;
});
$('#content_display').click(function() {
$(this).toggleClass('selected');
$('#content_display_selector_container').toggle();
});
</script>