Disabling form post in google chrome and safari

Sharad — Mon, 17 May 2010 22:36:07 +0000

So, I found this issue with google chrome and safari web browser and I believe this applies to any webkit based browser. When a form submit is disabled by setting the submit button to disabled=true attribute, the browser is usually expected to prevent submission when the user hits “ENTER” on any of its text fields. This works fine in Firefor, my default browser.

In my rails app, I had to do this to work around this.

We use haml rendering engine for our project and my form looks like this:

- remote_form_for @product_search, :url => product_searches_path, |
  :html => {:method => :post, :id => 'product_search_form'} do |form|

This generates a form like this:

  <form onsubmit="jQuery.ajax({data:jQuery.param(jQuery(this).serializeArray()) + '&authenticity_token=' + encodeURIComponent('MlHm/z3dsdYtETKwtNnwQlojx1NIduLlWFMECbjntsM='), dataType:'script', type:'post', url:'/product_searches'}); return false;"
  method="post" id="product_search_form"
  class="product_search"
  action="/product_searches">

I was working with an ajax form but I believe the bug happens even with traditional form POST as reported by another user here.

So, I had to create an onSubmit javascript myself to fix the situation:

- semantic_form_for @product_search, :url => product_searches_path, |
  :html => {:method => :post, :id => 'product_search_form', |
  :onsubmit => "return jQuery.productSearchOnSubmit();"} do |form| |

(function($){
  $.productSearchOnSubmit = function() {
    if ($('#product_search_submit').attr('disabled')) {
    // do nothing
    } else {
      jQuery.ajax(
      {
        data: jQuery.param(jQuery('#product_search_form').serializeArray()) + '&authenticity_token=' +
        encodeURIComponent(form_authenticity_token),
        dataType:'script',
        type:'post',
        url:'/product_searches'
      });
    }
    return false;
  }
})(jQuery);

I also had to add global javascript variable for form_authenticity_token to make it available for javascript when performing submit.

%html{ :xmlns => "http://www.w3.org/1999/xhtml", :lang => "en", "xml:lang" => "en"}
  %head
    :javascript
      var form_authenticity_token = '#{form_authenticity_token}';

If you think, this is a bug too, please vote for a fix.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Tatva-Artha » chrome webkit rails ajax bug

Disabling form post in google chrome and safari