Solved

How do I write the Javascript for my coldFusion form that populates a Readonly field choice from RadioGroup or TextField?

Posted on 2008-10-06
4
142 Views
Last Modified: 2013-12-16
The RadioGroup and the Text Field must be named as exactly as is for a coldFusion queries.
<cfparam name="client.ContribLevel" default="">

<cfparam name="client.OtherLevel" default="">

<cfparam name="client.LevelCost" default="">

<cfheader name="Expires" value="Sun, 06 Nov 1994 08:49:37 GMT">

<cfheader name="Pragma" value="no-cache">

<cfheader name="cache-control" value="no-cache, no-store, must-revalidate">

<cfform name="Form"

				method="POST"

				action="ssContributionVALID.cfm"

				preservedata="YES">    

    <p><b>Contribution Levels (please choose one):</b><br />    

    <input type="radio"

						name="ContribLevel"

						value="Platinum" 

						onclick="document.forms[1].LevelCost.value=25000">

        &nbsp;&nbsp;Platinum $25,000<br />

        <input type="radio"

						name="ContribLevel"

						value="Gold" 

						onclick="document.forms[1].LevelCost.value=10000">

        &nbsp;&nbsp;Gold $10,000<br />

        <input type="radio"

						name="ContribLevel"

						value="Silver" 

						onclick="document.forms[1].LevelCost.value=5000">

        &nbsp;&nbsp;Silver $5,000<br />

        <input type="radio"

						name="ContribLevel"

						value="Benefactor" 

						onclick="document.forms[1].LevelCost.value=2500">

        &nbsp;&nbsp;Benefactor $2,500<br />

        <input type="radio"

						name="ContribLevel"

						value="Friend" 

						onclick="document.forms[1].LevelCost.value=1000">

        &nbsp;&nbsp;Friend $1,000<br />

        <input type="radio"

						name="ContribLevel"

						value="Other">

        &nbsp;&nbsp;Other&nbsp;&nbsp;$&nbsp;<input type="TEXT"

		  name="OtherLevel"

		  size="8"

		  onchange="document.forms[1].LevelCost.value=OtherLevelAmount()">

      <p align="left"><b>My Contribution</b>&nbsp;$

        <input type="text" name="LevelCost" value="<cfoutput>#client.LevelCost#</cfoutput>">

        </p>

  </cfform>

Open in new window

0
Comment
Question by:dawnvvb
  • 2
  • 2
4 Comments
 
LVL 36

Expert Comment

by:SidFishes
ID: 22653142
try this
<cfparam name="client.ContribLevel" default="">

<cfparam name="client.OtherLevel" default="">

<cfparam name="client.LevelCost" default="">

<cfheader name="Expires" value="Sun, 06 Nov 1994 08:49:37 GMT">

<cfheader name="Pragma" value="no-cache">

<cfheader name="cache-control" value="no-cache, no-store, must-revalidate">

<cfForm name="myForm"

                                method="POST"

                                action="ssContributionVALID.cfm"

                                 preservedata="YES">    

    <p><b>Contribution Levels (please choose one):</b><br />    

    <input type="radio"

                                                name="ContribLevel"

                                                value="Platinum" 

                                                onclick="document.myForm.LevelCost.value=25000">

          Platinum $25,000<br />

        <input type="radio"

                                                name="ContribLevel"

                                                value="Gold" 

                                                onclick="document.myForm.LevelCost.value=10000">

          Gold $10,000<br />

        <input type="radio"

                                                name="ContribLevel"

                                                value="Silver" 

                                                onclick="document.myForm.LevelCost.value=5000">

          Silver $5,000<br />

        <input type="radio"

                                                name="ContribLevel"

                                                value="Benefactor" 

                                                onclick="document.myForm.LevelCost.value=2500">

          Benefactor $2,500<br />

        <input type="radio"

                                                name="ContribLevel"

                                                value="Friend" 

                                                onclick="document.myForm.LevelCost.value=1000">

          Friend $1,000<br />

        <input type="radio"

                                                name="ContribLevel"

                                                value="Other"

												onclick="document.myForm.LevelCost.value=OtherLevel.value">

          Other  $ <input type="TEXT"

                  name="OtherLevel"

				  

                  size="8"

                  onchange="document.myForm.LevelCost.value=this.value">

      <p align="left"><b>My Contribution</b> $

        <input type="text" name="LevelCost" id = "LevelCost" value="<cfoutput>#LevelCost#</cfoutput>">

        </p>

  </cfForm>

Open in new window

0
 
LVL 63

Accepted Solution

by:
Zvonko earned 125 total points
ID: 22654458
All you need to change in your original form is the form index from 1 to 0.
Like this:
onchange="document.forms[0].LevelCost.value=this.value">

And for the OtherLevel event handler use the reference: this.value


0
 
LVL 63

Expert Comment

by:Zvonko
ID: 22654471
Sorry, SidFishes proposed already this.value
0
 
LVL 36

Expert Comment

by:SidFishes
ID: 22669280
did you even try my post? it -does- work and in fact adds an additional feature which your original code doesn't have in that it updates levelcost to other amount when the radio for other is clicked - expecting a user to know they must hit enter and not providing an additional path is not great design.
0

Featured Post

Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This guide will walk you through the essential considerations and tech stack for building scalable websites. Know how to grow your business the smart way!
The purpose of this video is to demonstrate how to create a Printer Friendly PDF on a WordPress Page. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome Screenshot” Google Chrome Extension, and SmallPDF.com Log…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

947 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now