I must be missing something obvious here... I can't get .change() to fire on radio buttons? I have the code below live here!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Radio Button jQuery Change</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
console.log("parsed");
$("input[name='rdio']").change(function() {
console.log("changed");
if ($("input[name='rdio']:checked").val() == 'a')
$("output").text("a changed");
else if ($("input[name='rdio']:checked").val() == 'b')
$("output").text("b changed");
else
$("output").text("c changed");
});
</script>
</head>
<body>
<div>
<input type="radio" name="rdio" value="a" checked="checked" /> a <br/>
<input type="radio" name="rdio" value="b" /> b <br/>
<input type="radio" name="rdio" value="c" /> c
</div>
<h3>Output:</h3>
<div id="output"></div>
</body>
</html>
Can anyone see what I've missed?
Thanks,
Denis
You must put the code inside the dom-ready event...
$(document).ready(function(){
// Your code here
});
or else the script gets executed before the HTML-elements have been loaded. Thus, no radioboxes exist.
Your
$("output").text("a changed");
should also be
$("#output").text("a changed");
because it is an id you are matching against.
Related
Can anyone please help me through this....
I have two input fields in my form . One of which is hidden and I want to show it using a button. Now when i tried to show it using onClick() function its not responding...
can anyone give me code snippet to do so....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function show()
{
document.getElementById('passwd').style.display="block" ;
}
</script>
</head>
<body>
<form action="demo.html" >
<input type="text" name="user" />
<br />
<input type="text" id="passwd" name="password" style="display:none;" />
<input type="button" onClick="show()" name="show" value="show" />
<br />
<input type="submit" value="OK" />
</form>
</body>
</html>
plz help
This is because of your <input> declaration:
<input type="button" onClick="show()" name="show" value="show" />
When you call show() JavaScript will attempt to resolve the symbol show first; because you're calling show() from inlined code, the resolution takes place in document, which attempts to resolve the symbol based on the name or id attribute of your input box.
Solutions
Rename the button:
<input type="button" onClick="show()" name="showbutton" value="show" />
Rename the function:
function showPasswordInputBox()
{
// your code here
}
<input type="button" onClick="showPasswordInputBox()" name="show" value="show" />
Don't use in-line code:
function show()
{
// whatever
}
var showButton = document.getElementsByName('show')[0];
showButton.addEventListener('click', show, false);
See also
Don't give event handler the same name as a field!
Javascript Function and Form Name conflict
There is a problem with naming convention of show() function in javascript. Because just change the name to show1(). it'll work
function show1()
{
alert("ok");
}
<input type="button" name="show" value="show" onclick="show1()" />
you can use jquery and write following code: $("#passwd").show()
or you can use addClass('here_css_class') and css code .here_css_class{
display: block
}
try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function show()
{
document.getElementById('passwd').style.display="block" ;
}
</script>
</head>
<body>
<form action="demo.html" >
<input type="text" name="user" />
<br />
<input type="text" id="passwd" name="password" style="display:none;" />
**<button onClick="show()" >Show</button>**
<br />
<input type="submit" value="OK" />
</form>
</body>
</html>
You need to use this:
onClick="javascript:show();"
or simply
onClick="show();"
Basically, just add the semi-colon :)
I have the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
body {background-color:Gray;}
body {text-align:left;}
</style>
<title>My First Project</title>
</head>
<body>
<form>
<table border="1" align="center">
<u><h5>Size</h5></u>
<tr><td><input type="radio" name="size" id="small" />Small</td></tr>
<tr><td><input type="radio" name="size" id="medium" />Medium</td></tr>
<tr><td><input type="radio" name="size" id="large" />Large</td></tr>
</table>
<br />
<script type="text/javascript">
if (document.getElementById('small').checked) {
document.getElementById('total').innerHTML = '$1.00';
}
else {
}
</script>
<div id="total">$0.00</div>
</form>
</body>
</html>
I wanted the script to change the text within div total to $1.00 instead of $0.00 when the radiobutton with id small was checked. However, nothing happens when I select it. What am I missing?
You've to invoke a function on some event -- JS basically runs on events!!
<input type="radio" name="size" id="small" onclick="yourFxn()" />Small</td>
In your script
function yourFxn(){
if (document.getElementById('small').checked) {
document.getElementById('total').innerHTML = '$1.00';
}
else {
}
}
scripts are read sequentially. When your javascript runs, there is no element with id total on the page because it is below the script.
But even if you move the code below, it still won't work because there is no click event atached to the radiobutton. your script only checks if the radiobutton is somehow magically selected on page load and changes the text. for exemple this code will change the text but it requires you to hardcode the checked radiobutton:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
body {background-color:Gray;}
body {text-align:left;}
</style>
<title>My First Project</title>
</head>
<body>
<form>
<table border="1" align="center">
<u><h5>Size</h5></u>
<tr><td><input type="radio" name="size" id="small" checked="checked" />Small</td></tr>
<tr><td><input type="radio" name="size" id="medium" />Medium</td></tr>
<tr><td><input type="radio" name="size" id="large" />Large</td></tr>
</table>
<br />
<div id="total">$0.00</div>
<script type="text/javascript">
if (document.getElementById('small').checked) {
document.getElementById('total').innerHTML = '$1.00';
}
else {
}
</script>
</form>
</body>
</html>
What I think you really want to do is to attach a "click" EVENT to the radiobutton.
You can read more here:
http://www.w3schools.com/jsref/event_onclick.asp
The reason why you are not getting $1.00 is that - code inside will execute on page load. but what you need is to set the div's value on some event of a radio and NOT ON page load event.
so use your code in some function and call that function on radio button's click event
Here is a working example based on the critical parts of your code: http://jsfiddle.net/9hxDq/
You need to execute your code in response to an event (such as a click, a load event, or in response to an input being clicked)
Some of your markup was invalid (U tag inside of a TABLE)
HTML
<table border="1" align="center">
<tr><td><input type="radio" name="size" id="small" />Small</td></tr>
<tr><td><input type="radio" name="size" id="medium" />Medium</td></tr>
<tr><td><input type="radio" name="size" id="large" />Large</td></tr>
</table>
<input type="button" value="Calculate" onclick="calculate()" />
<div id="total">$0.00</div>
JavaScript
function calculate()
{
if (document.getElementById('small').checked)
{
document.getElementById('total').innerHTML = '$1.00';
}
else
{
alert("not checked!");
}
}
Tie the click event on the radio button to your code via:
var small = document.getElementById('small');
if (small.addEventListener) {
small.addEventListener('click', calc, false);
} else if (small.attachEvent) {
small.attachEvent('onclick', calc);
}
function calc() {
if (document.getElementById('small').checked) document.getElementById('total').innerHTML = '$1.00';
};
jsFiddle example.
The reason it isn't updating is because the script appears in the code before the <div id='total'>. And, more importantly, because the script gets executed immediately when it appears in the page, so it is run before the total element is added to the DOM.
To fix this, you need to either move the script lower in your HTML code, or make the script run only after the page has finished loading. The first of those options is a quick fix to get you up and running; the latter is probably the more recommended option.
To get it to run only after the page has finished loading, wrap it into a function, and use the onload event on the page to trigger it. Alternatively, if you're using JQuery, add it as a $(document).ready() function.
I have this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The management panel</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
<script type="text/javascript">
function markPercentages(){
var checked = $(':checked');
var percentage = Math.round((1 / checked.length) * 100);
checked.siblings('.percentage').html(percentage);
$('input[type=checkbox]').not(checked).siblings('.percentage').html('0');
}
</script>
</head>
<body>
<form>
Building<br /><div><input type="checkbox" onclick='markPercentages()' name="6" value="6"> Susilo 2A-13 (<span class='percentage'>0</span>%)</div><br />
<div><input type="checkbox" onclick='markPercentages()' name="7" value="7"> Susilo 2A-12 (<span class='percentage'>0</span>%)</div>
<br />Category<br /><select name="title"><option value="Wages">Wages</option><option value="Listrik">Listrik</option><option value="Iuran Bulanan">Iuran Bulanan</option></select><br />
On<br /><input type=text name=date id=date /><br />
Notes<br /><input type=text name=note /><br />
Value<br /><input type=text name=cost onChange="addDecimalPoints(this.id)" id=cost /><br />
<input type=submit value="Save" />
</form>
</body>
</html>
It shows a percentage right next to the building (Susilos) of the cost that it's adding. In simplest terms, if one is checked it shows 100%, if two are checked it shows 50% on the first and 50% on the second and so on.
It works fine in Chrome but in Firefox when I check just one, it shows 50% on that, like there are checked two. When I check two it shows 33% on those, like I checked three of them. Why this happen and how I should fix this?
Anyway , deleting a part of the code that's beyond that code makes that works also:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The management panel</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
<script type="text/javascript">
function markPercentages(){
var checked = $(':checked');
var percentage = Math.round((1 / checked.length) * 100);
checked.siblings('.percentage').html(percentage);
$('input[type=checkbox]').not(checked).siblings('.percentage').html('0');
}
</script>
</head>
<body>
<form>
Building<br /><div><input type="checkbox" onclick='markPercentages()' name="6" value="6"> Susilo 2A-13 (<span class='percentage'>0</span>%)</div><br />
<div><input type="checkbox" onclick='markPercentages()' name="7" value="7"> Susilo 2A-12 (<span class='percentage'>0</span>%)</div>
</form>
</body>
</html>
Thanks
http://jsfiddle.net/sjRAu/ - working all browsers
HTML:
<div>
<input type='checkbox' />Susilo 2A-13 (<span class='percentage'>0</span>%)
</div>
<div>
<input type='checkbox' />Susilo 2A-14 (<span class='percentage'>0</span>%)
</div>
<div>
<input type='checkbox' />Susilo 2A-15 (<span class='percentage'>0</span>%)
</div>
JS:
$(document).ready(function() {
$('input').click(function(){
markPercentages();
});
function markPercentages(){
var checked = $(':checked');
var percentage = Math.round((1 / checked.length) * 100);
checked.siblings('.percentage').html(percentage);
$('input[type=checkbox]').not(checked).siblings('.percentage').html('0');
}
});
If you have more inputs on the page just give your checkboxes a class like 'markbox' and change 'input' to '.markbox' in your JS
what about use like this one
$(function(){
$('input[type=checkbox').click(function(){
var checked = $('input[type=checkbox]').attr('checked');
var percentage = Math.round((1 / checked.length) * 100);
checked.siblings('.percentage').html(percentage);
$('input[type=checkbox]').not(checked).siblings('.percentage').html('0');
});
});
Try this code. I basically rewrote all of your logic:
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$(':checkbox').change(function() {
var num_checked = $(':checkbox:checked').length;
if (num_checked == 0) {
$(':checkbox').each(function() {
$(this).siblings('.percentage:eq(0)').text('0');
});
return;
}
var percentage = Math.round(100 / num_checked);
$(':checkbox').each(function() {
if ($(this).is(':checked')) {
$(this).siblings('.percentage:eq(0)').text(percentage);
} else {
$(this).siblings('.percentage:eq(0)').text('0');
}
});
});
});
</script>
</head>
<body>
<div>
<input type='checkbox'/>Susilo 2A-13 (<span class='percentage'>0</span>%)
</div>
<div>
<input type='checkbox' />Susilo 2A-14 (<span class='percentage'>0</span>%)
</div>
<div>
<input type='checkbox' />Susilo 2A-15 (<span class='percentage'>0</span>%)
</div>
</body>
</html>
Demo: http://jsfiddle.net/NKuHS/3/
When I change the first checkbox, I want to change the var theSame, but it seems it doesn't change in if(theSame == 1);
but it changes in alert("b"+theSame). How to handle this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var theSame = 1;
$("input[name='thesame']").change(function(){
theSame = $(this).is(":checked") ? 1 : 0;
alert("a"+theSame);
});
if(theSame == 1){
$(".check_list input").change(function(){
alert("b"+theSame);
});
}
});
</script>
</head>
<body>
<input type="checkbox" name="thesame">same
<br>
<div class="check_list">
<input type="checkbox" name="son">ppp
<input type="checkbox" name="son">ppp
<input type="checkbox" name="son">ppp
</div>
</body>
</html>
thank you,this what i want to achieve:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[name='thesame']").change(function(){
var theSame = this.checked ? 1 : 0;
show(theSame)
});
function show(i){
if(i == 1){
$(".check_list input").change(function(){
var inputName = $(this).attr("name");
$("input[name=" + inputName + "]").attr("checked",this.checked)
});
}else{
$(".check_list input").unbind("change")
}
}
});
</script>
</head>
<body>
<input type="checkbox" name="thesame" class="check-all">same
<br>
<div class="check_list">
<input type="checkbox" name="son">ppp
<input type="checkbox" name="sister">ppp
<input type="checkbox" name="dog">ppp
</div>
<hr>
<div class="check_list">
<input type="checkbox" name="son">ppp
<input type="checkbox" name="sister">ppp
<input type="checkbox" name="dog">ppp
</div>
<hr>
<div class="check_list">
<input type="checkbox" name="son">ppp
<input type="checkbox" name="sister">ppp
<input type="checkbox" name="dog">ppp
</div>
</body>
</html>
This is not really a question of scope, but more of asynchrony. Let's step through your code:
$(document).ready(function(){
// Define function-scope variable `theSame`, assign it a value of `1`
var theSame = 1;
// Bind a `change` event handler to an element, this function will run later!
$("input[name='thesame']").change(function(){
theSame = +this.checked;
alert("a"+theSame);
});
// At this point, `theSame` has not changed from its original value!
if(theSame == 1){
$(".check_list input").change(function(){
// Here, however, `theSame` may have had its value changed
alert("b"+theSame);
});
}
});
So, as you can see, when the if statement runs it will always have a value of 1, because the value isn't changed until later, after this code has already been executed.
If you move the if statement to inside the event handler, you'll see different results:
$(".check_list input").change(function(){
if(theSame){
alert("b"+theSame);
}
});
Here, you'll only see the alert if theSame is 1.
In the following code , I have a javascript function and I am tring to change the backgroundColor of the page to a color passed in as a parameter. But my code doesn't work, can anybody help me what is wrong in my code?
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Changing Color</title>
<head>
<style type="text/css">
body {
background-color:#ffcccc;
}
</style>
</head>
<body>
<form>
<label>color: <input type="text" name="color"> </label>
<input name="color" type = "button" onClick = "changecolor(color.value) " value = "color">
</form>
</body>
</html>
Javascript:
function changecolor(colour)
{
document.bgcolor=colour;
}
Assuming colour contains a valid CSS color descriptor, you can write:
document.body.style.backgroundColor = colour;
you have to put the function in a script block.
...
</form>
<script type="text/javascript>
//function declaration
</script>
Try this code it works finely man .i have just tried it.you can use it where-ever you want.also appended the code for onmouse click and onmouseover.
<html>
<head>
<script language="javaScript">
function change_background(color){
document.bgColor = color;
}
</script>
</head>
<body>
<form>
<label>color: <input type="text" name="color" >
</label>
<input name="clrs" type ="button" value="getcolor" onClick = "change_background(color.value) " >
</form>
ClickBlue
Mouseoverblack
Mouseover white
</body>
</html>`