PDA

View Full Version : [CLOSED] Forms are not correctly submitted in Chrome 16



Gerard Pastis
15 Dec 2011, 2:18 AM
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:
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:
_dc:1323942902308


Screenshot:

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


Debugging already done:

none


Possible fix:

not provided

sfahey
15 Dec 2011, 9:39 AM
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:


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:


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.

kiteflo
16 Dec 2011, 8:59 AM
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

venumobile
16 Dec 2011, 9:13 AM
Yes, we are having the same problem here. Our forms suddenly stopped working under Chrome 16. This is a serious problem!

mitchellsimoens
16 Dec 2011, 9:41 AM
You can add method : 'POST' to your submit():


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.

venumobile
16 Dec 2011, 9:47 AM
That works for us, Mitchell! Thanks for the quick response.

kiteflo
16 Dec 2011, 10:29 AM
Thank you! Works for us as well...puh!

fox1charlie
21 Dec 2011, 4:39 AM
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

damrbaby
30 Dec 2011, 11:17 AM
You can also use the beforesubmit event:


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

bitlyfied
7 Feb 2012, 8:25 AM
The latest version of Webkit has a default value "get" for the form DOM element.
Sencha is detecting the method by using this expression:


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.



/**
* 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);
}
});

steve1964
22 Sep 2012, 8:11 AM
Same problem in Safari on iOS6, the above patch solve the problem, thanks!