I really don't get why my check-box being clicked doesn't prompt my JS as well. I'll write the code and explain a little more in depth what's happening.
Here's my header (in-case I'm linking the wrong files):
<head>
<link rel='stylesheet' href='reset.css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel='stylesheet' href='Vector Add.css'/>
<script src='Vector Add.js'></script>
</head>
Here's the checkbox itself:
<div id='gridButton'>
<form>
<input type="checkbox" id="gridCheck" value="showGrid"> Show Grid
</form>
</div>
Here's the first line of code for the table (The table is large and there's really no value in linking all that extra code):
<table id="gridTable" style="position:absolute">
Here's the JS:
$(document).ready(function(){
if($('#gridCheck').is(':checked')===true){
$('#gridTable').show('fast');
} else {
$('#gridTable').hide('fast');
};
});
Essentially I have this graph and I want the user to be able to generate a grid whenever they click the "Show Grid" check-box and for it to go away when the check-box isn't selected. But for some reason it's not working. There are no errors but when I bring up the dev tool it's showing that the JS isn't realizing whether or not the buttons being clicked. I don't know what to do as I've been grappling with this for the past couple hours and nothing seems to work. Please help out! Thanks in advance!
You need to bind the click event to the checkbox so it is triggered on every check on and off.
$(document).ready(function(){
$('#gridCheck').on('click', function(){
if ($(this).is(':checked')){
$('#gridTable').show('fast');
} else {
$('#gridTable').hide('fast');
}
});
});
Why watch clicks when you can watch change?
$(document).ready(function(){
$('#gridCheck').on('change', function(){
$('#gridTable').fadeToggle("fast");
});
});
First, default the checkbox to be CHECKED if the grid will be displayed on page load:
<input type="checkbox" id="gridCheck" value="showGrid" checked/> Show Grid
Related
I have a tiny issue if anybody can help... I am trying to implement a form, so when the page loads the textbox is disabled. If the user wishes to amend information they first have to press a button which will enable the text box.
<input id="text" type="text" disabled="disabled">
<br />
<button>Enable</button
So I have a basic textbox which is disabled. Then an event that should enable the textbox...
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#text").attr("disabled","false");
});
});
</script>
I can get this working when the textbox is not initially disabled and I want to disable it, though I can not get it working the other way round - when it is disabled and I want to enable it.
Can anyone point me in the right direction?
Hi i have created a jsfiddle for you see the working example...
you should use removeAttr instead of attr
code:-
$(document).ready(function(){
$("button").click(function(){
$("#text").removeAttr("disabled");
});
});
link:-http://jsfiddle.net/L7S37/15/
You are giving boolean value as String
Use this
$("#text").attr("disabled",false);
instead of
$("#text").attr("disabled","false");
DEMO
Or you can use this, Even the last answer by Mr Soni is correct.
$(document).ready(function(){
$("button").click(function(){
$("#text").prop('disabled', false);
});
});
I'm using the following code to test for "if" a checkbox is checked on page load.
If it is, then a certain additional field will be shown (called myfield):
<style>
#myfield {
display: none;
}
</style>
<input type="checkbox" id="mycheckbox" name="mycheckbox" />
<input type='text' id='myfield' name='myfield' />
<script>
if ($("#mycheckbox").is(":checked")) {
document.getElementById("id").style.display="block";
}
</script>
However, this only works when the page loads and the checkbox is already checked. It doesn't work live when the box isn't checked on page load, and you go to click the box. I want the hidden field to show up right away when the box is "checked" without the page having to reload. I then want myfield to hide right away when the box is unchecked.
Can any anyone point out the better/proper way to do this?
Additionally:
Of note: I do know how to do this in CSS using labels, but I need to use javascript other times.
Here's what works fine in modern browsers using just CSS: http://jsfiddle.net/3KTC3/
Here's that CSS only jsfiddle code:
<style type="text/css">
.label-for-check {
display:none;
}
.check-with-label:checked + .label-for-check {
display:block;
}
</style>
<div>
<input type="checkbox" id="check" class="check-with-label" />
<label for="check" class="label-for-check">
<br /><br />MyField<br />
<input type='text' id='myfield' name='myfield' size='10' />
</label>
<div>
You need to attach a change event handler. Your posted code only executes when page is loaded, it doesn't watch over your element's state.
Here's a jQuery equivalent to your CSS version with classes and adjacent selector:
$('.check-with-label').change(function() {
$(this).next().toggle(this.checked);
}).change();
Fiddle
Explanation: this references the checkbox being clicked, get the next element (equivalent to your CSS + selector) and toggle its display based on the checked state of the checkbox.
Another version that works only with your 2 given IDs:
$('#mycheckbox').change(function() {
$('#myfield').toggle(this.checked);
}).change();
Fiddle
Note that your CSS version is compatible with all desktop browsers including IE7 and above. Consider whether it is necessary to use JS for this.
edit: You have to trigger the change handler after attaching it, so if the checkbox is already checked when the page is loaded, the triggered handler will display the field.
Your problem is that jQuery will only check one time (when you load the site) if your checkbox is checked.
The change handler will fire every time the user changes the checkbox, if it is cheked it will show #myfield
Do something like this:
$('#mycheckbox').change(function() {
if ($(this).is(":checked")) {
$('#myfield').show()
}
});
$(document).ready(function(){
if($("#mycheckbox").is(":checked")) $('#myfield').show();
$('#mycheckbox').on('change', function(){
if($(this).is(":checked")) {
$('#myfield').show();
} else {
$('#myfield').hide();
}
})
});
I have a problem with javascript. I have downloaded a rating star plugin , this one to be exact: http://www.fyneworks.com/jquery/star-rating/#tab-Testing
I have multiple things to rate on one page, so i thought i could use an onclick to send it to a function, that sends it to my database with ajax. The problem is, when a rating star is clicked nothing happens, ive tried it on a regular submit button and the function gets executed.
Here is the code :
<script type="text/javascript">
function postform(){
alert('Thing is clicked');
};
</script>
And the star is actually a radio button:
<input name="adv1" type="radio" class="star {split:4}" value="0.50" onclick="postform()"/>
I can't see what is wrong with the code, because when i test it on a regular button like this :
<input type="submit" value="testbutton" onclick="postform()"/>
It gives me the alert Thing is Clicked.
Somehow the star doesn't like the onclick stuff..
Ive tested it in IE, Chrome and FF, nothing ever happens
could someone help me out here?
Thanks alot!
Edit:
As requested by Lukas , i have this in my head :
<script type='text/javascript' src='jquery.min.js'></script>
<script src='jquery.MetaData.js' type="text/javascript"></script>
<script src='jquery.rating.js' type="text/javascript"></script>
That library is handling the onclick event of the radio button for you, so you cannot handle it by adding an attribute onclick to the input element.
According to their documentation you need to put some code like this in a script:
$('.auto-submit-star').rating({
callback: function(value, link){
alert(value);
}
});
Then add the class auto-submit-star to the class list of your radio button:
<input name="adv1" type="radio" class="auto-submit-star {split:4}" value="0.50" onclick="postform()"/>
I have created a Zend based php application.
I am looking for a simple way to create a popup or hoover-over help that I can use to to provide user help for the fields that the user should enter.
I guess I need javascript, and for the Zend form elements some decorator. But I have not been able to figure out how it should work. Maybe I need some CSS as well?
Does anyone have an example.
kind regards,
Vincent
you may use the jquery plugin for validation, which would prevent the form from submitting until first level checks have been passed. You find further information on the documentation page of jquery. But never trust those checks. You should always validate user input in the backend
http://docs.jquery.com/Plugins/Validation
or you use this, based on jquery
<!DOCTYPE html>
<html>
<head>
<title>Form Info</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(':input.form-input').live('focus', function(){ //get input field
$(this)
.closest("div") //get up to div element
.find(".form-info") //and search for corresponding form-info class to that input field
.show(); //show it
}).live('blur', function(){
//once you leave the input field you might to some things
//...
//or just remove the element
$(this)
.closest("div") //get up to div element
.find(".form-info") //and search for corresponding form-info class to that input field
.hide(); //hide it
});
});
</script>
</head>
<body>
<div>
<input type="text" name="blub" value="" class="form-input" />
<span class="form-info" style="display:none;">my info to the customer</span>
</div>
</body>
</html>
I think you are looking for a tool tip for your controls.
Check this out jQuery Tooltip Plugin Demo
or this jQuery tools: tool tip
I am using the following code to make a custom checkbox with my own images and it works but it's using a Checkbox and I need to use Radio buttons.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#moreinfo").change(function() {
if(this.checked) {
$(this).prev().attr("src", "checkbox_unchecked.gif");
} else {
$(this).prev().attr("src", "checkbox_checked.gif");
}
});
});
</script>
Next...here's the HTML:
<label for="moreinfo">
<img src="checkbox_unchecked.gif"/>
<input name="moreinfo" type="checkbox" id="moreinfo" style="display:none">
</label>
If it a question of changing from checkbox to radio type or does the jquery need changing too?
How do I go about this?
Change the type="checkbox" to type="radio" (and add some more radio buttons for testing, grouping them via the name attribute, they may not have the same id as IDs are unique!). Then, you also need to handle the click event of the replacement images.
But actually, that's going beyond your original question, which you could have solved by simply trying it out. ;)
A Radio Button uses also the attribute checked. So you can switch the element without changing the script (perhaps the gifs).
But your script will never run, because your checkbox/radio button is not displayed.
So you need some functionality to change the status when clicking the image.