This SharePoint tutorial, we will discuss how to Show/hide list column based on radio button selection using jQuery in SharePoint Online/2013/2016/2019.
Here I have a Custom list which has a radio button Gender which has Options Male and Female. Once the user chooses Male, One textbox (Multiline) will appear and if the user chooses Female then another textbox (Single line textbox) will appear.
We will see how we can achieve this using jQuery in SharePoint Online or in SharePoint 2013/2016/2019.
This will work in classic SharePoint list forms and will not work in modern SharePoint list forms.
SharePoint show/hide list column based on radio button selection
Step 1: Login to your site and create a out of box list as per below list.
Step 2 : Here I am using below code to hide /show text box based on radio button value.
<script src="//code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("nobr:contains('If Male')").closest('tr').hide();
$("nobr:contains('If Female')").closest('tr').hide();
$("span[title='Male']>input").change(function(){
if($(this).is(":checked")){
$("nobr:contains('If Male')").closest('tr').hide();
$("nobr:contains('If Female')").closest('tr').hide();
}
});
$("span[title='Female']>input").change(function(){
if($(this).is(":checked")){
$("nobr:contains('If Male')").closest('tr').show();
$("nobr:contains('If Female')").closest('tr').show();
}else{
$("nobr:contains('If Male')").closest('tr').hide();
$("nobr:contains(' If Female')").closest('tr').hide();
}
});
});
</script>
Step 3: Next edit your newForm.aspx and add a script Editor web part. Next, add the above code inside a script editor Web part. Once you added your code, next check the output by clicking in the radio button.
Here the functionality is like, If you click on male then both text box will get hide and if click on Female then you can able to see both text box.
You may like following SharePoint jQuery tutorials:
- Create a Custom Calendar in SharePoint using Rest API and jQuery
- Display SharePoint list data in jQuery data table using Rest API
- Add heading in the default newForm.aspx in SharePoint list using JavaScript and CSS
- Create an organization chart from a list in SharePoint Online/2013/2016 using JavaScript
- Change column ordering in list forms in SharePoint Online/2013/2016
- Different ways to hide/disable quick edit in a list in SharePoint 2013/2016/Online
- SharePoint Rest API Crud Operations
- Create SharePoint Quote of the day web part using Rest API and Bootstrap
- Add Google ReCaptcha in SharePoint Online or SharePoint 2013/2016/2019 (Step by Step tutorial)
- Retrieve and Display TASK status using REST API in SharePoint
- SharePoint get current user id, name, email, display name programmatically
This is all about hide and show Out of box field based on JavaScript and jQuery.
Rajkiran is currently working as a SharePoint Consultant in India . Rajkiran having 7+ years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).
Code to show / hide text box for the 2nd radio button please
Help on this pls
I am new at coding in SharePoint. I have created a form which has multiple radio buttons. I want to hide or show text box based on radio button selection.
1) Field Name: Is this an urgent request
2) Radio button Option: Yes/No
3) Field Name: Justification for urgency
If the user selects Yes, I want the field 3) to be shown else hidden. I have added the below code (your code) in script editor and is working perfect.
Now the question is, I have another field with same Yes/No option and how to expand the code for this:
4) Field Name: Is this critical client
5) Radio button Option: Yes/No
6) Field Name: Brief description of client
If the user selects Yes, I want the field 6) to be shown else hidden.
Code that is working perfect for 1) to 3)
$(function(){
$(“span[title=’Yes’]>input”).change(function(){
if($(this).is(“:checked”)){
$(“nobr:contains(‘Justification for urgency’)”).closest(‘tr’).show();
}
});
$(“span[title=’No’]>input”).change(function(){
if($(this).is(“:checked”)){
$(“nobr:contains(‘Justification for urgency’)”).closest(‘tr’).hide();
}else{
$(“nobr:contains(‘Justification for urgency’)”).closest(‘tr’).hide();
}
});
});
Also, is there a way if we make the hidden text box as mandatory, and while hiding, can it add a text as “NA” and hide.
Any help would be great as I am new to coding.
Thanks!