Changing Input based on buttons pressed [Archive]

Click to See Complete Forum and Search --> : Changing Input based on buttons pressed

rwaring

11-18-2003, 10:10 AM

I asked this at the tail end of an answered message, but thought I'd try to see if anyone can help in a new post. The original post is here
http://webforums.macromedia.com/coldfusion/messageview.cfm?catid=7&threadid=723495

-----
How can I have another button pressed, that changes the values based on what's in there.

For example, button 1 values can be changes depending on which radio button the initially clicked, and a 2nd button.

After pressing the 1st button 1st option

Input 1 = 10, 20, 30, 40

If I pressed 1st buttons 2nd option

Input 1 = 100, 200, 300, 400

If I pressed 1st buttons 3rd option

Input 1 = 1000, 2000, 3000, 4000

Then on the 2nd button, I want to choose option A or B
Once this is clicked, I need to see what values are in the Input 1 box, and replace them with A or B values depending on what's initially there, meaning

If Input 1 = 10, 20, 30, 40 then set Input 1 = 10.5, 20.5, 30.5, 40.5
If Input 1 = 100, 200, 300, 400 then set Input 1 = 100.75, 200.75, 300.75, 400.75
etc..

I'm just curious how a 2nd button can look for a 1st buttons input and change it accordingly. Any ideas?

Mr J

11-18-2003, 04:02 PM

Just a bit confused with your question.

How many inputs do you have?

Here's what I have so far

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>

<script>
num=new Array()
num[0]=new Array(10,20,30,40)
num[1]=new Array(100,200,300,400)
num[2]=new Array(1000,2000,3000,4000)

incr=10

function showme(){
count=0
for(i=0;i<document.f1.length;i++){
if(document.f1.elements[i].checked==true){
this_radio=i
}
if(document.f1.elements[i].type=="text"){
count++
}
}

for(i=0;i<count;i++){
document.f1["t"+i].value=num[this_radio][i]
}

}

function chkme(){
for(i=0;i<count;i++){

if(this_radio==0){
document.f1["t"+i].value=num[this_radio][i]+".50"
}

if(this_radio==1){
document.f1["t"+i].value=num[this_radio][i]+".75"
}

if(this_radio==2){
document.f1["t"+i].value=num[this_radio][i]+".25"
}

}

}

</script>

<form name="f1">
<input type="radio" name="r1" checked> 10
<input type="radio" name="r1"> 100
<input type="radio" name="r1"> 1000
<P><input type="button" value="Click Me" onclick="showme()">
<P><input type="text" name="t0"><BR>
<input type="text" name="t1"><BR>
<input type="text" name="t2"><BR>
<input type="text" name="t3">

<P><input type="button" value="Click Me" onclick="chkme()">
</form>

<div id="display"></div>
</BODY>
</HTML>

rwaring

11-21-2003, 01:54 PM

This was close to what I'm getting at.

I have 18 radio buttons.
Each one has four dollar amount values.

Based on which of the 18 you pick, four input boxes are populated with the four values for the selected radio button.

Immediately below it, I have three radio options. Each option is a different set (3 total sets) of each of the values contained in the initial 18 values.

Bascially, each of the 18 buttons has three sets of the same dollar amounts. The three radio buttons below it represent years, button one of the three at the bottom of the form shows me select button of the 18's 2001 dollar amounts, button two of the three at the bottom of the form shows me the selected button of the 18's 2002 dollar amounts, and button three of the three at the bottom of the form shows me the selected button of the 18's 2003 dollar amounts.

Also, a user CAN not select one of the three unless he's picked on of the 18 options above it first.

This is kicking my butt, any help is appreciated.
Hope that makes better sense.

Mr J

11-21-2003, 03:57 PM

Lets see if we're getting a little closer

<script>
year0=new Array() // default array
year0[0]=new Array(1.1,1.2,1.3,1.4)
year0[1]=new Array(2.1,2.2,2.3,2.4)
year0[2]=new Array(3.1,3.2,3.3,3.4)
year0[3]=new Array(4.1,4.2,4.3,4.4)
year0[4]=new Array(5.1,5.2,5.3,5.4)
year0[5]=new Array(6.1,6.2,6.3,6.4)
year0[6]=new Array(7.1,7.2,7.3,7.4)
year0[7]=new Array(8.1,8.2,8.3,8.4)
year0[8]=new Array(9.1,9.2,9.3,9.4)
year0[9]=new Array(10.1,10.2,10.3,10.4)
year0[10]=new Array(11.1,11.2,11.3,11.4)
year0[11]=new Array(12.1,12.2,12.3,12.4)
year0[12]=new Array(13.1,13.2,13.3,13.4)
year0[13]=new Array(14.1,14.2,14.3,14.4)
year0[14]=new Array(15.1,15.2,15.3,15.4)
year0[15]=new Array(16.1,16.2,16.3,16.4)
year0[16]=new Array(17.1,17.2,17.3,17.4)
year0[17]=new Array(18.1,18.2,18.3,18.4)

