Accessing radio button arrays within arrays

[shadoweyes]

I am lost in a mess of arrays =(

Basically, I have a registration form which has a number of fields for each of any number of attendees. The number of attendees is set by the user via a form on a previous page.

So I need to use arrays within the form. Example:
<input type='text' name='txtAttendeeTitle[]' size='20'>

When I reference these via javascript, I loop through using the following syntax:
document.registrationForm['txtAttendeeTitle[]'][j].value

The problem is when I use a radio button as part of the form that each attendee must fill out. First of all, simply using the following syntax:
<input type='radio' name='radAttendeeMembershipUS[]' value='true'>

creates a problem in that all radio buttons are considered in the same family.


Has anyone done this before? Do I have to use php to insert an index into the tag such as:
<input type='radio' name='radAttendeeMembershipUS[0]' value='true'>

and increment it for each attendee?

If that is the solution - how do I later reference it in a javascript function?

thanks for any help or tips.

[gil davis]

Certainly doesn't sound very user-friendly.

I would imagine the program that receives the form would not be very happy either.

Why does it have to be one big form with multiple attendees? If you have to stand on your head to get the radio button sorted out, and the user gets a cramp clicking radio buttons because he has 20 guys that want to go to the thing, who benefits?

[shadoweyes]

Heh,

well, the vast majority of people will be registering few attendees. Regardless, there are 2 radio buttons per attendee. (basically yes and no). So no one will get a cramp from that.

The program that receives the input - a php script, handles arrays quite intelligently (unlike javascript IMO) so there is no problem there.

I was just hoping someone would know the syntax for using arrays in this manner...

[gil davis]

You just have to think through the heirarchy. It's not so much the javascript as it is the HTML document object model. The form becomes an array free of charge in the DOM. The form elements are inserted into the array and addressed by their name attribute (if no name specified, they pick up an ordinal number according to their position in the page). You access the elements usingdocument.forms[formName].elements[elementNameThere are some shortcuts that are allowed.

If a form has more than one element with the same name, then an array is created for them. Useful for radio buttons but not much else.

the vast majority of people will be registering few attendees.So, what are you trying to save?hoping someone would know the syntax for using arrays in this mannerGive me the exact HTML, and I can give you the way to access it.

[shadoweyes]

Thank you for your time, I do appreciate it.

I'm attaching the code. It is a txt file, but if you view it in a browser as html, you will get a better idea of what I am doing.

Regarding why I am doing it this way. I have a form with an unknown number of attendees. I use a loop in php to create as many attendee fields as the user needs (up to 20).

Then I need to do validation on the fields. It seemed that using arrays was the way to go for efficiency. I hope you will be able to understand the code - I tried to write it so it would be easy to figure out.


The problem is that while
<input type='text' name='blah[]'> works well for creating an array of text input objects, I do not know how to make radio buttons work within that.

this obviously does not work in the same way that creating the array of text inputs did.
<input type='radio' name='radblah[]' value='2'>
<input type='radio' name='radblah[]' value='1'>

[gil davis]

You hurt me ... you hurt me bad. My DOM dump tool totally pukes on your form. The empty brackets in the name seems to kill my code.

Anyway, document.registrationForm["radAttendeeMembershipUS[]"] has a length of 6 and can be addressed asdocument.registrationForm["radAttendeeMembershipUS[]"][n]where "n" is 0-5. It alternates "yes"/"no", so I assume there were 3 attendees.

Since they are radio buttons and they all have the same name, if you select one, the other 5 turn off. Had you considered that? You would really need separate forms for each attendee, otherwise you will have to change your yes/no radio button strategy.

[shadoweyes]

doh. I thought the whole using square brackets to create arrays of text elements was pretty great when I read about it.
reckon is has its downsides also.

Okay, that answers my question on how to deal with the radio button - but as you note, this is not the behavior I desire.

Do you have any suggestions for how I can implement it so each attendee has its own family.

For instance, if I say for the first attendee:
<input type='radio' name='radblah[0]' value='2'>
<input type='radio' name='radblah[0]' value='1'>

then for the next attendee:
<input type='radio' name='radblah[1]' value='2'>
<input type='radio' name='radblah[1]' value='1'>

would I be able to address it as:
document.registrationForm["radAttendeeMembershipUS[0]"][n]

and
document.registrationForm["radAttendeeMembershipUS[1]"][n]

respectively?

[gil davis]

It would appear easier (and less confusing to the "casual" observer) to append a number representing the ordinal of the attendee. In long form:<form name="registrationForm" ...>
<input type="text" name="txtAttendeeName0" ...>
...
<input type="radio" name="radAttendeeMembershipUS0" ...>
<input type="radio" name="radAttendeeMembershipUS0" ...>
<input type="text" name="txtAttendeeName1" ...>
...
<input type="radio" name="radAttendeeMembershipUS1" ...>
<input type="radio" name="radAttendeeMembershipUS1" ...>
...
</form>However, I don't have a feel for your generator.

[shadoweyes]

Alrighty - thanks for your help -

I think I will be able to figure it out now. Regarding my generator: I hand-code everything using homesite (just for context coloring - I don't use any of its features) so I'm not sure what you mean by generator.

The problem with individually naming each field comes with the validation when the form is submitted. using the square brackets, I can use nifty little functions like this: (would be easier to read if I knew how to format spaces on this forum)

function checkForm(form)
{
// need to check the text fields that are required
var j;
for (j=0; j < form['txtAttendeeName[]'].length; ++j)
{
if (form['txtAttendeeName[]'][j].value == "")
{
alert("Please enter Attendee #" + (j + 1) + "'s name.");
return false;
}
if (form['txtAttendeeEmail[]'][j].value == "")
{
alert("Please enter Attendee #" + (j + 1) + "'s Email Address.");
return false;
}
if ((form['fltAttendeeCost[]'][j].value == "") || (form['fltAttendeeCost[]'][j].value == "0"))
{
alert("Attendee #" + (j+1) + " must attend a portion of the conference.");
return false;
}
}

that function is much easier to read and debug (and works for an indeterminate number of attendees) than one where I do not use the brackets to create an array. I have tried it both ways ...

but it takes some getting used to. I learned the syntax for arrays and such from phpbuilder.com - at any rate, it would appear there are multiple ways of solving the problem, though none are very elegant.

Thanks for all your help, i think I'll be able to get it working now.