Radio button group and single checkbox (basic functionality)

139 Posts

brianlarson Reply #1, 15 years, 11 months ago

I’m pretty sure there’s a simple answer to this dilemma. Can someone point out what I’m doing wrong here?

First, a group of two radio buttons:

<label><input id="cfDeliveryMethod" type="radio" name="deliveryMethod" value="Mail" eform="Preferred delivery method::0" /> Printed catalog by mail **</label>
          <br />
          <label><input id="cfDeliveryMethod" type="radio" name="deliveryMethod" value="Online" eform="Preferred delivery method::0" /> Online link to catalog</label>

Second, a single checkbox that should be checked by default (unchecked to not subscribe via email):

<input id="cfSubscribe" name="subscribe" type="checkbox" value="Yes" checked="checked" eform="Subscribe email::0" />

Thanks in advance! I’m way too tired to figure this out on my own right now. embarrassed

- 928 Posts
kp52 Reply #2, 15 years, 11 months ago
What’s actually going wrong? Is it layout, function, or what?

On the radio buttons, though they both need the same name to work (that’s HTML), you can’t give two elements the same ID (that’s CSS). And once you’ve given them unique IDs, you can use the "for" attribute on the label:
```
<input id="cfDeliveryMethod1" type="radio" name="deliveryMethod" value="Mail" eform="Preferred delivery method::0" />
<label for="cfDeliveryMethod1"> Printed catalog by mail **</label>
          <br />

          <input id="cfDeliveryMethod2" type="radio" name="deliveryMethod" value="Online" eform="Preferred delivery method::0" />
<label for="cfDeliveryMethod2"> Online link to catalog</label>
        <br />
```
I pasted your checkbox code into the standard MODx 1.0.4 demo site’s contact form, and it looked OK (checked by default). Are you using the latest version of eForm? I seem to recall there were some problems with retaining checkbox/radio button values on redisplaying the form in some earlier versions.
KP

Add: A litle further follow-up, after looking at the wiki page and dredging more memory cells. Your radio button validation only needs to be on one of the set. So the following complains about your "Preferred delivery method" not being set if you don’t choose a button before submitting (NB required is set to 1 now):
```
<input id="cfDeliveryMethod1" type="radio" name="deliveryMethod" value="Mail" eform="Preferred delivery method::1"/>
<label for="cfDeliveryMethod1"> Printed catalog by mail **</label>
          <br />

<input id="cfDeliveryMethod2" type="radio" name="deliveryMethod" value="Online"  />
<label for="cfDeliveryMethod2"> Online link to catalog</label>
```