year1=new Array()
year1[0]=new Array(2001,1.2,1.3,1.4)
year1[1]=new Array(2001,2.2,2.3,2.4)
year1[2]=new Array(2001,3.2,3.3,3.4)
year1[3]=new Array(2001,4.2,4.3,4.4)
year1[4]=new Array(2001,5.2,5.3,5.4)
year1[5]=new Array(2001,6.2,6.3,6.4)
year1[6]=new Array(2001,7.2,7.3,7.4)
year1[7]=new Array(2001,8.2,8.3,8.4)
year1[8]=new Array(2001,9.2,9.3,9.4)
year1[9]=new Array(2001,10.2,10.3,10.4)
year1[10]=new Array(2001,11.2,11.3,11.4)
year1[11]=new Array(2001,12.2,12.3,12.4)
year1[12]=new Array(2001,13.2,13.3,13.4)
year1[13]=new Array(2001,14.2,14.3,14.4)
year1[14]=new Array(2001,15.2,15.3,15.4)
year1[15]=new Array(2001,16.2,16.3,16.4)
year1[16]=new Array(2001,17.2,17.3,17.4)
year1[17]=new Array(2001,18.2,18.3,18.4)

year2=new Array()
year2[0]=new Array(2002,1.2,1.3,1.4)
year2[1]=new Array(2002,2.2,2.3,2.4)
year2[2]=new Array(2002,3.2,3.3,3.4)
year2[3]=new Array(2002,4.2,4.3,4.4)
year2[4]=new Array(2002,5.2,5.3,5.4)
year2[5]=new Array(2002,6.2,6.3,6.4)
year2[6]=new Array(2002,7.2,7.3,7.4)
year2[7]=new Array(2002,8.2,8.3,8.4)
year2[8]=new Array(2002,9.2,9.3,9.4)
year2[9]=new Array(2002,10.2,10.3,10.4)
year2[10]=new Array(2002,11.2,11.3,11.4)
year2[11]=new Array(2002,12.2,12.3,12.4)
year2[12]=new Array(2002,13.2,13.3,13.4)
year2[13]=new Array(2002,14.2,14.3,14.4)
year2[14]=new Array(2002,15.2,15.3,15.4)
year2[15]=new Array(2002,16.2,16.3,16.4)
year2[16]=new Array(2002,17.2,17.3,17.4)
year2[17]=new Array(2002,18.2,18.3,18.4)

year3=new Array()
year3[0]=new Array(2003,1.2,1.3,1.4)
year3[1]=new Array(2003,2.2,2.3,2.4)
year3[2]=new Array(2003,3.2,3.3,3.4)
year3[3]=new Array(2003,4.2,4.3,4.4)
year3[4]=new Array(2003,5.2,5.3,5.4)
year3[5]=new Array(2003,6.2,6.3,6.4)
year3[6]=new Array(2003,7.2,7.3,7.4)
year3[7]=new Array(2003,8.2,8.3,8.4)
year3[8]=new Array(2003,9.2,9.3,9.4)
year3[9]=new Array(2003,10.2,10.3,10.4)
year3[10]=new Array(2003,11.2,11.3,11.4)
year3[11]=new Array(2003,12.2,12.3,12.4)
year3[12]=new Array(2003,13.2,13.3,13.4)
year3[13]=new Array(2003,14.2,14.3,14.4)
year3[14]=new Array(2003,15.2,15.3,15.4)
year3[15]=new Array(2003,16.2,16.3,16.4)
year3[16]=new Array(2003,17.2,17.3,17.4)
year3[17]=new Array(2003,18.2,18.3,18.4)

which_year=0

function showme(){
for(i=0;i<document.f1.r2.length;i++){ // get r2 value
if(document.f1.r2[i].checked==true){
which_year=document.f1.r2[i].value
}
}

for(i=0;i<document.f1.r1.length;i++){ // get r1
if(document.f1.r1[i].checked==true){
this_radio=i
}
}

for(i=0;i<4;i++){
document.f1["t"+i].value=window['year' + which_year][this_radio][i]
}

}

