Radio Button Issues

59 Posts

golds30 Reply #1, 17 years, 6 months ago

I’m new to using ModX in general and eForm in particular. I know this is a simple question, but I’m hoping people can help me solve it easily.

I’m setting up a form with some radio buttons included. I have two issues popping-up:

1) When I click on either option with the mouse, only the first radio button will populate even though I’m clicking on the second radio button. Meaning if ’yes’ and ’no’ are radio buttons and I click on ’no,’ the ’yes’ button populates.

2) I’m getting an incorrect value for these radio buttons when submitting the form. This is happening with the checkboxes in the form as well.

I’m sure that there is a simple solution in my syntax, but I can’t seem to figure it out through the ModX wiki, nor any of the forums I’ve read through. The form was based off of the example contact for in the modx wiki site. Please see my abbreviated code below:

<p class="error">[+validationmessage+]</p>

<form method="post" action="[~[*id*]~]" id="EmailForm">

<fieldset>
<h3>Hollywood Rock Academy Registration</h3>

<input name="formid" type="hidden" value="HRAReg" />

<p><label for="cfGender">Gender:
<input name="gender" id="cfGender" class="radio" type="radio" value="Male" eform="Gender" />Male.
<input name="gender" id="cfGender" class="radio" type="radio" value="Female" eform="Gender" />Female.</p> </label>

<p><label for="cfSing">does the student want to sing?

<input name="sing" id="cfSing" type="radio" value="Yes" eform="Sing" /> yes.
<input name="sing" id="cfSing" type="radio" value="No" eform="Sing" /> no. </p> </label>

<p><label for="cfInstrument">what instrument will the student play?

<input name="instrument" id="cfInstrument" class="radio" type="radio" value="Guitar" eform="Instrument" /> guitar
<input name="instrument" id="cfInstrument" class="radio" type="radio" value="Bass" eform="Instrument" /> bass
<input name="instrument" id="cfInstrument" class="radio" type="radio" value="Keyboard" eform="Instrument" /> keyboard
<input name="instrument" id="cfInstrument" class="radio" type="radio" value="Drums" eform="Instrument" /> drums
<input name="instrument" id="cfInstrument" class="radio" type="radio" value="Horn" eform="Instrument" /> horn
<input name="instrument" id="cfInstrument" class="text" type="text" eform="Instrument" /> other...
</p> </label>

<label> </label><p><input type="submit" name="contact" id="cfContact" class="button" value="Send This Message" /></p>

</fieldset>

</form>

Thanks for the help in advance! grin

928 Posts

kp52 Reply #2, 17 years, 6 months ago

The problem seems to be in the duplication of the "id" attributes. Though you must have the same "name" attribute for a set of radio buttons, it’s not valid HTML to give the same id to more than one element. Try "class" instead if you need to apply styles to the buttons.
You also need to give the individual buttons their own labels, so that people can activate the buttons by clicking on the labels. That will need to be in this format if you wan to avoid giving every button a unique id for the "for" attribute to attach to:

Gender:
      <label><input name="gender" class="cfGender" class="radio" type="radio" value="Male" eform="Gender" />Male.</label>
      <label><input name="gender" class="cfGender" class="radio" type="radio" value="Female" eform="Gender" />Female.</label>

KP

1,010 Posts

TobyL Reply #3, 17 years, 6 months ago

Your form has several html formatting errors to start with. For instance the <p> tag is closed before the </label> end tag, creating a nesting error. Also your label tags are wrapping around the input tags which in this case, because you are using the for attribute to link the label to each input field, is not necessary.

This can confuse the eForm form parsing. Below is a cleaned up version of your form template. Give that a try and see if things improve.

By the way, What verson of eForm are you using?

<p class="error">[+validationmessage+]</p>
 
