1. #1
    Sencha User aatiis's Avatar
    Join Date
    Nov 2011
    Location
    Bajmok, Serbia
    Posts
    60
    Answers
    3
    Vote Rating
    2
    aatiis is on a distinguished road

      0  

    Default Answered: Form fields with the same name

    Answered: Form fields with the same name


    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.

  2. 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.

  3. #2
    Touch Premium Member hotdp's Avatar
    Join Date
    Nov 2010
    Location
    Denmark
    Posts
    603
    Answers
    8
    Vote Rating
    14
    hotdp will become famous soon enough

      0  

    Default


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

  4. #3
    Sencha User aatiis's Avatar
    Join Date
    Nov 2011
    Location
    Bajmok, Serbia
    Posts
    60
    Answers
    3
    Vote Rating
    2
    aatiis is on a distinguished road

      0  

    Default


    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.

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,004
    Answers
    3489
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      3  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha User aatiis's Avatar
    Join Date
    Nov 2011
    Location
    Bajmok, Serbia
    Posts
    60
    Answers
    3
    Vote Rating
    2
    aatiis is on a distinguished road

      0  

    Default


    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.

Thread Participants: 2

Tags for this Thread