I couldn't find anything obvious for accessing SharePoint Radio Buttons so chucked this together, hopefully useful for someone else :)
Note: The below code/solution is applicable to accessing radio button in a custom SharePoint List forms. To know how to create a custom form in SharePoint Online, read this article
Accessing Radio Button control in SharePoint is little tricky than accessing the radio buttons in HTML. The reason being, radio buttons are rendered as a table instead of a single control as shown below (radio button and it's preview in developer tools - Chrome):
So, each radio button is rendered inside SPAN tag in a table. To access the normal SharePoint controls, we will use either ID or title property but for Radio Buttons it is little complicated.
1. The actual radio button control is in "input" tag
2. The values (Example here: Yes, No) are inside "label" tag
3. But each control (Yes & No) are represented by ID which is generated by SharePoint
4. If you keenly look at the ID, there is "ff41" which is the ID of the control generated randomly by SharePoint.
Now, open the designer, add an ID to the TD of the Radio button so that we can query it easily using JSOM as shown below:
1 2 3 4 | //Radio button change event $("td[id='tdApproved'] input:radio[name*='ff4']").change(function(){ // do something }); |
1 2 3 | //Clear the values of radio button - reset the values of radio button $("td[id='tdApproved'] input[name*='ff4']")[0].checked = false; $("td[id='tdApproved'] input[name*='ff4']")[1].checked = false; |
1 2 3 4 | //Checking the value of radio button if($("td[id='tdApproved'] input:radio[name*='ff4']:checked + label").text() != 'Yes'){ // do something } |
1 2 | //Focus Radio button 1st element in control $("td[id='tdApproved'] input:radio[name*='ff4']:eq(0)").focus(); |
1 2 3 4 5 6 7 8 9 | //Align all Radio Buttons in the page horizontally function HorizontalAlignChoices() { var objSpans = $(".ms-RadioText"); objSpans.each(function () { if ($(this).is("span")) { $(this).closest("tr").css({ "float": "left" }); } }); } |
*** "tdApproved" is the ID of the SharePoint Radio Button Control, "ff4" is the unique ID of the SharePoint Control in your List form. Change this ID according to your form to get the exact result.
Please share your valuable comments which will make me write more and also share this post using the below social buttons to others.
Happy Share(ing)Point!
Update: 21/06/2017
Read this article, to know how to access Checkbox in SharePoint using JQuery 😎
Very good article, just what i needed, many thanks.
ReplyDeleteYou are welcome!
DeleteHi Marutha,
ReplyDeleteThanks for your interesting article. I have a requirement where clicking on a radio button should enable 2 date fields in the same line as the radio button. How would I achieve that?
Thanks,
Pradeep
Hi Marutha, great article! Thanks. I have a requirement to place 2 date fields side by for each choice in the radio button. How can i do this?
ReplyDeleteThanks,
Pradeep
Hi Pradeep,
DeleteI will soon publish an article in a day or two for this requirements. Bit busy with the work. Thank you for your patience. Once published, I will share the link here. You can also subscribe so that you will get the articles in your mailbox :)
Thanks! Looking forward to seeing it.
DeleteHi Marutha, Any updates? :)
DeletePradeep, I was so busy with the work. But I have started this work. Okay, so you want to display two date fields on selecting a radio button? Also, the date fields should be arranged in same row? Is that correct?
DeleteI will share the code before EOD, today. :)
Hey Pradeep,
DeleteHere you go:
$(document).ready(function() {
$("td[id='tdOptions'] input:radio[name*='ff4']").change(function(){
if($("td[id='tdOptions'] input:radio[name*='ff4']:checked + label").text() == 'Option 1'){
$("tr[id='trDate']").show();
}
if($("td[id='tdOptions'] input:radio[name*='ff4']:checked + label").text() == 'Option 2'){
$("tr[id='trDate']").hide();
}
});
});
I have uploaded the List Template (Refer Custom New Form) which I created for your reference. You can download from this link:
https://www.dropbox.com/s/6qanjjqqdrzxw4o/Radio%20Buttons%20using%20Jquery.stp?dl=0
Hi Maruth,
ReplyDeleteThanks a lot. I actually need the date fields in the same row as the option row. If I click on Option 1, the date field should be in the same row as Option 1. How can that be done? Appreciate all your help!
Pradeep
Pradeep, In the list template which I shared, just add the two date controls in the same TR tag where the choices are. Then, create a separate ID for only date controls so that you hide the date controls with that specific ID when you select an option.
DeleteHi Marutha, could you please explain in more detail? In that list template I do see a web part with an xsl editor. What kind of web part is it? Will I have to build a similar xsl for my custom list? Thanks for all your help
ReplyDeleteHi Pradeep, The example which I shared with you in the above comments and also the download link is a custom List form which you can add/remove TR tags. You don't have to build a custom XSL. SharePoint does everything!! You have to just identify the controls using it's title or by ID and do the magic of showing and hiding controls.
DeleteHi Marutha, just to clarify, I will have several options for my radio button. For each choice, I want separate start and end date fields next to the option. How can I achieve this?
ReplyDeleteMany thanks in advance, Pradeep
Hi Pradeep, you can easily do it on Click event of Radio Button. For showing different date fields for the choice selected, you can show/hide the TR tag. You may have to add a ID to the List form/you can do it using JQuery.
Deleteyou are great man!! no words
ReplyDeleteGlad it helped you!
Deletehie marutha,
ReplyDeletei want to know what exactly is to be written here inside this code.
//Radio button change event
$("td[id='tdApproved'] input:radio[name*='ff4']").change(function(){
// do something
});
Hi, You can change/set the value of any other control or display/hide the control which depends upon your requirements.
Delete