Link to home
Create AccountLog in
Avatar of traport
traport

asked on

Making a radio button required in show/hide field

The following is working thanks to _agx_ Answered Question but the radio button (payApplicable) is not validating for some reason. I would like to make that required as well as adding code in here to make another set of radio buttons - source_selection2 - (which show regardless) required hopefully w/in the same code. I just put some dummy code for source_selection2 pardon the mess.

<!--- for testing only, defaults should be set in the application file ... --->
<cfparam name="session.masterOnly" default="-1" >
<cfparam name="session.to1_begin" default="" >
<cfparam name="session.to1_end" default="" >
<cfparam name="session.to1_chargeNumber" default="" >

<!--- if something was selected, update values --->
<!--- needs validation too --->
<cfif structKeyExists(FORM, "masterOnly")>
	<cfset session.masterOnly = FORM.masterOnly >
	<cfset session.to1_begin = FORM.to1_begin >
	<cfset session.to1_end = FORM.to1_end >
	<cfset session.to1_chargeNumber = FORM.to1_chargeNumber >
</cfif>

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('input[name=masterOnly]').change(function() {
			updateExtraFields();
		});
		// set initial state
		updateExtraFields();
 	});

 	function updateExtraFields() {
		// show extra fields when "0" button is selected
		var selectedValue = $('input[name=masterOnly]:checked').val();
		var showTextFields = selectedValue && selectedValue == 0;
		toggleExtraFields(showTextFields);
 	}
 	
 	function toggleExtraFields(makeVisible) {
 		// clear fields when NOT visible
 		if (!makeVisible) {
 			document.getElementById('to1_begin').value = '';
 			document.getElementById('to1_end').value = '';
 			document.getElementById('to1_chargeNumber').value = '';
                                                     document.getElementById('to1_payApplicable').value = '';
 		}
 		// hide/show extra fields
		$('.extraFields').toggle(makeVisible);
 	}
 	
	function areFieldsRequired(frm, field, value) {
		// determine if this extra field is required
		var selectedValue = $('input[name=masterOnly]:checked').val();
		var isRequired = selectedValue && selectedValue == 0;

		// return true if validation is successful 
        // ie Value is optional OR its already populated
        // returning false is what triggers validation message 
		var trimmedValue = value.replace(/\s+/g, '');
		return !isRequired || trimmedValue.length > 0;
	}
</script>
</head>
<body>
<cfoutput>
<a href="#CGI.SCRIPT_NAME#?rand=#now()#">Reload page</a>
</cfoutput>
<cfform method="post">
<table>
 	<tr>
    	<td></td>
    	<td class="item2">
        <input id="masterOnly" type="radio" name="masterOnly" value="1" <cfif session.masterOnly EQ 1>checked</cfif>> Master Contract Only <A href="help.cfm?Info=14" onclick="NewWindow(this.href,'Contact','800','500','yes');return false;" ><img src="../images/info_buttom.gif" border="0"/></A></td>
  	</tr>
    <tr>
    	<td></td>
    	<td class="items2"><input id="masterOnly" type="radio" name="masterOnly" value="0" <cfif session.masterOnly EQ 0>checked</cfif>>  Master Contract and Task Order 1</td>
  	</tr>
                <!--- set of radio buttons to make required --->
            <tr>
               <td><input type="radio" name="source_selection2" value="Yes">Yes<br>
                      <input type="radio" name="source_selection2" value="I don't know">I don't know<br>
                      <input type="radio" name="source_selection2" value="Maybe">Maybe
               </td>
             </tr>

   <!--- section to toggle --->
	<tr class="extraFields">
        <td class="Item2">Task Order 1 Period of Performance:</td>
        <td><cfinput type="Text" id="to1_begin" name="to1_begin" size="12" value="#session.to1_begin#"
				onValidate="areFieldsRequired"
				message="Period start date is required when Master Contract and Task Order 1 is selected">
     to
        <cfinput Type="Text" id="to1_end" Name="to1_end" Size="12" value="#session.to1_end#"
				onValidate="areFieldsRequired"
				message="Period end date is required when Master Contract and Task Order 1 is selected">
				&nbsp;&nbsp;(mm/dd/yyyy)&nbsp;&nbsp;
      	</td>
    </tr>
    <tr class="extraFields">
        <td class="Item2">Task Order 1 Charge Number</td>
        <td><cfinput type="Text" id="to1_chargeNumber" name="to1_chargeNumber" 
				size="50" value="#session.to1_chargeNumber#" 
				maxlength="100"
				onValidate="areFieldsRequired"
				message="Charge Number is required when Master Contract and Task Order 1 is selected">
		</td>
    </tr> 
   <tr class="extraFields">
  <td class="item2">Is this rate applicable to all task orders issued under this master contract? <span class="required">*</span></td>
        <td><input type="radio" name="payApplicable" value="Yes" <cfif session.payApplicable EQ "Yes" or session.payApplicable EQ "">checked</cfif> onValidate="areFieldsRequired" message="Is pay rate applicable to all task orders issued under this master contract?" /> Yes 
        	<input type="radio" name="payApplicable" value="No"onValidate="areFieldsRequired" message="Is pay rate applicable to all task orders issued under this master contract?" <cfif session.payApplicable EQ "No">checked</cfif> /> No
      	</td>
 </table> 
	<input type="submit" name="submitTest">
