Programming Forums > Web Development and Design > JavaScript and Client-Side Browser Scripting

Druid · Mar 16th, 2006, 8:21 AM

Hello. I am trying to loop through a list of radio buttons (up to 5 per "group"). Depending on which one is checked, I want to append that value to a value string. The problem I have is I don't know how to make the radio button name a variable. I am accessing it by name. This will not work because there will be an unknown number of radio buttons, although there will be five per group name.

I have:

(Toggle Plain Text)

for (var i = 0; i < document.frmOne.rad.length; i++)
{
   if (document.frmOne.rad[i].checked)
   {
       D = document.frmOne.rad[i].value;
   }
}

I need to get "rad" to be a variable name to represent the current radio button group.

Can anyone point me in the right direction?

DaWei · Mar 16th, 2006, 8:58 AM

Clear a couple of things up. Where will the variable come from and how will its value be set? Server side, as from a file or DB? Client interaction?

Agent 47 · Mar 16th, 2006, 9:09 AM

Just give each radio button a uniqe ID 'rb_1', 'rb_2', ..., 'rb_n' and
then you can access each one directly with something like:

(Toggle Plain Text)

var D=document.geElementById(frmOne.rad[i].id);

Druid · Mar 16th, 2006, 9:21 AM

DaWei:

I have PL/SQL code that generates a HTML form. The form consists of N statements followed by five radio buttons. There is an input button that executes a javascript function during an onClick event.

The javascript function's job is to process all of the input box selections on take each of their values and add them to a string of values... which, in turn, is passed back to the PL/SQL procedure for further processing.

Agent47:

The procedure is generic, to the effect of me not knowing the number of entries. I know there will be five radio buttons per entry, but I'm not sure if I can go this route if the number of entries is unknown. Is this still possible?

Agent 47 · Mar 16th, 2006, 9:22 AM

Can you post the HTML?

Druid · Mar 16th, 2006, 9:40 AM

Sure. I stripped out the PL/SQL stuff.

(Toggle Plain Text)

<SCRIPT language = JavaScript>
                                                                                                                                          
          function calculate()
          {
                 for (var i=0; i < document.frmOne.s1.length; i++)
                 {
                    if (document.frmOne.s1[i].checked)
                    {
                         D = document.frmOne.s1[i].value;
                    }
                 }
                                                                                                                                          
                 document.frmOne.valString.value = document.frmOne.valString.value + D;
          }
                                                                                                                                          
    </SCRIPT>

The PL/SQL code generates the form content, but basically it appears like this:

(Toggle Plain Text)

                                                                                                                              
                                                                                                                                          
                                                                                                                                         
    <FORM NAME = frmOne>
                                                                                                                   
    statement1<br>                  
    <input type="radio" name="s1" value="1"> S11
    <input type="radio" name="s1" value="2"> S12
    <input type="radio" name="s1" value="3"> S13
    <input type="radio" name="s1" value="4"> S14
    <input type="radio" name="s1" value="5"> S15
                    
    statement2<br>                                                                                                                      
    <input type="radio" name="s2" value="1"> S21
    <input type="radio" name="s2" value="2"> S22
    <input type="radio" name="s2" value="3"> S23
    <input type="radio" name="s2" value="4"> S24
    <input type="radio" name="s2" value="5"> S25
                                                                                                                                          
                                                                                                                                          
    <P>
    Total: <INPUT TYPE = Text NAME = valString SIZE = 25 value = "">
    <P>

                                                                                                                                              
    <input type = Button NAME = b1 VALUE = "Add Numbers" onClick = calculate()>
    </form>

Druid · Mar 16th, 2006, 4:45 PM

? anyone ?

Agent 47 · Mar 16th, 2006, 4:59 PM

Sorry, so ... erm... what's the issue? You can have blocks of s1, s2,
..., sn but you don't know what n is, right?

DaWei · Mar 16th, 2006, 5:23 PM

Frankly, your requirements still aren't clear, at least to me. Suppose you offered someone a menu for either a 3-course or 5-course menu. Your information could be in a database. Your server side code could generate a page offering either three or five sets of radio buttons giving them their choice of one of five dishes for each course. On the other hand, if you want to generate the whole enchilada with client-side script, that could be done, too. I could make the time to write both kinds of code, but one of those efforts would be wasted, except for general illustrative purposes, right?

Mar 16th, 2006, 8:21 AM	#1
Druid Programmer Join Date: Mar 2006 Posts: 40 Rep Power: 0	Javascript: form processing, component name - variable Hello. I am trying to loop through a list of radio buttons (up to 5 per "group"). Depending on which one is checked, I want to append that value to a value string. The problem I have is I don't know how to make the radio button name a variable. I am accessing it by name. This will not work because there will be an unknown number of radio buttons, although there will be five per group name. I have: (Toggle Plain Text) for (var i = 0; i < document.frmOne.rad.length; i++) { if (document.frmOne.rad[i].checked) { D = document.frmOne.rad[i].value; } } for (var i = 0; i < document.frmOne.rad.length; i++) { if (document.frmOne.rad[i].checked) { D = document.frmOne.rad[i].value; } } I need to get "rad" to be a variable name to represent the current radio button group. Can anyone point me in the right direction?