</script>

<form name="f1">
<input type="radio" name="r1" onclick="showme()"> 1
<input type="radio" name="r1" onclick="showme()"> 2
<input type="radio" name="r1" onclick="showme()"> 3
<input type="radio" name="r1" onclick="showme()"> 4
<input type="radio" name="r1" onclick="showme()"> 5
<input type="radio" name="r1" onclick="showme()"> 6<BR>
<input type="radio" name="r1" onclick="showme()"> 7
<input type="radio" name="r1" onclick="showme()"> 8
<input type="radio" name="r1" onclick="showme()"> 9
<input type="radio" name="r1" onclick="showme()"> 10
<input type="radio" name="r1" onclick="showme()"> 11
<input type="radio" name="r1" onclick="showme()"> 12<BR>
<input type="radio" name="r1" onclick="showme()"> 13
<input type="radio" name="r1" onclick="showme()"> 14
<input type="radio" name="r1" onclick="showme()"> 15
<input type="radio" name="r1" onclick="showme()"> 16
<input type="radio" name="r1" onclick="showme()"> 17
<input type="radio" name="r1" onclick="showme()"> 18

<P>
<input type="radio" name="r2" value="1" onclick="showme()"> A
<input type="radio" name="r2" value="2" onclick="showme()"> B
<input type="radio" name="r2" value="3" onclick="showme()"> C

<P>
<input type="text" name="t0"><BR>
<input type="text" name="t1"><BR>
<input type="text" name="t2"><BR>
<input type="text" name="t3">

</form>

rwaring

11-21-2003, 04:04 PM

Close, but the A,B,C options should relflect the years as options and depending on if you choose A(2001), B(2002), C(2003) it changed all four values depening which button you pressed, and which button at the top was selected.

this is very close now, but basically each one of the buttons, 1 thru 18 has three versions of the same four values (Per Year, the A,B,C) buttons that I need to spit out.

I appreciate your assistance in this matter. I'm learning a lot!

Mr J

11-21-2003, 04:28 PM

The A, B, and C options do change all the 4 textbox values its just that I have put the same information in the array indexes except for the first index.

this is very close now, but basically each one of the buttons, 1 thru 18 has three versions of the same four values (Per Year, the A,B,C) buttons that I need to spit out.

Post me a list of the three versions that will be shown for each of the radio buttons

rwaring

11-21-2003, 09:47 PM

A would be 1.97, 2.97, 2.99, 5.00
B would be 2.99, 3.99, 6.99, 10.99
C would be 5.99, 7.99, 8.99, 15.00

Mr J

11-22-2003, 04:29 AM

Ok, lets see how we do with this.

Each of the 18 radio buttons has three sets of four values.

Depending on which radio button is selected from A, B, or C determines which of the three sets is shown in the four textboxes.

The three values you posted have been assigned to radio button one

<script>
year1=new Array()
year1[0]=new Array(1.97,1.97,2.99,5.00)
year1[1]=new Array(2,5,10,12,22)
year1[2]=new Array(24,25,26,27)
year1[3]=new Array(31,32,34,40)
year1[4]=new Array(60,75,77,82)
year1[5]=new Array(84,92,94,96)
year1[6]=new Array(106,115,117,123)
year1[7]=new Array(127,133,141,146)
year1[8]=new Array(148,151,156,160)
year1[9]=new Array(161,168,170,175)
year1[10]=new Array(177,178,184,193)
year1[11]=new Array(198,201,207,208)
year1[12]=new Array(219,223,238,239)
year1[13]=new Array(240,243,246,247)
year1[14]=new Array(254,256,259,276)
year1[15]=new Array(278,286,287,288)
year1[16]=new Array(291,292,294,296)
year1[17]=new Array(299,312,314,316)

year2=new Array()
year2[0]=new Array(2.99,3.99,6.99,10.99)
year2[1]=new Array(317,322,336,340)
year2[2]=new Array(343,345,347,348)
year2[3]=new Array(352,356,366,370)
year2[4]=new Array(385,395,402,411)
year2[5]=new Array(415,420,421,422)
year2[6]=new Array(425,426,430,433)
year2[7]=new Array(438,440,444,448)
year2[8]=new Array(455,460,464,466)
year2[9]=new Array(467,477,478,480)
year2[10]=new Array(492,493,495,507)
year2[11]=new Array(508,512,513,524)
year2[12]=new Array(527,530,532,533)
year2[13]=new Array(557,566,568,569)
year2[14]=new Array(570,573,575,578)
year2[15]=new Array(585,588,598,599)
year2[16]=new Array(601,608,609,615)
year2[17]=new Array(616,627,630,632)