</cfform>
</body>
</html>

Open in new window

Avatar of _agx_
_agx_
Flag of United States of America image

Use cfinput for the radio buttons. Then you can use CF's "required" attribute to make them mandatory

<!--- for testing only, defaults should be set in the application file ... --->
<cfparam name="session.masterOnly" default="-1" >
<cfparam name="session.to1_begin" default="" >
<cfparam name="session.to1_end" default="" >
<cfparam name="session.to1_chargeNumber" default="" >
<cfparam name="session.payApplicable" default="" >

<!--- if something was selected, update values --->
<!--- needs validation too --->
<cfif structKeyExists(FORM, "masterOnly")>
	<cfset session.masterOnly = FORM.masterOnly >
	<cfset session.to1_begin = FORM.to1_begin >
	<cfset session.to1_end = FORM.to1_end >
	<cfset session.to1_chargeNumber = FORM.to1_chargeNumber >
</cfif>

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('input[name=masterOnly]').change(function() {
			updateExtraFields();
		});
		// set initial state
		updateExtraFields();
 	});

 	function updateExtraFields() {
		// show extra fields when "0" button is selected
		var selectedValue = $('input[name=masterOnly]:checked').val();
		var showTextFields = selectedValue && selectedValue == 0;
		toggleExtraFields(showTextFields);
 	}
 	
 	function toggleExtraFields(makeVisible) {
 		// clear fields when NOT visible
 		if (!makeVisible) {
 			document.getElementById('to1_begin').value = '';
 			document.getElementById('to1_end').value = '';
 			document.getElementById('to1_chargeNumber').value = '';
			document.getElementById('to1_payApplicable').value = '';
 		}
 		// hide/show extra fields
		$('.extraFields').toggle(makeVisible);
 	}
 	
	function areFieldsRequired(frm, field, value) {
		// determine if this extra field is required
		var selectedValue = $('input[name=masterOnly]:checked').val();
		var isRequired = selectedValue && selectedValue == 0;

		// return true if validation is successful 
        // ie Value is optional OR its already populated
        // returning false is what triggers validation message 
		var trimmedValue = value.replace(/\s+/g, '');
		return !isRequired || trimmedValue.length > 0;
	}
</script>
</head>
<body>
<cfoutput>
<a href="#CGI.SCRIPT_NAME#?rand=#now()#">Reload page</a>
</cfoutput>
<cfform method="post">
<table>
 	<tr>
    	<td></td>
    	<td class="item2">
        	<cfinput id="masterOnly" type="radio" name="masterOnly" value="1" 
					checked="#session.masterOnly EQ 1#"
					required="true"
					message="Please select a Master Contract option"> 
					Master Contract Only <A href="help.cfm?Info=14" onclick="NewWindow(this.href,'Contact','800','500','yes');return false;" ><img src="../images/info_buttom.gif" border="0"/></A>
		</td>
  	</tr>
    <tr>
    	<td></td>
    	<td class="items2">
			<cfinput id="masterOnly" type="radio" name="masterOnly" value="0" 
					checked="#session.masterOnly EQ 0#">
				Master Contract and Task Order 1
		</td>
  	</tr>
	<!--- set of radio buttons to make required --->
    <tr>
    	<td><cfinput type="radio" name="source_selection2" value="Yes"
					required="true"
					message="Please select a source_selection2 option"> 
					Yes<br>
        	<cfinput type="radio" name="source_selection2" value="I don't know">I don't know<br>
            <cfinput type="radio" name="source_selection2" value="Maybe">Maybe
		</td>
    </tr>

   <!--- section to toggle --->
	<tr class="extraFields">
        <td class="Item2">Task Order 1 Period of Performance:</td>
        <td><cfinput type="Text" id="to1_begin" name="to1_begin" size="12" value="#session.to1_begin#"
				onValidate="areFieldsRequired"
				message="Period start date is required when Master Contract and Task Order 1 is selected">
     to
        <cfinput Type="Text" id="to1_end" Name="to1_end" Size="12" value="#session.to1_end#"
				onValidate="areFieldsRequired"
				message="Period end date is required when Master Contract and Task Order 1 is selected">
				&nbsp;&nbsp;(mm/dd/yyyy)&nbsp;&nbsp;
      	</td>
    </tr>
    <tr class="extraFields">
        <td class="Item2">Task Order 1 Charge Number</td>
        <td><cfinput type="Text" id="to1_chargeNumber" name="to1_chargeNumber" 
				size="50" value="#session.to1_chargeNumber#" 
				maxlength="100"
				onValidate="areFieldsRequired"
				message="Charge Number is required when Master Contract and Task Order 1 is selected">
		</td>
    </tr> 
   <tr class="extraFields">
  <td class="item2">Is this rate applicable to all task orders issued under this master contract? <span class="required">*</span></td>
        <td><input type="radio" name="payApplicable" value="Yes" <cfif session.payApplicable EQ "Yes" or session.payApplicable EQ "">checked</cfif> onValidate="areFieldsRequired" message="Is pay rate applicable to all task orders issued under this master contract?" /> Yes 
        	<input type="radio" name="payApplicable" value="No"onValidate="areFieldsRequired" message="Is pay rate applicable to all task orders issued under this master contract?" <cfif session.payApplicable EQ "No">checked</cfif> /> No
      	</td>
 </table> 
	<input type="submit" name="submitTest">
