This code works on online compilers as well as stackoverflow but why not on my web host as well as localhost.
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$('.radiogroup').on('change', function() {
$('#amount').val( this.value );
});</script></head>
<body>
<input type="radio" name="radiogroup" class="radiogroup" value="5" />
<input type="radio" name="radiogroup" class="radiogroup" value="10" />
<input type="radio" name="radiogroup" class="radiogroup" value="15" />
<input type="radio" name="radiogroup" class="radiogroup" value="20" />
<br /><br />
<input type="text" name="amount" id="amount" /></body>
</html>
Your head and body tags are intermingled. I've updated it to correctly show the head and body sections.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$('.radiogroup').on('change', function() {
$('#amount').val( this.value );
});
</script>
</head>
<body>
<input type="radio" name="radiogroup" class="radiogroup" value="5" />
<input type="radio" name="radiogroup" class="radiogroup" value="10" />
<input type="radio" name="radiogroup" class="radiogroup" value="15" />
<input type="radio" name="radiogroup" class="radiogroup" value="20" />
<br /><br />
<input type="text" name="amount" id="amount" />
</body>
</html>
Your Javascript is running too early, before any HTML elements (your radio buttons) are present. Your selector $('.radiogroup') then does not find anything, and nothing happens when you click the radio buttons.
Either move your Javascript at the end before the </body> closing tag or wrap your code in jQuery's .ready like so:
$(document).ready(function(){
$('.radiogroup').on('change', function() {
$('#amount').val( this.value );
});
})
Your head and body tags are intermingled and if u want to use html5 you don't need to define the script-type, and you don't have to declare not-closed-tags with trailing backslash.
If you want to use an earlier version of html use the type.
If you want to use xhtml you have to use trailing backslashes for not-closed-tags.
Edit: I figured out, that your code is triggered before the Elements are rendered, so you try to add a event-handler to Elements that are not present at that time. Adding $(function() {}); around your code will force jQuery to run the code after document-ready event is triggered.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
$('.radiogroup').on('change', function() {
$('#amount').val(this.value);
});
});
</script>
</head>
<body>
<input type="radio" name="radiogroup" class="radiogroup" value="5">
<input type="radio" name="radiogroup" class="radiogroup" value="10">
<input type="radio" name="radiogroup" class="radiogroup" value="15">
<input type="radio" name="radiogroup" class="radiogroup" value="20">
<br><br>
<input type="text" name="amount" id="amount">
</body>
</html>
Related
I'm trying to select the first radio button by default. However, every code I have tried has not worked. Any help would be appreciated.
jsfiddle - http://jsfiddle.net/te2b5dqy/
$('.radiogroup').change(function(e) {
const $this = $(this), $link = $("#url");
$link.html($this.val());
$link.attr("href", $this.attr("data-url"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="radiogroup" id="radiogroup1" class="radiogroup" value="Google" data-url="https://google.com" />
<input type="radio" name="radiogroup" id="radiogroup2" class="radiogroup" value="Bing" data-url="https://www.bing.com/" />
<a id="url" href="" target="_blank">null</a>
You can simply add .eq(0).click()
$('.radiogroup').change(function(e) {
const $this = $(this), $link = $("#url");
$link.html($this.val());
$link.attr("href", $this.attr("data-url"));
}).eq(0).click(); //<<<<<<< here
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="radiogroup" id="radiogroup1" class="radiogroup" value="Google" data-url="https://google.com" />
<input type="radio" name="radiogroup" id="radiogroup2" class="radiogroup" value="Bing" data-url="https://www.bing.com/" />
<a id="url" href="" target="_blank">null</a>
OR .eq(0).prop('checked' , true).change()
$('.radiogroup').change(function(e) {
const $this = $(this), $link = $("#url");
$link.html($this.val());
$link.attr("href", $this.attr("data-url"));
}).eq(0).prop("checked" , true).change(); //<<<<<<< here
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="radiogroup" id="radiogroup1" class="radiogroup" value="Google" data-url="https://google.com" />
<input type="radio" name="radiogroup" id="radiogroup2" class="radiogroup" value="Bing" data-url="https://www.bing.com/" />
<a id="url" href="" target="_blank">null</a>
Additional: A lot of ways to select the first radio .eq(0) , .first() , .filter(':eq(0)') , .filter(':nth-child(1)')
The checked="checked" will do the trick
<input type="radio" name="radiogroup" id="radiogroup1" checked="checked"
class="radiogroup" value="Google" data-url="https://google.com" />
Solution
checked attribute will solve this
Here is the code snippet
<input type="radio" checked />
<input type="radio" />
XHTML solution:
<input type="radio" name="radiogroup" id="radiogroup1" class="radiogroup"
value="Google" checked="checked" data-url="https://google.com" />
Note, the actual value of checked attribute does not matter actually; it's just a way to assign "checked". Importantly, like "true" or "false" don't have any special meaning.
If you don't aim for XHTML, you can make the code more simplify:
<input type="radio" name="radiogroup" id="radiogroup1" class="radiogroup"
value="Google" data-url="https://google.com" checked>
I'm trying to find a simple way to check a radio option using jQuery based on its initial value at render time.
<form>
<input type="radio" name="myRadio" value="weekly" />Weekly <br />
<input type="radio" name="myRadio" value="monthly" />Monthly <br />
<input type="radio" name="myRadio" value="yearly" />Yearly <br />
</form>
And the Javascript:
$('input [value="weekly"]').prop("checked", true);
I have a JS fiddle set up here:
http://jsfiddle.net/xpvt214o/448712/
The interesting thing is that it works using the native browser document.querySelector but it doesn't seem to work using jQuery. I'd like to stick with jQuery's way of doing this to ensure consistency in the code.
Also, the reason I want to select by value is that the JSON API I'm calling returns an enumerated string type. It would be really annoying if I had to add a unique ID attribute to each radio option and then use a switch case to select the appropriate button based on the enumerated string type.
Simple remove the space between your selector and the attribute:
$('input[value="weekly"]').prop("checked", true);
$('input[value="weekly"]').prop("checked", true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio" name="myRadio" value="weekly" />Weekly <br />
<input type="radio" name="myRadio" value="monthly" />Monthly <br />
<input type="radio" name="myRadio" value="yearly" />Yearly <br />
</form>
With space, you are telling jQuery to select elements that have [value="weekly"] but are descendants of an input element
$(function(){
$('input[type="radio"][value="weekly"]').prop('checked', true);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio" name="myRadio" value="weekly" />Weekly <br />
<input type="radio" name="myRadio" value="monthly" />Monthly <br />
<input type="radio" name="myRadio" value="yearly" />Yearly <br />
</form>
I try to clone a section after another section on user input (clicking a radio button), but it doesn’t works...
your help is appreciated.
<section class="clonetester">
<input id="1a" type="radio" value="1" name="q1">yes
<input id="1b" type="radio" value="0" name="q1" >no
<br />
<input id="date1" type="datetime-local" name="date" />date<br />
</section>
<section class="here">clone follows</section>
<script>
$('input').click(function(e){
$('#1a').(':checked'){
$('.clonetester').clone().appendTo(".here");
}
})
</script>
You have multiple changes that you will have to make for it to work.
Use change instead of click for input elements.
$('#1a').(':checked') has to be replaced with $('#1a').is(':checked') and should be enclosed in a if block.
$('body').on('change', 'input[type="radio"]', function() {
var $this = $(this);
if ($this.hasClass('1a') && $this.is(':checked')) {
// closeset clonetester
var $clonetester = $this.closest('.clonetester').first();
if ($clonetester) {
$clonetester.clone().appendTo(".here");
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="clonetester">
<input class="1a" type="radio" value="1" name="q1">yes
<input class="1b" type="radio" value="0" name="q1">no
<br />
<input class="date1" type="datetime-local" name="date" />date
<br />
</section>
<section class="here">clone follows</section>
I am trying to achieve something simple. Basically I have 3 radio groups and onchange of either one of those group, I want to get the values of all the radio groups and display on an alert box.
My code is as follows
html
<input type="radio" name="ac" value="yes"> YES
<input type="radio" name="ac" value="no"> NO
<br>
<input type="radio" name="tier" value="normal"> normal
<input type="radio" name="tier" value="deluxe"> deluxe
<br>
<input type="radio" name="cap" value="big"> big
<input type="radio" name="cap" value="small"> small
js
$("input[type=radio]").on("change",function(){
var ac=$("input[type=radio][name=ac]").val();
var tier=$("input[type=radio][name=tier]").val();
var cap=$("input[type=radio][name=cap]").val();
alert(ac+" "+tier+" "+cap);
});
I have a jsfiddle here too https://jsfiddle.net/5fg6by8m/
ON the fiddle, it seems like the event doesn't fire at all, while on my localhost server using mozilla to browse I always get the values of the first items of each group in my alert box (yes normal big). I might be doing some silly mistake. Please help me correct this.
Thanks in advance...
edit
corrected fiddle
https://jsfiddle.net/5fg6by8m/4/
You can use below code. you have to use :checked psudo selector
$(document).on("change","input[type=radio]",function(){
var ac=$('[name="ac"]:checked').val();
var tier= $('[name="tier"]:checked').length>0? $('[name="tier"]:checked').val():"";
var cap=$('[name="cap"]:checked').length>0 ?$('[name="cap"]:checked').val():"";
alert(ac+" "+tier+" "+cap);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="radio" name="ac" value="yes"> YES
<input type="radio" name="ac" value="no"> NO
<br>
<input type="radio" name="tier" value="normal"> normal
<input type="radio" name="tier" value="deluxe"> deluxe
<br>
<input type="radio" name="cap" value="big"> big
<input type="radio" name="cap" value="small"> small
refer the working demo, this will help to you.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
<div class="main">
<input type="radio" name="ac" value="yes"> YES
<input type="radio" name="ac" value="no"> NO
<br>
<input type="radio" name="tier" value="normal"> normal
<input type="radio" name="tier" value="deluxe"> deluxe
<br>
<input type="radio" name="cap" value="big"> big
<input type="radio" name="cap" value="small"> small
</div>
<script type="text/javascript">
$(document).ready(function(){
$("div.main input[type=radio]").on('change',function(){
var thelength = $("div.main input[type=radio]").length;
//alert(thelength);
for(var i=0;i<thelength;i++)
{
var theValueofCheck = $("div.main input[type=radio]").eq(i).val();
alert(theValueofCheck);
}
});
});
</script>
</body>
</html>
You didn't have selected framework in jsfiddle, so please select jquery in jsfiddle then run the code.
Added :checked in your JS code
$(document).ready(function(){
$("input[type=radio]").on("change",function(){
var ac=$("input[type=radio][name=ac]:checked").val();
var tier=$("input[type=radio][name=tier]:checked").val();
var cap=$("input[type=radio][name=capacity]:checked").val();
alert(ac+" "+tier+" "+cap);
});
});
Fiddle
Check this:
<input type="radio" name="ac" value="yes"> YES
<input type="radio" name="ac" value="no"> NO
<br>
<input type="radio" name="tier" value="normal"> normal
<input type="radio" name="tier" value="deluxe"> deluxe
<br>
<input type="radio" name="cap" value="big"> big
<input type="radio" name="cap" value="small"> small
JS:
jQuery( function( $ ) {
function recalc()
{
var ac = $("input[name=ac]").val();
var tier = $("input[name=tier]").val();
var cap = $("input[name=capacity]").val();
alert(ac+""+tier+""+cap);
}
$(document).ready(function(){
$("input[type=radio]").on("change",function(){
recalc();
});
});
});
Shorter solution, select all checked buttons using input:checked and jQuery .each()
$(document).ready(function() {
$("input[type=radio]").on("change", function() {
var results = "";
$("input:checked").each(function(key, val) {
results += $(val).val() + "<br>";
});
$(".results").html(results);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input type="radio" name="ac" value="yes"> YES
<input type="radio" name="ac" value="no"> NO
<br>
<input type="radio" name="tier" value="normal"> normal
<input type="radio" name="tier" value="deluxe"> deluxe
<br>
<input type="radio" name="cap" value="big"> big
<input type="radio" name="cap" value="small"> small
<div class="results"></div>
I need help with this code. I keep getting the error changeBG is not defined.
The way the code should work is when I select a radio button the background changes. If I change the function to an inline function inside the onclick event then it works but if I move the funtion to script section it doesn't work for example:
<input type="radio" id="red" name="change1" value=1 onclick="document.body.style.backgroundColor='red'" /><label for="red">Red</label><br />
WORKS at changing the background red
but when I make a function in the script section and call the function in the onlick event it doesn't work,
Example of code that is not working:
Script:
<script type="text/javascript">
function changeBG(n)
{
if (n==1)
document.body.style.backgroundColor='red'";
if (n==2)
document.body.style.backgroundColor='yellow'";
if (n==3)
document.body.style.backgroundColor='green'";
if (n==4)
document.body.style.backgroundColor='orange'";
}
</script>
HTML:
<form id="jp2" name="jp2" method="get">
<input type="radio" id="red" name="change1" value=1 onclick="changeBG(1)" />
<label for="red">Red</label><br />
<input type="radio" id="Yellow" name="change1" value=2 onclick="changeBG(2)" />
<label for="yellow">Yellow</label><br />
<input type="radio" id="Green" name="change1" value=3 onclick="changeBG(3)" />
<label for="green">Green</label><br />
<input type="radio" id="Orange" name="change1" value=4 onclick="changeBG(4)" />
<label for="orange">Orange</label><br />
</form>
backgroundColor='red'"
backgroundColor='yellow'"
backgroundColor='green'"
backgroundColor='orange'"
You see those extra " quotemarks? Get rid of them.
Your working code
In Firefox this gives the following console error. You should learn how to do some simple debugging so you can catch these errors early.
SyntaxError: unterminated string literal
Use proper quotes. You had used wrong extra quotes. like ''". Since these extra quote made JS error, you are error i.e. function not defined.
Change js to following.
function changeBG(n) {
if (n == 1)
document.body.style.backgroundColor = 'red';
if (n == 2)
document.body.style.backgroundColor = 'yellow';
if (n == 3)
document.body.style.backgroundColor = 'green';
if (n == 4)
document.body.style.backgroundColor = 'orange';
}
<form id="jp2" name="jp2" method="get">
<input type="radio" id="red" name="change1" value=1 onclick="changeBG(1)" />
<label for="red">Red</label>
<br />
<input type="radio" id="Yellow" name="change1" value=2 onclick="changeBG(2)" />
<label for="yellow">Yellow</label>
<br />
<input type="radio" id="Green" name="change1" value=3 onclick="changeBG(3)" />
<label for="green">Green</label>
<br />
<input type="radio" id="Orange" name="change1" value=4 onclick="changeBG(4)" />
<label for="orange">Orange</label>
<br />
</form>