Getting Value of Radio Button on SharePoint 2013 Edit Form using jQuery

Question

EDIT: updated verbiage to reflect this is specifically a Radio Button choice field. The below script works when the choice is set to display in a drop down. I'd like to be able to do the equivalent when the display type is set to Radio Buttons.

I am trying to get the value of a choice field (set to display as radio buttons) using jQuery and SharePoint Online. I'm adding the script to a script editor web part on the edit form.

    <script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" language="javascript">
       function PreSaveAction() {
          var myDesVal = $("select[title='Destruction Approval'] option:selected").val();
          alert(myDesVal);   
}
    </script>

The above returns undefined when a value is selected and I click the Save button. I would eventually like to make another field required if a particular Radio Button is selected.

Answer 1

Any modern browser does not need jQuery

document.querySelector("select[title='Destruction Approval'] option[selected]").innerHTML;

Will do the same as your code

But... radio-buttons are not a select with option elements...

They are input elements with the checked attribute set for the selected radio-button

document.querySelector("input[id^='Destruction Approval'][checked='checked']");

will return you the element or null to use in a condition

• http://blog.romanliutikov.com/post/63383858003/how-to-forget-about-jquery-and-start-using-native

Answer 2

Change .val() to .text(). Also be sure to add </script> to the end.

If you're only looking to do validation with it, though, you could use the OOB list validation to require a field if a certain value from another field is chosen.

Answer 3

UPDATE: I ended up changing the column type to a drop down instead of radio buttons.

That said, I did recently have another project which required me to capture the value of a radio button. In looking at the code in Chrome developer tools, it appears as though SharePoint doesn't give a title to radio button fields as it does with other field types, but it does give a unique name viewable on each radio button which I was able to use to capture the value. I was able to return the value of the radio option selected with the below jQuery.

    var category = $("input[name='ctl00$ctl40$g_b619d8cf_c1d2_48d9_a627_48d5ea3f4e3f$ff181$ctl00$RadioButtons']:checked").val();

Answer 4

You don't need a script to accomplish this. Go to List Settings >> Validation Settings, and enter a formula that must be true and define a User Message that the user will see if the formula is false.

=OR([Destruction Approval]="Destroy",AND([Destruction Approval]="Retain",NOT(ISBLANK([Destruction Date]))))`

Answer 5

Can you try this code?

if($("td[id='tdID'] input:radio[name*='ff4']:checked +  label").text()   != 'Yes'){
// do something

}

*tdID is the id of the TD tag which has radio button control and 'ff4' is the ID of the SharePoint control.

Hope the below detailed post helps you in accessing the radio Buttons using JQuery in SharePoint. (Note: this helps when you have your List form customized in SPD)

Accessing Radio Buttons using JQuery in SharePoint Online