</cfform>
</body>
</html>

Open in new window

Avatar of traport
traport

ASKER

I always get an error when I try to make a cfinput with any <cfif> statements within...

Invalid token c found on line 626 at column 69.  
The CFML compiler was processing:

A cfinput tag beginning on line 626, column 14.
A cfinput tag beginning on line 626, column 14.
A cfinput tag beginning on line 626, column 14.
 

Open in new window



Anyway around that other than some conditional code around it and duplicating the cfinput code?
Avatar of traport

ASKER

When I surrond it in conditional tags:

 
<!--- TSP 11/16/2012 --->
    <tr class="extraFields
      <td class="item2">Is this rate applicable to all task orders issued under this master contract? <span class="required">*</span></td>
      <td>
        <cfif session.payApplicable NEQ "">
            <cfif session.payApplicable EQ "Yes">
                <cfset boolPay = "yes">
            <cfelse>
                <cfset boolPay = "No">
            </cfif>
 
   <cfinput type="checkbox" name="payApplication" value="Yes" checked="#boolPay#">
   <cfelse>
        	<cfinput type="radio" name="payApplicable" value="Yes" required="yes" message="Is this rate applicable to all task orders issued under this master contract?" /> Yes 
        	<cfinput type="radio" name="payApplicable" value="No" required="yes" message="Is this rate applicable to all task orders issued under this master contract?" /> No
    </cfif>
        </td>
       </tr>

Open in new window

And it doesn't appear, the required statement still shows up in the pop-up. Weird.
Yep, you can't use cfif tags inside a cfinput. So I used a different approach ie the "checked" attribute.  The example should force both radio buttons to be mandatory. Try it an let me know if it does what you want.
Oops, I didn't see your 2nd post.  Here's the trick I used for the radio buttons in place of cfif. Basically just use an equality check for the buttons value like "EQ 1" or "EQ 0". If it evualates to true, the button will be checked. Otherwise it'll be unchecked.  See the full example in my 1st response.
 
<cfinput type="radio" name="x" value="0"  checked="#session.masterOnly EQ 0#" ...>
<cfinput type="radio" name="x" value="1"   checked="#session.masterOnly EQ 1#" ...>
Avatar of traport

ASKER

Is there a way to make these fields required using the areFieldsRequired script? I can't seem to make that work. That would be the easiest thing.

$(document).ready(function() {
		$('input[name=master]').change(function() {
			updateExtraFieldsMaster();
		});
		// set initial state
		updateExtraFieldsMaster();
 	});

 	function updateExtraFieldsMaster() {
		// show extra fields when "0" button is selected
		var selectedValue = $('input[name=master]:checked').val();
		var showTextFields = selectedValue && selectedValue == '' || selectedValue == -1;
		//var showTextFields = selectedValue && selectedValue == 0;
		toggleExtraFieldsMaster(showTextFields);
 	}
 	
 	function toggleExtraFieldsMaster(makeVisible) {
 		// clear fields when NOT visible
 		if (!makeVisible) {
 			document.getElementById('payApplicable').value = '';
 		}
 		// hide/show extra fields
		$('.extraFieldsMaster').toggle(makeVisible);
 	}
 	
	function areFieldsRequiredMaster(frm, field, value) {
		// determine if this extra field is required
		var selectedValue = $('input[name=master]:checked').val();
		//var isRequired = selectedValue && selectedValue == 0;
		var isRequired = selectedValue && selectedValue == '' || selectedValue == -1;

		// return true if validation is successful 
        // ie Value is optional OR its already populated
        // returning false is what triggers validation message 
		var trimmedValue = value.replace(/\s+/g, '');
		return !isRequired || trimmedValue.length > 0;
	}

Open in new window

<td>
<input type="radio" name="payApplicable" value="Yes" <cfif session.payApplicable EQ "Yes">checked</cfif> onValidate="areFieldsRequiredMaster" message="Is pay rate applicable to all task orders issued under this master contract?" /> Yes 
 <input type="radio" name="payApplicable" value="No " <cfif session.payApplicable EQ "No">checked</cfif> onValidate="areFieldsRequiredMaster" message="Is pay rate applicable to all task orders issued under this master contract?" /> No
</td>

Open in new window

Oh sorry.. I misread the requirement.  Duh!

It's tricky because you're already doing other validation on that field. Let me think about it a minute to find the best way to link the two.
ASKER CERTIFIED SOLUTION
Avatar of _agx_
_agx_
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of traport

ASKER

Thank you. This is excellent! You always come to the rescue!
Glad I could help :)