year3=new Array()
year3[0]=new Array(5.99,7.99,8.99,15.00)
year3[1]=new Array(634,636,637,638)
year3[2]=new Array(641,643,645,650)
year3[3]=new Array(657,664,666,679)
year3[4]=new Array(680,687,690,691)
year3[5]=new Array(692,693,698,708)
year3[6]=new Array(710,711,715,717)
year3[7]=new Array(720,728,732,740)
year3[8]=new Array(758,765,766,774)
year3[9]=new Array(782,789,791,795)
year3[10]=new Array(802,804,810,818)
year3[11]=new Array(826,829,831,832)
year3[12]=new Array(843,844,848,853)
year3[13]=new Array(864,879,882,888)
year3[14]=new Array(893,897,902,904)
year3[15]=new Array(905,910,911,912)
year3[16]=new Array(920,921,927,934)
year3[17]=new Array(936,940,941,943)

which_year= -1
this_radio= -1
function showme(){

for(i=0;i<document.f1.r2.length;i++){ // get r2 value
if(document.f1.r2[i].checked==true){
which_year=document.f1.r2[i].value
}
}

for(i=0;i<document.f1.r1.length;i++){ // get r1
if(document.f1.r1[i].checked==true){
this_radio=i
}
}

if(this_radio== -1||which_year== -1){
alert("this_radio = "+this_radio+" which_year = "+which_year)
return
}

for(i=0;i<4;i++){
document.f1["t"+i].value=window['year' + which_year][this_radio][i]
}

}

</script>

<form name="f1">
<input type="radio" name="r1" onclick="showme()"> 1
<input type="radio" name="r1" onclick="showme()"> 2
<input type="radio" name="r1" onclick="showme()"> 3
<input type="radio" name="r1" onclick="showme()"> 4
<input type="radio" name="r1" onclick="showme()"> 5
<input type="radio" name="r1" onclick="showme()"> 6<BR>
<input type="radio" name="r1" onclick="showme()"> 7
<input type="radio" name="r1" onclick="showme()"> 8
<input type="radio" name="r1" onclick="showme()"> 9
<input type="radio" name="r1" onclick="showme()"> 10
<input type="radio" name="r1" onclick="showme()"> 11
<input type="radio" name="r1" onclick="showme()"> 12<BR>
<input type="radio" name="r1" onclick="showme()"> 13
<input type="radio" name="r1" onclick="showme()"> 14
<input type="radio" name="r1" onclick="showme()"> 15
<input type="radio" name="r1" onclick="showme()"> 16
<input type="radio" name="r1" onclick="showme()"> 17
<input type="radio" name="r1" onclick="showme()"> 18

<P>
<input type="radio" name="r2" value="1" onclick="showme()"> A
<input type="radio" name="r2" value="2" onclick="showme()"> B
<input type="radio" name="r2" value="3" onclick="showme()"> C

<P>
<input type="text" name="t0"><BR>
<input type="text" name="t1"><BR>
<input type="text" name="t2"><BR>
<input type="text" name="t3">

</form>

rwaring

11-22-2003, 10:45 AM

This looks like it'll work, but I need it to default to year 3 and check the C option by default when 1-18 are chosen for the first time. This way the end user visually sees the default values are for year 3.

I took out
this_radio= -1
so I don't get the alert, and changed the
which_year = -1
to which_year =3 and set the C option to be checked by default!!!

YES!!! this is so great, thank you so very much. I've done radio buttons to change values, but not based on another buttons value. Just think of all the hair you've saved (From me pulling it out of my head)

:p

rwaring

11-22-2003, 01:26 PM

This works great except if they choose A, B or C before click the button above, I get an error. Is there any way around this?

Mr J

11-22-2003, 02:38 PM

You were getting the alert because I forgot to delete it, sorry

The variables this_radio= -1 and which_year = -1

must be in the script as they are preventative measures.

This is the reason you are getting the errors now when radio button A, B, or C is selected first.

I have amended the script, let me know how it goes

