Link duplicate radio button forms - javascript

So, I want to display a set of radio buttons several places on a page. I want the state of the radio buttons to be linked, select option A on one form should select option A in all forms.
Sorry for not including examples.
Here is the idea:
<form id="serverForm">
<input type="radio" name="#(site.SiteID)" class="serverRadio" value="All"> All
<input type="radio" name="#(site.SiteID)" class="serverRadio" value="DS1"> DS1
<input type="radio" name="#(site.SiteID)" class="serverRadio" value="DS2"> DS2
<input type="radio" name="#(site.SiteID)" class="serverRadio" value="IS1"> IS1
</form>
This form is going to be created multiple times dynamically depending on the size of the loops its contained in. I want each of these forms to essentially act as duplicated. Clicking an option on one will update all.

Give a class attribute to all Radiobuttons.
Add an "on Click" event on that class.
Check the clicked radio button's value in the event
Compare the value with other radio buttons (in a loop for all radio buttons), if it's the same put the attribute "checked" on true
P.S.: Share your code next time so an easy code example can be provided or even the full solution.

1.)Make all the position 1 buttons of forms to same div and position 2 buttons to other same div and so on.
2.)Use any technique(like directing to any function or adding an onClick event in jquery) to check the changed class like:-
$(".class_to_be_checked").attr("checked","checked");

Related

how to make action after clicking a radio button on a site made by html, css

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 firefox entering data into a textbox which acts as a radio button needs a double click

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?

jQuery Progress Bar with Radio Buttons

I am creating a progress bar that pops-up and shows you continuous progress as you fill out inputs, and it works well with all input type except radio buttons. This is because each input needs a "required" tag for it to register as progress, however this means I would have to put a required tag for each radio option, so instead of showing you answered the question by selecting one of the radio answers, you have to click on all of the radio buttons. I tried applying the "required" tag to a container holding both radio buttons but it doesn't work.
Here is my codepen so you can see exactly what I am working with.
http://codepen.io/er40/pen/ugdqa
Thanks for any help!
There is a more complicated work around with a required hidden input that changes value based on radios selected, but i think for what you are doing, conceptually, it makes more sense to have a single checkbox there with a value of "yes" because you want to make sure the user selects "yes" before continuing.
right now there are two radio buttons that i can select at the same time and still progress, which doesn't make a lot of sense.
edit: the complicated workaround
add a hidden, required input to the radio group:
<input type="radio" name="radio" value="yes">YES
<input type="radio" name="radio" value="no">NO
<input type="hidden" class="radio_selected" required="required" />
and in your javascript, something along the lines of this to give the hidden input a value:
$('input[type="radio"]').click(function() {
var radio_selected = $(this).next('.radio_selected');
if (radio_selected.val() !== 'true') {
radio_selected.val("true");
}
});
then modify your plugin to detect that change.
this only really works because your radios can't be deselected.

Need to check all radio boxes on a page using javascript

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?

Radio button html missing checked attribute, though Firebug indicates it is checked

Summary of problem statement: Radio button html on the browser does not display the checked attribute, but Firebug indicates that the radio's checked attribute is set as checked.
Tested on
Broswer: FF 3.6.18 and IE8
jQuery: 1.5
MVC3 (Razor)
Details
Using MVC3 (with Razor) I'm rendering the following radio buttons from the server. The desired functionality is that on checking one radio, the other should be unchecked and vice-versa. In other words, the user is allowed to only select one option - say val1 or val2.
<div id="myRadioList">
<div>
<input type="radio" value="val1" onclick="updateFunctionCalledHere(this)" name="myRadioName" id="myRadioName_val1" checked="checked">
</div>
<div>
<input type="radio" value="val2" onclick="updateFunctionCalledHere(this)" name="myRadioName" id="myRadioName_val2">
</div>
</div>
What I'm observing is that if the user toggles the radio selected, the newly selected radio (let's say myRadioName_val2) is shown to be checked using firebug but the html still reflects the other radio button as checked. Because of this, some other validations are failing.
I've tried literally removing all checked attributes of both the radio buttons and then just check the one that's clicked.
This is what I'm doing to set the currently clicked radio, that is not working:
$("#myRadioList > div > input[value='myRadioName_val2]').attr('checked', 'checked');
I'm simplifying my code to avoid posting unnecessary details.
The checked attribute in HTML is the default value.
The checked property in JavaScript refers to the current state of the radio button.
Generally, it's best to let the browser handle the checked state of radio buttons and checkboxes rather than setting it yourself, otherwise you run into these kinds of problems. It's safe to get the current state via prop("checked") as already suggested, or through .is(":checked").
You may also want to consider using syntax like $('#myRadioList').find('input[value="myRadioName_val2"]') or better yet, $('#myRadioName_val2'), as child selectors in jQuery can be rather slow, since they are read right to left.
You should use
$("#myRadioList > div > input[value=myRadioName_val2]").prop('checked', true);
Well, you do have a syntax error withing the jQuery selector. It should be:
$('#myRadioList > div > input[value="myRadioName_val2"]')

Categories