How to set cfinput as variable?

Im trying to add some <cfif> statements to my <cfform> via radio button so if someone selects radio button (A) they will see this, if they select radio button (B) they will see something different.

If radio button is not the best way to do this what other option do I have to have an action based event allowing different options for different selections.
<cfparam name="billing_info" type="radio" default="pay_credit">
	Check <cfinput name="billing_info"  type="radio" value="pay_check" />
	Purchase Order <cfinput name="billing_info"  type="radio" value="pay_po" /> 
	Bill Agency <cfinput name="billing_info"  type="radio" value="pay_agency" />
	Voucher <cfinput name="billing_info"  type="radio" value="pay_voucher" />
	Credit Card <cfinput name="billing_info"  type="radio" value="pay_credit" checked="yes"/></td>
    </tr>
  <tr>
    <td colspan="6"><cfif billing_info eq "pay_check">Check <cfelse> -- </cfif></td>

Open in new window

tribalboy3000Asked:
Who is Participating?
 
dgrafxConnect With a Mentor Commented:
try something like this

<cfparam name="billing_info" default="pay_credit">
<cfset payList="pay_check,pay_po,pay_agency,pay_voucher,pay_credit">
<script>
function doPay(f) {
for(var i=0;i<f.length;i++) {
      if(f[i].checked) {
            document.getElementById(f[i].value).style.display='inline';      
      }
      else {
            document.getElementById(f[i].value).style.display='none';      
      }
}
}
</script>
<cfoutput>
<tr>
<td align="left" width="25%">
<form>
<cfloop list="#payList#" index="ii">
<nobr>
<input name="billing_info" id="billing_info" type="radio" value="#ii#" onclick="doPay(billing_info)"
      <cfif variables.billing_info is ii> checked</cfif> />
#ucase(listlast(ii,"_"))#
</nobr>
<br>
</cfloop>
</form>
</td>

<td align="left">
<cfloop list="#payList#" index="ii">
<div id="#ii#" style="display:<cfif variables.billing_info is ii>inline<cfelse>none</cfif>;">
this is the <b>#ii# payment method</b><br>
put appropriate form fields in here<br>
you can invoke a component that displays the correct fields<br>
cfinvoke component="???" method="getPayFields">
      cfinvokeargument name="payType" value="#ii#"
/cfinvoke
</div>
</cfloop>
</td>
</tr>
</cfoutput>
0
 
Mr_NilCommented:
Remember that ColdFusion is a server-side technology.  What you're trying to do is Client-side.

You would need to enable/disable or make visible/invisible additional fields using javascript via the onChange attribute on the check boxes.  
0
 
tribalboy3000Author Commented:
Can I have an example of the javascript?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
tribalboy3000Author Commented:
Can you please add to your example by showing me an instance of the different form fields that show up when the radios button are selected. I will not be using the component example I need to keep this as simple as possible.
0
 
tribalboy3000Author Commented:
Okay after some trial and error got the code to work the way I wanted it, Here is the end result.
<cfloop list="#payList#" index="ii">
<nobr>
<cfinput name="billing_info" id="billing_info" type="radio" value="#ii#" onclick="doPay(billing_info)" checked="no" required="yes"/>
#ucase(listlast(ii,"_"))#</nobr>
<br>
</cfloop></td>
    </tr>
  </table>
<div id="pay_check" style="display:<cfif variables.billing_info is pay_check>inline<cfelse>none</cfif>;">
  <table width="70%" border="0" cellpadding="5" cellspacing="3" bgcolor="##FFFFFF" class="body">
    <td colspan="6">Check </td>
  </table>
</div>
<div id="pay_po" style="display:<cfif variables.billing_info is pay_po>inline<cfelse>none</cfif>;">
  <table width="70%" border="0" cellpadding="5" cellspacing="3" bgcolor="##FFFFFF" class="body">
    <td colspan="6">Purchase Order </td>
  </table>
  </div>
<div id="pay_agency" style="display:<cfif variables.billing_info is pay_agency>inline<cfelse>none</cfif>;">
  <table width="70%" border="0" cellpadding="5" cellspacing="3" bgcolor="##FFFFFF" class="body">
    <td colspan="6">Bill Agency </td>
  </table>
  </div>
<div id="pay_voucher" style="display:<cfif variables.billing_info is pay_voucher>inline<cfelse>none</cfif>;">
  <table width="70%" border="0" cellpadding="5" cellspacing="3" bgcolor="##FFFFFF" class="body">
    <td colspan="6">Voucher</td>
 </table>
 </div>

Open in new window

0
 
tribalboy3000Author Commented:
Thanks for the code samples, it really helped.
0
 
dgrafxCommented:
I'm glad you got it and good luck ...
0
All Courses

From novice to tech pro — start learning today.