Bug Tracker

Opened 9 years ago

Closed 9 years ago

Last modified 7 years ago

#7181 closed bug (worksforme)

.attr() issues with Chrome and Safari

Reported by: tegskywalker@… Owned by: tegskywalker@…
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();
}

Change History (7)

comment:1 Changed 9 years ago by anonymous

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");

});

comment:2 Changed 9 years ago by addyosmani

Owner: set to tegskywalker@…
Status: newpending

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!

comment:3 Changed 9 years ago by tegskywalker@…

Status: pendingnew

comment:3 in reply to:  2 Changed 9 years ago by tegskywalker@…

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery-1.4.3rc2.min.js"></script>
<script type="text/javascript" src="js/jquery.metadata-2.1.js"></script>
<script type="text/javascript" src="js/jquery.validate-1.7.js"></script>
<script type="text/javascript">
// 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 id="login" class="login" method="post" action="logincheck.php">
<input name="email" type="text" value="">
<input name="pass" type="password" value="">
<input type="submit" name="submit" value="Proceed">
</form>

</body>
</html>

comment:4 Changed 9 years ago by snover

Resolution: worksforme
Status: newclosed

live test case works for me.

comment:5 Changed 9 years ago by m.biczysko@…

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");
 
}

/

comment:6 Changed 7 years ago by netzcowboy@…

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);
    });
Note: See TracTickets for help on using tickets.