I've got a series of radio buttons and a submit button:
<input type="radio" name="selectme_resubmit" id="selectme_resubmit1" value="first" /> <label for="selectme_resubmit1">Resubmit with the original submitter</label><br>
<input type="radio" name="selectme_resubmit" id="selectme_resubmit2" value="without" checked /> <label for="selectme_resubmit2">Resubmit without any submitter</label><br>
<input type="radio" name="selectme_resubmit" id="selectme_resubmit3" value="custom" /> <label for="selectme_resubmit3">Resubmit with a custom submitter:</label> <input type="text" name="selectme_custom_submitter" id="selectme_custom_submitter" /><br>
<input type="button" id="selectme_resubmit_button" name="selectme_resubmit2_button" value="Place a submit template" onclick="selectme_act(\'resubmit\')" />
I also have the following javascript (with jquery):
var typeofsubmit = $("input[name=selectme_resubmit]:checked").val();
console.log(typeofsubmit);
However, I get "undefined" in the console, even when I select something... what am I doing wrong?
I tested your code and the selector does work. The only issue I found was that you were escaping the ' character when it was not needed in the onclick event
you miss ready function
$().ready(function(){
var typeofsubmit = $("input[name=selectme_resubmit]:checked").val();
console.log(typeofsubmit);
});
please use ready function before your declaration
and check this link http://jsfiddle.net/FQGuu/
Related
A form with radio buttons. If "Existing" is checked, the "existingnumber" input will be enabled. It works fine during the selection process but does not work onload. On load the input "existingnumber" remains disabled even though it's "checked". This is problematic when the form is submitted, and fails error validation. I've tried appending .change() at the end, and creating a function which I called on document ready but that didn't work. I think I'm missing something. Perhaps I need to get the value first? I'm a bit of a jquery noob.
<input type="radio" name="officephone" value="New" id="officephonenew" >
<label for="officephonenew">New</label><br>
<input type="radio" name="officephone" value="Existing" id="officephoneexisting" checked>
<label for="officephoneexisting">Existing</label><br>
<input type="text" name="existingnumber" placeholder="555-555-1234" /><br>
<input type="radio" name="officephone" value="No" id="officephoneno">
<label for="officephoneno">Not required</label>
$('input:radio[name="officephone"]').change(function(){
$('input[name="existingnumber"]').prop("disabled",true);
if($(this).attr('value') == 'Existing') {
$('input[name="existingnumber"]').prop("disabled", false);
}
});
https://jsfiddle.net/Cormang/sd8xaj9h/10/
To make this work on load simply use filter() to retrieve the checked radio button and trigger() the change event on it.
Also note that you can simplify the logic by providing the boolean output of the condition to the disabled property and by using val().
$('input:radio[name="officephone"]').change(function() {
$('input[name="existingnumber"]').prop("disabled", $(this).val() != 'Existing');
}).filter(':checked').trigger('change');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="officephone" value="New" id="officephonenew" />
<label for="officephonenew">New</label><br />
<input type="radio" name="officephone" value="Existing" id="officephoneexisting" checked />
<label for="officephoneexisting">Existing</label><br />
<input type="text" name="existingnumber" placeholder="555-555-1234" disabled /><br />
<input type="radio" name="officephone" value="No" id="officephoneno" />
<label for="officephoneno">Not required</label>
This question already has answers here:
How to check a radio button with jQuery?
(33 answers)
Closed 6 years ago.
I have this portion of code:
var checkout_options = $("#checkout").find("input[type='radio']");
$('#button-account').on('click', function () {
alert(checkout_options.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="checkout">
<p>Checkout Options:</p>
<label for="register">
<input type="radio" name="account" value="register" id="register" checked>
<b>Register Account</b></label>
<br>
<label for="guest">
<input type="radio" name="account" value="guest" id="guest">
<b>Guest Checkout</b>
</label>
<input type="button" value="Continue" id="button-account">
</div>
What I want it is to get the value of the selected radio button but with my code I only get the first radio button value, the second radio does not work.
Kindly help me fix the error.
You need to use this to refer the element inside the callback. So get value by using this.value or $(this).val() method. Although avoid :checked pseudo-class selector otherwise it only selects the first element.
var selected = $("#checkout").find("input[type='radio']");
selected.change(function(){
alert(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="checkout">
<p>Checkout Options:</p>
<label for="register">
<input type="radio" name="account" value="register" id="register" checked>
<b>Register Account</b></label>
<br>
<label for="guest">
<input type="radio" name="account" value="guest" id="guest">
<b>Guest Checkout</b>
</label>
</div>
You can make it simpler using :radio pseudo-class selector
$("#checkout :radio").change(function() {
alert(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="checkout">
<p>Checkout Options:</p>
<label for="register">
<input type="radio" name="account" value="register" id="register" checked>
<b>Register Account</b>
</label>
<br>
<label for="guest">
<input type="radio" name="account" value="guest" id="guest">
<b>Guest Checkout</b>
</label>
</div>
Your handler is only being attached to the radio button that is checked, so no handler exists for the second radio button. Attach a handler to both radio buttons:
var $radioBtn = $( "#checkout" ).find( "input[type='radio']" );
$radioBtn.on( 'change', function() {
if ( this.checked ) {
alert( this.value );
}
});
It didn't work, because you register the event handler for the initially checked value only. This is how to make it dynamically reflect the value change:
var selected = $("#checkout").find("input[name='account']");
selected.change(function(){
alert($(this).val());
});
This also makes sure that only the current radio button group is included, so you can have additional ones.
Jsfiddle:
https://jsfiddle.net/sjmhdasw/
Just use
$("input[type='radio']").on("change", function() {
console.log(this.id + " checked !");
});
It binds an event listener on all the inputs of type radio !
No need to store the selectors inside a variable (unless you're doing something with it, somewhere else in your code)
I have a dynamically generated form with some radio buttons.For each radio button there will be a onClick/onChange Function.
The problem is that whenever radio button is clicked ,the onClick of the the first form radio button is called.
<form name="a" id="a">
<input type="radio" name="radioa" onclick="func(1);"/>
<input type="radio" name="radioa" onclick="func(2);"/>
</form>
.
.
<form name="f" id="f">
<input type="radio" name="radiof" onclick="func(3);"/>
<input type="radio" name="radiof" onclick="func(4);"/>
</form>
<script>
function func(val){
alert(val);
}
</script>
I tried with onchange function also its not working.
Always the first form's radio button function is called and alert(1) is shown everytime.
Any help is appreciated.
Thanks in advance.
How about like this. I assume that the value you put as parameter on func() is the value of that radio button.
If so, then you can change your HTML markup to this:
<form name="a" id="a">
<input type="radio" name="radioa" onclick="func(this);" value="1" />
<input type="radio" name="radioa" onclick="func(this);" value="2" />
</form>
.
.
<form name="f" id="f">
<input type="radio" name="radiof" onclick="func(this);" value="3" />
<input type="radio" name="radiof" onclick="func(this);" value="4" />
</form>
Instead of passing the value as parameter to the function, use the value="" attribute (which I think much better). Then pass this as your parameter which will contain the HTML dom where the onClick was triggered.
Then on your javascript:
<script>
function func(val){
alert(val.value);
}
</script>
Check this FIDDLE.
I am trying to set the value of the radio button via javascript. But I am not being able to do so. What I tried to do was have 4 radio buttons one of which is already selected. If I select some other radio button and click on Refresh, default radio button should be selected.
http://jsfiddle.net/ds345/Un8XK/1/
HTML:
<fieldset data-role="controlgroup" data-type="vertical">
<input type="radio" name="radio" id="x" data-theme="a" />
<label for="x" style="color: White">X</label>
<input type="radio" name="radio" id="y" onclick="axisonoff(this)" data-theme="a" />
<label for="y" style="color: White">Y</label>
<input type="radio" name="radio" id="z" data-theme="a" />
<label for="z" >Z</label>
<input type="radio" name="radio" id="none" data-theme="a" />
<label for="none" style="color: White">None</label>
</fieldset>
<button id = "Refresh" value="Refresh">Refresh</button>
JS:
$(document).ready(function () {
$("#none").attr("checked", true).checkboxradio("refresh"); // if this line is not present initially then it works for the 1st refresh.
});
$("#Refresh").click(function(){
$("#x").attr("checked", false).checkboxradio("refresh");
$("#y").attr("checked", false).checkboxradio("refresh");
$("#z").attr("checked", false).checkboxradio("refresh");
$("#none").attr("checked", true).checkboxradio("refresh");
});
I am sure that I have missed something very small but not able to figure out why this approach is not working.
Tools used: Javascript,Jquery 1.9 and JQuery mobile 1.3
Thanks,
Deeksha
You should use prop over attr when dealing with boolean attributes.
.attr("checked", false) will add checked="false" to your element.In HTML, <input checked="false" .../> is the same as <input checked="true" .../> or simply <input checked .../> as the attribute simply needs to be present on the element for it to be active.
See this JSFiddle example.
Change your code to use .prop() instead:
$("#none").prop("checked", false)...
Here is a fixed version of your JSFiddle demo: http://jsfiddle.net/Un8XK/8/
What you have missed is that there is no need for script. Simply use a form with a reset button:
<form>
<input type="radio" name="radio" value="0" checked>0<br>
<input type="radio" name="radio" value="1">1<br>
<input type="radio" name="radio" value="2">2<br>
<input type="radio" name="radio" value="3">3<br>
<input type="reset">
</form>
If you really must use script, you can simply return the radio buttons to their default by adding a button to the form:
<input type="button" onclick="reset(this.form.radio);" value="Script reset">
and a function:
<script>
function reset(els) {
for (var i=0, iLen=els.length; i<iLen; i++) {
els[i].checked = els[i].defaultChecked;
}
}
</script>
<script type="text/javascript">
(function () {
var ButtonGroup = YAHOO.widget.ButtonGroup;
var onCheckedButtonChange = function (p_oEvent) {
};
YAHOO.util.Event.onContentReady("mediaFilterButtonsFieldset", function () {
var oButtonGroup = new ButtonGroup("mediaFilterButtons");
oButtonGroup.on("checkedButtonChange", onCheckedButtonChange);
});
}());
</script>
<div id="resultInfo">
<form id="button-example-form" name="button-example-form" method="post">
<fieldset id="mediaFilterButtonsFieldset">
<div id="mediaFilterButtons" class="yui-buttongroup ie7filter" style="z-index:11;">
<div id="mediaFilterLabel">Go to</div>
<input id="radio1" class="filter_but" type="radio" name="0" value="First" checked rel="0" >
<input id="radio2" class="filter_but" type="radio" name="2" value="Second" rel="2">
<input id="radio3" class="filter_but" type="radio" name="1" value="Third" rel="1">
</div>
</fieldset>
</form>
</div>
These are my YUI buttons. They're just 3 radio buttons turned into "buttons"--literally. My question is this:
After people click the third button, I cannot manually check the first button anymore. How can I manually check "radio1"?
Edit:
According to the official YUI website, there is a method called "set". But I don't know how to use that in this buttonGroup.
The radio buttons must all have the same name attribute in order for them to be grouped together.
Answering your question with the set method. Perhaps this does the trick:
YAHOO.one("#radio1").set("checked",true);
To manually check the radio buttons, it's necessary to have the same name of radio button. Put the same name of radio button and get your result.