3

I've seen a lot of questions around here about implementing dynamic forms in jQuery or other javascript libraries, and I think I managed to get up and running in setting up a dynamic form for my test purposes.

My question is whats the best practice in naming my form fields and processing them on the server side.

I am trying to implement a contact like form where the user can add multiple phone numbers (and types) as well as multiple addresses (and types) something similar to the code below, this is the code block that will be duplicated dynamically.

<div id="phones">
<label>Phone Number</label><input type="text" name="phone1" value="" />
<label>Type</label><input type="text" name="type1" value="" />
</div>

Then I will have a +/- link or button to add another phone or remove a phone. When I submit the form, whats the best way to handle the combo of name/type Should I have the names like indicated above with a postfix of an id like phone1 / type1 or should I use the array naming like phone[] / type[] and match the pairs on the server according to the index.

I am using java (not sure if it makes a difference if it is java or php or whatever) but what would be a best practice of doing this.

Thanks

Pointy
  • 405,095
  • 59
  • 585
  • 614
omarello
  • 2,683
  • 1
  • 23
  • 23

2 Answers2

1

Square brackets with indexes seem to be what most frameworks expect, but it does completely depend on your framework. In the Java world, given that there are about a million different frameworks, you have to start from what your framework expects, and adapt your Javascript code appropriately.

The only Java framework I'm familiar enough with to know the answer is Stripes, and it would want square brackets. If your bean had a property

private List<Address> addresses;
public List<Address> getAddresses() { return addresses; }
public void setAddresses(final List<Addresses>) { this.addresses = addresses; }

then the inputs would need names like "addresses[0].street1", "addresses[0].street2", etc. When you add a new block for a new address, you'd have the same fields with "1" instead of "0".

A different Java framework, however, might do things in completely different ways.

Pointy
  • 405,095
  • 59
  • 585
  • 614
  • Currently I'll be using Grails. I read somewhere that I can list the paramter values using this def phones = params.list('phone') def types = params.list('type') given that I call all my phone inputs 'phone' and all my type inputs 'type', which brings me to the point which @zz-coder mentioned, does this guarantee that the lists are synchronized (i.e. if the type on the 2nd phone was left blank while the type on the 3rd phone was filled out will the lists have the same length)? Is this browser dependent? – omarello Jul 25 '10 at 17:55
  • I tried this with grails and it seems to be working ok on FF, Chrome and Opera. I still need to verify with IE if the arrays get skewed when i have empty values. – omarello Jul 27 '10 at 06:30
0

In your case, you should number the field specifically. Don't use array naming convention, which caused me big headache in the past.

If you use arrays, you will run risk of mismatching type and phone values when parameters are missing. Some browsers simply ignore empty values.

To help server retrieve all the parameters, I normally put the number of fields in a hidden field. For the form will look like this,

<div id="phones">
<input type-"hidden" name="count" value="3" />
<ul>

<li>
<label>Phone Number</label><input type="text" name="phone1" value="" />
<label>Type</label><input type="text" name="type1" value="" />
</li>
<li>
<label>Phone Number</label><input type="text" name="phone2" value="" />
<label>Type</label><input type="text" name="type2" value="" />
</li>
<li>
<label>Phone Number</label><input type="text" name="phone3" value="" />
<label>Type</label><input type="text" name="type3" value="" />
</li>
</ul>
</div>
ZZ Coder
  • 74,484
  • 29
  • 137
  • 169
  • The hidden input seems like a good idea. I used to always use this way of post-fixing with IDs but was wondering if it is the right way to do it or not. – omarello Jul 25 '10 at 17:57