Forms are not correctly submitted in Chrome 16

Sencha Touch version tested:

• 1.1.1

Platform tested against:

• Chrome 16.0.912.63 m

Description:

• Since the update of Chrome to version 16, forms are not correctly submitted. The method is forced to "GET" and no fields are sended.

Test Case:

See this URL : http://dev.sencha.com/deploy/touch/examples/forms/


Steps to reproduce the problem:

• Go to http://dev.sencha.com/deploy/touch/examples/forms/
• Click "Save"
• Watch Requests in developper tools

The result that was expected:

• Request method: POST
• Request params:
  Code:

  ---

  name:
password:
email:
url:
cool:
spinner:0
rank:master
secret:false
bio:
height:0
enable:0
team:
color:green
number:
email2:
url2:
options:1
single_text:
single_toggle:1
single_slider:60

  ---

The result that occurs instead:

• Request method: GET
• Request params:
  Code:

  ---

  _dc:1323942902308

  ---

Screenshot:

• Chrome 16 developper tools (with bug)
• Safari developper tools (without bug)

Debugging already done:

• none

Possible fix:

• not provided

I am also seeing this issue. Form Data is not being posted in Chrome 16.0.912.63 beta. My app is working in Safari, which is one version off from the latest.

Request header in Chrome:

PHP Code:

---

Request URL:http://www.example.com/index.php?_dc=1323969677449
Request Method:GET
Status Code:200 OK

GET index.php?_dc=1323969677449 HTTP/1.1Host: www.example.com Connection: keep-aliveX-Requested-With: XMLHttpRequestUser-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_2) AppleWebKit/535.7 (KHTML, like Gecko) Chrome/16.0.912.63 Safari/535.7Content-Type: application/x-www-form-urlencoded; charset=UTF-8Accept: */* Referer: http://www.example.comAccept-Encoding: gzip,deflate,sdchAccept-Language: en-US,en;q=0.8Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3Cookie: __utma=93888793.173034037.1292268459.1323107406.1323282572.32; __utmz=93888793.1308170904.21.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none) 


---

Request header in Safari:

PHP Code:

---

Request URL:http://www.example.com/index.php
Request Method:POST
Status Code:200 OK

Origin: http://www.example.com
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_2) AppleWebKit/534.51.22 (KHTML, like Gecko) Version/5.1.1 Safari/534.51.22
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://www.example.com 


---

I know it used to work in Chrome 15, and maybe even earlier versions of Chrome 16. Looks like it still works in iOS's browser, but I'm not sure about the latest Android browser.

Hi Sencha guys,

hopefully you have noticed this post as this is a really heavy issue - not sure whether the Chrome guys are responsible for this dilemma, but currently our customers can not submit any data!!! And they start blaming the Sencha framework we are using for this, so hopefully there is a quick fix or workaround for this issue...

Please help!

Florian

Yes, we are having the same problem here. Our forms suddenly stopped working under Chrome 16. This is a serious problem!

You can add method : 'POST' to your submit():

Code:

---

form.submit({
    method  : 'POST',
    waitMsg : {message:'Submitting', cls : 'demos-loading'}
});

---

I know it's supposed to default to POST but it's not so we can force it to.

That works for us, Mitchell! Thanks for the quick response.

Thank you! Works for us as well...puh!

this might be a noob question, but how do i set the method to POST if i use the submitOnAcion: true on a fromPanel, to submit the login-data?

Edit:
Fixed it by altering the HTML of the form itself (by doing some bad stuff to the "id" property of the form), works for now, isn't a good solution though.

"Please God forgive me."

-cheers

You can also use the beforesubmit event:

Code:

---

var form = Ext.extend(Ext.form.FormPanel, {
  listeners: {
    beforesubmit: function(form, values, options) {
      options.method = "post";
    }
  }
});

---

The latest version of Webkit has a default value "get" for the form DOM element.
Sencha is detecting the method by using this expression:

Code:

---

method : form.method || 'post'

---

In Chrome 15 form.method value is undefined, in Chrome 16 it's "get".
I created a patch that still respects this behaviour, but uses getAttribute instead.

Just include this patch after you loaded Sencha.

Code:

---

/**
 * Chrome 16 form submit method patch
 * @see http://www.sencha.com/forum/showthread.php?161923-Forms-are-not-correctly-submitted-in-Chrome-16&p=703923#post703923
 */


// store the original submit function
Ext.form.FormPanel.prototype._originalSubmit = Ext.form.FormPanel.prototype.submit;


// patch it
Ext.override(Ext.form.FormPanel, {
    submit: function(options) {
        options = options || {};


        if(typeof options['method'] === 'undefined' && this.el){
            // if method is not specified, query the form HTML attribute
            // by using this.el.dom.getAttribute instead of this.el.dom.method
            options.method = this.el.dom.getAttribute('method') || 'post';
        }


        // invoke the original function, but with the method patched
        Ext.form.FormPanel.prototype._originalSubmit.call(this, options);
    }
});

---