Form fields with the same name

**aatiis** · 4 Jun 2012 10:42 AM

When a form has multiple fields with the same name attribute, only the first of those fields will be submitted.

This is probably due to the way form.getValues is implemented. However, in many cases, fields with the same name would make sense (example would be a form for submitting a book with imputs for each chapter).

A workaround that we use is form.disable().submit({params: ...}), where in the params config we set the value to be an array of the appropriate values.

Is there something like a "multivalue" config option for fields that I'm missing? Or even better, the form should detect if there are multiple fields with the same name, and when serialising, it should turn those values to an array.

mitchellsimoens

Have the names be an array:

Code:

new Ext.form.Panel({
    fullscreen : true,
    items      : [
        {
            xtype : 'textfield',
            label : 'One',
            name  : 'test[]',
            value : 'a'
        },
        {
            xtype : 'textfield',
            label : 'One',
            name  : 'test[]',
            value : 'b'
        },
        {
            xtype : 'textfield',
            label : 'One',
            name  : 'test[]',
            value : 'c'
        },
        {
            xtype   : 'button',
            text    : 'Get Values',
            handler : function (button) {
                var form   = button.up('formpanel'),
                    values = form.getValues();

                console.log(values);
            }
        },
        {
            xtype   : 'button',
            text    : 'Get Values',
            ui      : 'action',
            handler : function (button) {
                var form = button.up('formpanel');

                form.submit({
                    url : 'data/form.php'
                });
            }
        }
    ]
});

In the request, you will see the three test[] parameters and depending on your server and server side script it will be an array. In my case I am using Apache and PHP so $_REQUEST['test'] = array('a', 'b', 'c') which I believe is what you were wanting.

**hotdp** · 4 Jun 2012 12:06 PM

Why would you have more then one field with the same name? I only see why if its a radio field.

**aatiis** · 4 Jun 2012 1:39 PM

Because I want to add an array of values.

Say you want to add an array of "chapters" to a "book", but the number of chapters is arbitrary. One option would be to make the field names "chapter1", "chapter2", etc., but since the HTTP specs allow the use of the same key for multiple values to encode an array of values, I would rather implement my API that way (which is how something like this should be implemented in the first place).

The following is perfectly valid HTML and generates a perfectly valid HTTP request according to the HTTP specs. This is not a design error, this is a completely valid use case as per the specification.

HTML Code:

<!doctype html>
  <html>
  <head> 
  <meta charset=utf-8>
  <title></title>
</head>
<body>
<form action=/books/new>
  <input type=text name=title>
  <input type=text name=chapter>
  <input type=text name=chapter>
  <input type=text name=chapter>
  <input type=text name=chapter>
  <input type=text name=chapter>
  <input type=text name=chapter>
  <input type=text name=chapter>
  <input type=text name=chapter>
  <input type=text name=chapter>
  <input type=text name=chapter>
  <input type=submit>
</form>
</body>
</html>

All I'm asking for is the ability to do the same (or equivalent) in the Sencha Touch framework.

**mitchellsimoens** · 6 Jun 2012 4:22 AM

Have the names be an array:

Code:

new Ext.form.Panel({
    fullscreen : true,
    items      : [
        {
            xtype : 'textfield',
            label : 'One',
            name  : 'test[]',
            value : 'a'
        },
        {
            xtype : 'textfield',
            label : 'One',
            name  : 'test[]',
            value : 'b'
        },
        {
            xtype : 'textfield',
            label : 'One',
            name  : 'test[]',
            value : 'c'
        },
        {
            xtype   : 'button',
            text    : 'Get Values',
            handler : function (button) {
                var form   = button.up('formpanel'),
                    values = form.getValues();

                console.log(values);
            }
        },
        {
            xtype   : 'button',
            text    : 'Get Values',
            ui      : 'action',
            handler : function (button) {
                var form = button.up('formpanel');

                form.submit({
                    url : 'data/form.php'
                });
            }
        }
    ]
});

In the request, you will see the three test[] parameters and depending on your server and server side script it will be an array. In my case I am using Apache and PHP so $_REQUEST['test'] = array('a', 'b', 'c') which I believe is what you were wanting.

**aatiis** · 6 Jun 2012 8:33 AM

Yes, this is exactly what I wanted. I was not aware of this 'convention', nor did I find it in the docs.

Thank you so much for your help.

Form fields with the same name

Thread Tools

Search Thread

Display

Answered: Form fields with the same name

Answered: Form fields with the same name

Tags for this Thread