<form method="post" action="[~[*id*]~]" id="EmailForm">
 	<fieldset>
		<h3>Hollywood Rock Academy Registration</h3>

		<input name="formid" type="hidden" value="HRAReg" />

		<p><label for="cfGender">Gender:</label><br/>
			<input name="gender" id="cfGender" class="radio" type="radio" value="Male" />Male.
			<input name="gender" class="radio" type="radio" value="Female" />Female.
		</p> 

		<p><label for="cfSing">does the student want to sing?</label><br/>
			<input name="sing" id="cfSing" type="radio" value="Yes" eform="Sing" /> yes. 
			<input name="sing" type="radio" value="No" eform="Sing" /> no. </p> 

		<p><label for="cfInstrument">what instrument will the student play?</label><br/>
			<input name="instrument" id="cfInstrument" class="radio" type="radio" value="Guitar" /> guitar
			<input name="instrument" class="radio" type="radio" value="Bass" /> bass
			<input name="instrument" class="radio" type="radio" value="Keyboard" /> keyboard
			<input name="instrument" class="radio" type="radio" value="Drums" /> drums
			<input name="instrument" class="radio" type="radio" value="Horn" /> horn
			<input name="instrument" class="text" type="text" /> other...
		</p> 

		<p><input type="submit" name="contact" id="cfContact" class="button" value="Send This Message" /></p>
	</fieldset>
</form>

eForm | eForm support | eForm @ wiki

928 Posts

kp52 Reply #4, 17 years, 6 months ago

@golds30: Whoops, didn’t spot you were already using class="radio" for styling, so the other class attribute I suggested should not be included. Might be a good idea to give it a different name, though, such as class="radioButton", to avoid confusion with the TYPE.

Experimenting more with your original form, I found it’s actually the combination of the FOR in the label and the duplicated IDs that causes the fundamental problem - the first radio button with an ID matching the FOR attribute is selected whichever button you click. It’s always going to be wrong to duplicate IDs within a page in any case.

I don’t think TobyL’s application of LABEL works either (not when I paste that code into a web page, anyway). The big advantage of a LABEL is to expand the target area for clicks, so when you click on the label for an element, that radio button or checkbox is selected or deselected, or the cursor becomes active in the relevant text field. This is important for the sake of usability and accessibility. You have to attach one label per clickable element one way or the other - using FOR and a matching ID per field, or wrapping the field in the LABEL tag. You might as well just use plain text for the labels if they’re not going to provide useful functionality.

There’s a useful explanation of using LABEL at http://webdesign.about.com/od/forms/a/aa052206.htm
undecided

KP

59 Posts

golds30 Reply #5, 17 years, 6 months ago

Thanks for your input guys.

I got rid of the class all together, because it really wasn’t necessary.

I tried using both of your label techniques, but I’m still getting an error on three of the form items for having incorrect value. Here’s the coding for the three items. Can you spot the issue?

<p><label for="cfAvailable">what days are you most available?</label>

monday 4:00-6:00<input name="available" id="cfAvailable" type="checkbox" value="Monday 4to6" eform="Available" />  
6:00-8:00<input name="available" type="checkbox" value="Monday 6to8" eform="Available" />

tuesday 4:00-6:00<input name="available" type="checkbox" value="Tuesday 4to6" eform="Available" />  
6:00-8:00<input name="available" type="checkbox" value="Tuesday 6to8" eform="Available" />

wednesday 4:00-6:00<input name="available" type="checkbox" value="Wednesday 4to6" eform="Available" /> 
6:00-8:00<input name="available" type="checkbox" value="Wednesday 6to8" eform="Available" />

thursday 4:00-6:00<input name="available" type="checkbox" value="Thursday 4to6" eform="Available" />  
6:00-8:00<input name="available" type="checkbox" value="Thursday 6to8" eform="Available" />

friday 4:00-6:00<input name="available" type="checkbox" value="Friday 4to6" eform="Available" />  
6:00-8:00<input name="available" type="checkbox" value="Friday 6to8" eform="Available" />

saturday 10:00-12:00<input name="available" type="checkbox" value="Saturday 10to12" eform="Available" /> 
12:00-2:00<input name="available" type="checkbox" value="Saturday 12to2" eform="Available" /> 
2:00-4:00<input name="available" type="checkbox" value="Saturday 2to4" eform="Available" />
</p>

<p><label for="cfSing">does the student want to sing?</label>

<input name="sing" id="cfSing" type="radio" value="Yes" eform="Sing" /> yes.
<input name="sing" type="radio" value="No" eform="Sing" /> no. </p>

<p><label for="cfLevel">what level is the student?</label>

<input name="level" id="cfLevel" type="radio" value="rare" eform="Level" />rare (just starting)