Mar 16th, 2006, 8:58 AM	#2
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	Clear a couple of things up. Where will the variable come from and how will its value be set? Server side, as from a file or DB? Client interaction? __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

Mar 16th, 2006, 9:09 AM	#3
Agent 47 Hobbyist Programmer Join Date: Nov 2005 Posts: 122 Rep Power: 3	Just give each radio button a uniqe ID 'rb_1', 'rb_2', ..., 'rb_n' and then you can access each one directly with something like: (Toggle Plain Text) var D=document.geElementById(frmOne.rad[i].id); var D=document.geElementById(frmOne.rad[i].id); __________________ "I'm going to become rich and famous when I invent a device that allows you to stab people in the face over the internet"

Mar 16th, 2006, 9:22 AM	#5
Agent 47 Hobbyist Programmer Join Date: Nov 2005 Posts: 122 Rep Power: 3	Can you post the HTML? __________________ "I'm going to become rich and famous when I invent a device that allows you to stab people in the face over the internet"

Mar 16th, 2006, 9:40 AM	#6
Druid Programmer Join Date: Mar 2006 Posts: 40 Rep Power: 0	Sure. I stripped out the PL/SQL stuff. (Toggle Plain Text) <SCRIPT language = JavaScript> function calculate() { for (var i=0; i < document.frmOne.s1.length; i++) { if (document.frmOne.s1[i].checked) { D = document.frmOne.s1[i].value; } } document.frmOne.valString.value = document.frmOne.valString.value + D; } </SCRIPT> <SCRIPT language = JavaScript> function calculate() { for (var i=0; i < document.frmOne.s1.length; i++) { if (document.frmOne.s1[i].checked) { D = document.frmOne.s1[i].value; } } document.frmOne.valString.value = document.frmOne.valString.value + D; } </SCRIPT> The PL/SQL code generates the form content, but basically it appears like this: (Toggle Plain Text) <FORM NAME = frmOne> statement1<br> <input type="radio" name="s1" value="1"> S11 <input type="radio" name="s1" value="2"> S12 <input type="radio" name="s1" value="3"> S13 <input type="radio" name="s1" value="4"> S14 <input type="radio" name="s1" value="5"> S15 statement2<br> <input type="radio" name="s2" value="1"> S21 <input type="radio" name="s2" value="2"> S22 <input type="radio" name="s2" value="3"> S23 <input type="radio" name="s2" value="4"> S24 <input type="radio" name="s2" value="5"> S25 <P> Total: <INPUT TYPE = Text NAME = valString SIZE = 25 value = ""> <P> <input type = Button NAME = b1 VALUE = "Add Numbers" onClick = calculate()> </form> <FORM NAME = frmOne> statement1<br> <input type="radio" name="s1" value="1"> S11 <input type="radio" name="s1" value="2"> S12 <input type="radio" name="s1" value="3"> S13 <input type="radio" name="s1" value="4"> S14 <input type="radio" name="s1" value="5"> S15 statement2<br> <input type="radio" name="s2" value="1"> S21 <input type="radio" name="s2" value="2"> S22 <input type="radio" name="s2" value="3"> S23 <input type="radio" name="s2" value="4"> S24 <input type="radio" name="s2" value="5"> S25 <P> Total: <INPUT TYPE = Text NAME = valString SIZE = 25 value = ""> <P> <input type = Button NAME = b1 VALUE = "Add Numbers" onClick = calculate()> </form>

Mar 16th, 2006, 9:21 AM	#4
Druid Programmer Join Date: Mar 2006 Posts: 40 Rep Power: 0	DaWei: I have PL/SQL code that generates a HTML form. The form consists of N statements followed by five radio buttons. There is an input button that executes a javascript function during an onClick event. The javascript function's job is to process all of the input box selections on take each of their values and add them to a string of values... which, in turn, is passed back to the PL/SQL procedure for further processing. Agent47: The procedure is generic, to the effect of me not knowing the number of entries. I know there will be five radio buttons per entry, but I'm not sure if I can go this route if the number of entries is unknown. Is this still possible?

Mar 16th, 2006, 4:45 PM	#7
Druid Programmer Join Date: Mar 2006 Posts: 40 Rep Power: 0	? anyone ?

Mar 16th, 2006, 4:59 PM	#8
Agent 47 Hobbyist Programmer Join Date: Nov 2005 Posts: 122 Rep Power: 3	Sorry, so ... erm... what's the issue? You can have blocks of s1, s2, ..., sn but you don't know what n is, right? __________________ "I'm going to become rich and famous when I invent a device that allows you to stab people in the face over the internet"

Mar 16th, 2006, 5:23 PM	#9
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	Frankly, your requirements still aren't clear, at least to me. Suppose you offered someone a menu for either a 3-course or 5-course menu. Your information could be in a database. Your server side code could generate a page offering either three or five sets of radio buttons giving them their choice of one of five dishes for each course. On the other hand, if you want to generate the whole enchilada with client-side script, that could be done, too. I could make the time to write both kinds of code, but one of those efforts would be wasted, except for general illustrative purposes, right? __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Programming Forums > Web Development and Design > JavaScript and Client-Side Browser Scripting

Javascript: form processing, component name - variable