Need Suggestion for form field handling with multiple input methods

Question

I have a form field called quantity that needs to be filled out. But in my form I have a couple ways I'd like to get the value. I'm not sure whether to approach this with JavaScript, create separate field names for each entry option, or something totally different. Thanks in advance for any insight you can give me on this!

Here's the question: "How many people are you registering?"

Option 1: "Myself Only"

Option 2: "Myself and __ Others"

Option 3: "I'm registering __ people on their behalf"

My initial thought was to have the following HTML (forgive the crudeness of formatting):

<input type="radio" name="quantity" value="1" /> Myself only<br />

Myself and <select name="quantity">
<option value="0"></option>
<option value="2">1 other</option>
<option value="3">2 others</option>
<option value="4">3 others</option>
<option value="5">4 others</option>
<option value="6">5 others</option>
<option value="7">6 others</option>
<option value="8">7 others</option>
<option value="9">8 others</option>
<option value="10">9 others</option>
</select><br />

I'm registering <input type="text" name="quantityplus" /> people on their behalf.

The rest of the form gathers contact information, and then on the next screen would display a set of registration fields (name, email etc) based on the quantity selected in this step. On that last one (quantityplus) I'd have a listener in my form processing code to exclude the contact info provided on this page and display the actual # of people listed in that field's value (picture a scenario where an administrative assistant would be registering her boss & 5 others for a seminar, but is not attending herself).

Would this be the optimal way to approach the problem? Or should I have a hidden quantity field that gets updated using JavaScript before the form is submitted? If so, how do I account for the quantityplus issue?

score 1 · Accepted Answer · 2012-04-16 14:00:46Z

1

I think you are confusing the form greatly by having a radio for one option, select for another and text for the third, I would go for something more like:

<label for="myself">Myself only <input type="radio" name="type" id="myself" value="myself" /></label>

<label for="myselfAndOthers">Myself and others <input type="radio" name="type" id="myselfAndOthers" value="myselfAndOthers" /></label>
<label for="myselfAndOthersQuantity">Quantity:</label><input type="text" name="quantity" id="myselfAndOthersQuantity" />

<label for="others">Others <input type="radio" name="type" id="others" value="others" /></label>
<label for="othersQuantity">Quantity:</label><input type="text" name="quantity" id="othersQuantity" />

With formatting this should make the options clear, then your PHP can just switch on the type POST value for the three different types' handling.

edited Apr 16, 2012 at 14:00

answered Apr 16, 2012 at 13:34

user1237595

Sign up to request clarification or add additional context in comments.

3 Comments

Stephan Hovnanian Over a year ago

Thanks. for consistency purposes, would you add a hidden quantity field with a value of 1 to the first option?

user1237595 Over a year ago

Well as this would not be required in your handling (if type == myself then quantity can default to 1), I'd say no. The unique Id's will allow you do handle the JS validation easily anyway.

Stephan Hovnanian Over a year ago

good point. I'm thinking to hide the 2 quantity fields until that type is selected, then use jQuery to display it. I'm not sure if doing that would still $_POST those hidden variables to the processor but it's easy enough to check.

Vipin Jain · Accepted Answer · 2012-04-16 13:12:12Z

0

No of person for registration: <input type="text" name="quantity_per" />

Include Me: <input type="checkbox" name="inc_me" value="1" />

Use this code instead of so many fields.

answered Apr 16, 2012 at 13:12

Vipin Jain

1,4021 gold badge12 silver badges20 bronze badges

2 Comments

Stephan Hovnanian Over a year ago

good idea, although I don't mind extra code if it helps improve the UX. In this case, I see it being more confusing or susceptible to error (like someone leaving off the checkbox)

Vipin Jain Over a year ago

It's ur choice to use it or not although from user point of view your code is too much confusing for the user to take decision and it also requires javascript to handle the responses for the form.

Collectives™ on Stack Overflow

Need Suggestion for form field handling with multiple input methods

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related