<input name="level" type="radio" value="medium" eform="Level" /> medium (getting the hang of it)

<input name="level" type="radio" value="well done" eform="Level" /> well done (all set to take over the world) </p>

Maybe I’ve been staring at it for too long, but I can’t seem to see the problem. shocked

BTW - Toby I’m using version 1.4.4.5

928 Posts

kp52 Reply #6, 17 years, 6 months ago

One change required to make it work at all, a few that will make it work better:

1) If you add eform validation to a set of radio buttons or checkboxes, you only add the pseudo-attribute to the first INPUT field. (removing the extras got your form working for me straight away)

2) now we have checkboxes in the mix, they need to allow for multiple selections, otherwise only the last one that was clicked will be reported. In PHP this is done by adding square brackets to the name, e.g. name=available[]. This results in an array rather than a single value being fed back in the POST array.

3) the labels still need to be one per INPUT field to be of any value. As given in your last post, the label applies to the first option of each set only, so if you click on the heading, you select that option. Probably not what you intend? In the code below, I’ve used H5 for the headings, and wrapped the INPUT fields in LABEL tags, so if you cick on "12:00-2:00", for example, that checkbox is selected. You can adjust the visual style with your stylesheet.

4) In the form below, I added eform="(label)::1" as validation for the checkboxes and the "level" options, to make them mandatory fields. The mandatory aspect works for the radio buttons, but doesn’t seem to work for the checkboxes.

So here’s the form, the snippet call and the report template, which I have tested on a live server.

<p class="error">[+validationmessage+]</p>
<form method="post" action="[~[*id*]~]" id="EmailForm">
<h5>What days are you most available?</h5>
<p>monday <label>4:00-6:00<input name="available[]" type="checkbox" value="Monday 4to6" eforms="Available::1" /></label>  
<label>6:00-8:00<input name="available[]"  type="checkbox" value="Monday 6to8" /></label><br/>
tuesday <label>4:00-6:00<input name="available[]"  type="checkbox" value="Tuesday 4to6" /></label>  
<label>6:00-8:00<input name="available[]"  type="checkbox" value="Tuesday 6to8" /></label><br/>
wednesday <label>4:00-6:00<input name="available[]" type="checkbox" value="Wednesday 4to6" /></label> 
<label>6:00-8:00<input name="available[]" type="checkbox" value="Wednesday 6to8" /></label><br/>
thursday <label>4:00-6:00<input name="available[]" type="checkbox" value="Thursday 4to6" /></label>  
<label>6:00-8:00<input name="available[]"  type="checkbox" value="Thursday 6to8" /></label><br/>
friday <label>4:00-6:00<input name="available[]"  type="checkbox" value="Friday 4to6" /></label>  
<label>6:00-8:00<input name="available[]" type="checkbox" value="Friday 6to8" /></label><br/>
saturday <label>10:00-12:00<input name="available[]" type="checkbox" value="Saturday 10to12" /></label> 
<label>12:00-2:00<input name="available[]" type="checkbox" value="Saturday 12to2" /></label> 
<label>2:00-4:00<input name="available[]" type="checkbox" value="Saturday 2to4" /></label>
</p>

<h5>Does the student want to sing?</h5>
<p><label><input name="sing" id="cfSing" type="radio" value="Yes" eform="Sing" /> yes</label>.
<label><input name="sing" type="radio" value="No" /> no</label>. </p>

<h5>What level is the student?</h5>
<p><label><input name="level" id="cfLevel" type="radio" value="rare" eform="Level::1" />rare (just starting)</label> <br/>
<label><input name="level" type="radio" value="medium" /> medium (getting the hang of it)</label> <br/>
<label><input name="level" type="radio" value="well done" /> well done (all set to take over the world)</label> </p>

<input type="submit" name="contact" id="cfContact" class="button" value="Send This Message" />

</form>

 [[eForm? &tpl=`g30` &formid=`EmailForm` &report=`g30_report` &to=`me@myaddress`]]

Response:
Availability: [+available+]
Singer: [+sing+]
Level: [+level+]

KP

59 Posts

golds30 Reply #7, 17 years, 6 months ago

Thanks for the patience KP! Appreciate the help, finally got the thing working!