Disabling form post in google chrome and safari at Tatva-Artha

Disabling form post in google chrome and safari

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()) + '&amp;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}';