#7181 closed bug (worksforme)

Opened October 13, 2010 05:46PM UTC

Closed October 14, 2010 04:49AM UTC

Last modified July 22, 2012 11:48PM UTC

.attr() issues with Chrome and Safari

Reported by:	tegskywalker@hotmail.com	Owned by:	tegskywalker@hotmail.com
Priority:	undecided	Milestone:	1.4.3
Component:	unfiled	Version:	1.4.3
Keywords:		Cc:
Blocked by:		Blocking:

Description

When submitting a form in Chrome or Safari, adding an .attr() value like disabled puts the button to a disabled state but the form action does not happen and just sits there. Works fine in IE and Firefox. Switching the .attr from ("disabled", "disabled") to ("disabled", true) gets same results. The WebKit browsers are setting the value to undefined which may be causing the issue in standard use and with the Validation plugin.

For example when in use with the Validation 1.7 plugin:

submitHandler: function(form) {
 $(form).find(":submit").attr("disabled", "disabled").attr("value", "Submitting...");
 form.submit();
}

Attachments (0)

Change History (7)

Changed October 13, 2010 05:56PM UTC by anonymous comment:1

Also this block of code does not work which looks for any submit button and not reliant on Validation plugin:

$("form").submit(function() {

$(":submit",this).attr("disabled", "disabled");

});

Changed October 13, 2010 06:09PM UTC by addyosmani comment:2

owner:	→ tegskywalker@hotmail.com
status:	new → pending

Are you able to submit a complete test case of what you're trying to do that we can test and verify for this behavior? We could attempt to rebuild it based on what you've described but it would be quicker if you could post a code example of the page you're working on with references to the HTML/any other scripts running.

Thanks!

Changed October 13, 2010 07:51PM UTC by tegskywalker@hotmail.com comment:3

status:	pending → new

Changed October 13, 2010 07:51PM UTC by tegskywalker@hotmail.com comment:4

Here is an example of the code using the Metadata 2.1 and Validation 1.7 plugins. The code in question is within the submitHandler and uses these JS files:

1. jQuery 1.4.3 RC2 minified

2. jQuery Metadata 2.1 (http://plugins.jquery.com/project/metadata)

by Katz

3. jQuery Validation 1.7 (http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js) by Zaefferer

The HTML code:

{{{

<!DOCTYPE html>

<html>

<head>

Metadata plugin is loaded before Validation plugin

$.metadata.setType("attr", "validate");

Main document ready

$(function() {

Login

$("#login").validate( {

rules: {

email: { required:true, email:true },

pass: { required:true }

submitHandler: function(form) {

$(form).find(":submit").attr("disabled", "disabled").attr("value", "Submitting...");

form.submit();

}

});

end main document ready

});

</script>

<title>Submit Test</title>

</head>

<body>

</form>

</body>

</html>

Changed October 14, 2010 04:49AM UTC by snover comment:5

resolution:	→ worksforme
status:	new → closed

live test case works for me.

Changed December 14, 2010 03:29PM UTC by m.biczysko@gmail.com comment:6

This bug still not works for Safari and Chrome, It's a very useful function specially when submitting big files, you really want disable the submit button and show loading.gif for example. (i'm showing also how work around it)

function submit_click(element) {
  $j(element).next().show();
 	$j(element).parents('form').first().submit(); //this a work around for Safari or Chrome for bug with out it will 
//not submit form
  $j(element).attr("disabled", "disabled");
 
}

Changed July 22, 2012 11:48PM UTC by netzcowboy@web.de comment:7

My fix for chrome is to make a short timeout before setting the submit button to "disabled".

    $(".button-wait-after-click").click(function () {

        var self = $(this);

        self.val("please waiting...");

        // workout
        setTimeout(function () {
            self.attr("disabled", "disabled");
        }, 10);
    });

Side navigation