<script>
year1=new Array() // year one
year1[0]=new Array(1.97,1.97,2.99,5.00)
year1[1]=new Array(2,5,10,12,22)
year1[2]=new Array(24,25,26,27)
year1[3]=new Array(31,32,34,40)
year1[4]=new Array(60,75,77,82)
year1[5]=new Array(84,92,94,96)
year1[6]=new Array(106,115,117,123)
year1[7]=new Array(127,133,141,146)
year1[8]=new Array(148,151,156,160)
year1[9]=new Array(161,168,170,175)
year1[10]=new Array(177,178,184,193)
year1[11]=new Array(198,201,207,208)
year1[12]=new Array(219,223,238,239)
year1[13]=new Array(240,243,246,247)
year1[14]=new Array(254,256,259,276)
year1[15]=new Array(278,286,287,288)
year1[16]=new Array(291,292,294,296)
year1[17]=new Array(299,312,314,316)

year2=new Array() // year two
year2[0]=new Array(2.99,3.99,6.99,10.99)
year2[1]=new Array(317,322,336,340)
year2[2]=new Array(343,345,347,348)
year2[3]=new Array(352,356,366,370)
year2[4]=new Array(385,395,402,411)
year2[5]=new Array(415,420,421,422)
year2[6]=new Array(425,426,430,433)
year2[7]=new Array(438,440,444,448)
year2[8]=new Array(455,460,464,466)
year2[9]=new Array(467,477,478,480)
year2[10]=new Array(492,493,495,507)
year2[11]=new Array(508,512,513,524)
year2[12]=new Array(527,530,532,533)
year2[13]=new Array(557,566,568,569)
year2[14]=new Array(570,573,575,578)
year2[15]=new Array(585,588,598,599)
year2[16]=new Array(601,608,609,615)
year2[17]=new Array(616,627,630,632)

year3=new Array() // year three
year3[0]=new Array(5.99,7.99,8.99,15.00)
year3[1]=new Array(634,636,637,638)
year3[2]=new Array(641,643,645,650)
year3[3]=new Array(657,664,666,679)
year3[4]=new Array(680,687,690,691)
year3[5]=new Array(692,693,698,708)
year3[6]=new Array(710,711,715,717)
year3[7]=new Array(720,728,732,740)
year3[8]=new Array(758,765,766,774)
year3[9]=new Array(782,789,791,795)
year3[10]=new Array(802,804,810,818)
year3[11]=new Array(826,829,831,832)
year3[12]=new Array(843,844,848,853)
year3[13]=new Array(864,879,882,888)
year3[14]=new Array(893,897,902,904)
year3[15]=new Array(905,910,911,912)
year3[16]=new Array(920,921,927,934)
year3[17]=new Array(936,940,941,943)

which_year= -1
this_radio= -1
first_run=1

function showme(){
if(first_run==1){
document.f1.r2[2].checked=true
first_run=0
}

for(i=0;i<document.f1.r1.length;i++){ // get r1
if(document.f1.r1[i].checked==true){
this_radio=i
}
}

for(i=0;i<document.f1.r2.length;i++){ // get r2 value
if(document.f1.r2[i].checked==true){
which_year=document.f1.r2[i].value
}
}

if(this_radio== -1||which_year== -1){
//alert("this_radio = "+this_radio+" which_year = "+which_year)
return
}

for(i=0;i<4;i++){
document.f1["t"+i].value=window['year' + which_year][this_radio][i]
}

}

</script>

<form name="f1">
<input type="radio" name="r1" onclick="showme()"> 1
<input type="radio" name="r1" onclick="showme()"> 2
<input type="radio" name="r1" onclick="showme()"> 3
<input type="radio" name="r1" onclick="showme()"> 4
<input type="radio" name="r1" onclick="showme()"> 5
<input type="radio" name="r1" onclick="showme()"> 6<BR>
<input type="radio" name="r1" onclick="showme()"> 7
<input type="radio" name="r1" onclick="showme()"> 8
<input type="radio" name="r1" onclick="showme()"> 9
<input type="radio" name="r1" onclick="showme()"> 10
<input type="radio" name="r1" onclick="showme()"> 11
<input type="radio" name="r1" onclick="showme()"> 12<BR>
<input type="radio" name="r1" onclick="showme()"> 13
<input type="radio" name="r1" onclick="showme()"> 14
<input type="radio" name="r1" onclick="showme()"> 15
<input type="radio" name="r1" onclick="showme()"> 16
<input type="radio" name="r1" onclick="showme()"> 17
<input type="radio" name="r1" onclick="showme()"> 18

<P>
<input type="radio" name="r2" value="1" onclick="showme()"> A
<input type="radio" name="r2" value="2" onclick="showme()"> B
<input type="radio" name="r2" value="3" onclick="showme()"> C

<P>
<input type="text" name="t0"><BR>
<input type="text" name="t1"><BR>
<input type="text" name="t2"><BR>
<input type="text" name="t3">
</form>