I have two radio buttons each with a unique ID. When one is clicked, I would like to add $10 to a total. When the other is clicked, we go back to the original total price. My jquery looks like this:
function check_ceu() {
var price = <%= conference_price %>;
if($('#ceu_yes').is(':checked')){
$('#total').val(parseFloat(price) + 10)
}
else{
$('#total').val(price)
}
}
I have this function bound to document.ready (for page refreshes) and also the onchange handler of the radio buttons.
In FF and Chrome this works fine. In IE, when the radio button with ID of "ceu_yes" is checked nothing happens, then when clicking back to the other radio button, 10 is added. So in essence, IE has the checkbox functionality reversed. Below is my code for the buttons:
<input type="radio" name="ceu" id="ceu_yes" value="1" onchange="check_ceu()" /> $10
<input type="radio" name="ceu" id="ceu_no" value="0" checked="checked" onchange="check_ceu()" /> No, thank you
Any ideas on this?
IE's 'change' event handler is messed up. It doesn't fire when expected.
(http://webbugtrack.blogspot.com/2007/11/bug-193-onchange-does-not-fire-properly.html)
If you change your logic to attach to the 'click' event on your radio button, you will get the effect that you want.
NB. Nicely enough, the click event still fires properly when you tab into the field and manipulate it using the spacebar on the keyboard, so no functionality is lost.
Related
I have made a a site using html and css where users use radio buttons to make choice now I am looking forward to putting action to the choices made. If a user chooses an option and action should be made, however I do not know how to put action to a radio button action. I require help please!
You could use the addEventListener method. So, say you have a the following HTML:
<input type="radio" name="myRadio" value="1">
Then you can use this code:
var radio = document.getElementsByName("myRadio")
radio.forEach(r => r.addEventListener('change', myFunc))
You can also bind the function in your HTML, using the onchange attribute:
<input type="radio" name="myRadio" value="1" onchange="myFunc()">
You can see more details in previous questions that seem very similar to yours:
onchange not working with radio button
OnChange event handler for radio button (INPUT type="radio") doesn't work as one value
Radio Input onChange only fires once?
Also, as suggested by #devdgehog, you could give a look at the documentation on:
addEventListener: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
inputs's onchange: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
In mozilla firefox entering data into a textbox which acts as a radio button needs a double click...how to make it possible through single click.Even after selecting the radio button and If i click the textbox once and try to enter only the radio button gets selected and the data is not entered.
For Firefox, the first click in to select the radio button, which gets the focus (honnestly don't know why it's different with other browsers).
I think your solution will be to use Javascript... See this jdfiddle, I've update your code ;)
The idea is to have two inputs not linked in the HTML, but linked via the onclick (or onfocus) function, like:
<input type="radio" name="address-chosen" value="1" id="address-switch_1" />
<input type="text" name="address-item_1" value="1" onclick="selectRadioButton('address-switch_1')"/>
My question is: what's your final objective? Because when you submit the form, you'll have to take into account that you have two separate inputs... or maybe update the value of the radio button with JS, too?
I need to use javascript to check all radio boxes with a certain ID on a page. The radio buttons all have different names, and are grouped by 3, one for approve, one for deny, one for review...
<input type=radio name='21' value='approved' id='approved' title='Approve'>
<input type=radio name='21' value='denied' id='denied' title='Deny'>
<input type=radio name='21' value='review' id='review' checked title='Do nothing right now'>
...and so on. I've searched on this site and all over the googles, not really finding a solution that works for me. I have another set of radio buttons on top of the page, that I want to use to control the others, so if I click the "approve" radio up top, all the approve radios are selected, deny does all the denied radio boxes on the page etc.
I am using an onclick on the top radio buttonset to fire a javascript function, but I've no idea what to tell the function to do. I assume that jquery would be able to do this nicely, but cannot seem to come up with the code to do so.
Try a click function on all radio and update the selection based on its value. See below,
// v--- Refined the selector as you want this to happen only when clicking on the
// controller radio options.
$('.controller:radio').click(function () {
$(':radio[value=' + this.value + ']')).prop('checked', true);
});
DEMO: http://jsfiddle.net/KvdNq/
What I would do is actually create the groups within separate DIVS. Then you can loop through all the radios within that particular div and dont need to care about what the IDS are for the respective Radio Buttons.
<div id="group1">
<input type="checkbox" value="group1"/> Check all in this group
<input type = "radio" value="xx" />
<input type="radio" value="yy" />
</div>
Now you can simply create a function that takes the value of the checkbox, then loops through the matching div, checking all the RADIO BUTTONS within it. Make sense?
I have a $.change() event, but when a submit button is pressed, the change event fires again. It is only supposed to fire once when a text is inputted into a input text box.
$('input:submit', top.document).bind('click', function (e) {
alert("submitting")
});
$('input').change(function (e) {
alert("fire");
});
Edit: For whatever reason, a change event is invoked when the input button is clicked. (thanks Anthony)
The way to fix this is simply don't select the submit button.
You can try
$('input:text')
To select only text fields.
Or you can do
$('input:not(:submit)')
To select all input elements except the submit button(s).
Read about selectors here
Edit: Using <button> instead won't work. It still counts as an input field, but it's value is separate from the text displayed on the button.
$('input').change(function(e){ alert("fire") }); applies that event to ALL input elements, including <input type="submit".../>. If you really want EVERY SINGLE text input element to have a change event, you want ``$('input[type=text]').change(function(e){ alert("fire") });` Otherwise, it might be best to use an id or class.
#Mark,
You are spot on and I'd edit you if I could to help out. Maybe someday soon...
#ajowi,
Submit buttons are inputs. At least most of them are:
<input type="submit" />
So Mark,it's not that they are doing anything with the button text, it's that the input, which is a button, is being changed by act of clicking on it.
So his solutions were great. Go with
$("input:text").change
I have a checkbox inside a <label> and i want that checkbox, when checked or unchecked, to trigger a function.
I attached a onchange trigger to the checkbox but in IE6 the trigger only fires after the focus is turned away from the checkbox, while in FF3 and Chrome it fires right away.
I removed the onchange trigger and attached a onclick trigger to the <label> but now the trigger fires twice when the label is clicked once (does enyone know why?)...
My question is: how can i make the checkbox fire a function when it is checked or unchecked by a click on it or on it's label.
Thanks.
Assuming you don't want a fancy ASP / JQuery solution, just attaching the function to the onClick of the checkbox itself should work fine.
(Of course, you'll need to inspect the current state of the checkbox in the function if you want to have the function behave differently based on if the checkbox is checked or not.)
As "Electrons_Ahoy" says, you should be able to simply attach an onclick handler to the checkbox element. This handler should also get called when the user clicks on the label instead of the checkbox.
HTML:
<label><input type="checkbox" id="myCheckbox" />My Checkbox</label>
JavaScript:
document.getElementById("myCheckbox").onclick = function() {
if (this.checked) {
alert("Checkbox was checked.");
}
else {
alert("Checkbox wasn't checked.");
}
};
The above code seems to work correctly in Safari 4 and Firefox 3 (I'm not sure how it would work in IE).
Steve
not sure if using Prototype is an option for you, but if so you'd do it this way (this assumes Prototype 1.6. Code written against earlier versions will be slightly different):
HTML:
<label><input type="checkbox" id="myCheckbox" />My Checkbox</label>
JS:
$('myCheckbox').observe('click', function(cbox)
{
var cbox = $('myCheckbox');
//do work in here.
//cbox is the DOM element that represents your checkbox
}
);
Doing it this way is slightly nicer than the "naked" JS approach (in my opinion), and it's a bit safer too.
Thank you for all your responses.
#Electrons_Ahoy and #Steve: You are tight. My problem was that i was putting the checkbox inside the labe, so i did the folowing:
I took the checkbox outside the label, put the onclick trigger on the checkbox only and it works fine.
I also figured out why the trgger fired twice when the checkbox was inside the label and the onclick trigger was on the label :
It was because when i clicked the label a click on the checkbox was simulated and the checkbox being inside the label the click was simulated on the label, duuuuuhhh :)
You probably need to turn on the autopostback property:
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.checkbox.autopostback.aspx
<asp:CheckBox id="checkbox1" runat="server"
AutoPostBack="True"
Text="Include 8.6% sales tax"
TextAlign="Right"
OnCheckedChanged="Check_Clicked"/>