My requirement is that i have a radio button on a New Item form with the values of Yes/No. If No is selected, i need to be able to have 10 fields appear (single line of text) so that the end user can fill in additional information (up to ten line items). How might i accomplish this in SharePoint 2013/Online?
I believe it's possible to make the single line of text fields required if they are on the form using OOTB validation, but what if i want those fields to be hidden until the radio button is selected? I would imagine this would be a javascript/jQuery solution?
EDIT: Added screenshot of form.
EDIT: Updated with solution.
Thanks to everyone who replied for your insights. I ended up creating a New Item form in SP Designer and using jQuery to hide the fields and show them when the "Short all items on PO?" field equaled "No". I changed the field type to choice/drop down as i'm not sure how to code this using radio buttons. Everything i've tried has failed within SP as far as grabbing the selected value of a radio button.
I initially tried to wrap all 10 fields in a div/tr/td/span (tried just about everything) but this kept throwing a web part error or just wouldn't hide the fields. I ended up adding a class to each of the ten fields and hiding them with jQuery. For those interested, below is the code i'm using which is accomplishing what i need. Originally i started the script by just hiding the fields by using the class selector in jQuery. I ran into an issue when i would forget a required field as the form would then reload and hide the fields again. Adding the if statement in the beginning to check the value corrected this.
<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">
$(document).ready(function(){
var shortVal = $("select[title='Short all items on PO?'] option:selected").val();
if(shortVal === "Yes" || shortVal === ""){
$(".lineItems").css("display", "none");
}
$("select[title='Short all items on PO?']").change(function(){
var shortVal = $("select[title='Short all items on PO?'] option:selected").val();
if(shortVal === "No"){
$(".lineItems").css("display", "");
}
else if(shortVal === "Yes"){
$(".lineItems").css("display", "none");
}
});
});
</script>