Simple Jquery function fails in Safari, Chrome and IE

Question

Hi all,

Here is my simple function

$('#save_button').click(function() {
      $(this).attr('disabled',true).val('Saving');

      $('#new_record_form').ajaxForm({
        url: '/',
        type: "POST",
        dataType: "json",
        beforeSubmit: function(){ alert('Boo!'); },
        success: function(){ alert('Hello!'); }
      });
 });

This works fine in Firefox but not in Internet Explorer, Chrome or Safari.

Commenting out this line $(this).attr('disabled',true).val('Saving'); seems to make things work.

Any reasons for this occuring?

Answer 1

It seems that you cannot modify a control disabled...

but maybe doing this should solve the problem:

$('#save_button').click(function() {
      $(this).val('Saving');
      $(this).attr('disabled',true);

      $('#new_record_form').ajaxForm({
        url: '/',
        type: "POST",
        dataType: "json",
        beforeSubmit: function(){ alert('Boo!'); },
        success: function(){ alert('Hello!'); }
      });
});

Answer 2

I usually write $(accessor).attr("disabled", "disabled"); which results in HTML that looks like <... disabled="disabled" .../> being produced. I didn't know that you could use your syntax. Can you try this, and see if it works?

To remove the attribute, I use $(accessor).removeAttr("disabled");.

Answer 3

When a html input is 'disabled', its not supposed to be able to send input. Try changing the property to 'readonly' instead.