#7181 closed bug (worksforme)
.attr() issues with Chrome and Safari
| Reported by: | Owned by: | ||
|---|---|---|---|
| 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 12 years ago by
comment:2 follow-up: 3 Changed 12 years ago by
| Owner: | set to [email protected]… |
|---|---|
| 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!
comment:3 Changed 12 years ago by
| Status: | pending → new |
|---|
comment:3 Changed 12 years ago by
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 12 years ago by
| Resolution: | → worksforme |
|---|---|
| Status: | new → closed |
live test case works for me.
comment:5 Changed 12 years ago by
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 11 years ago by
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);
});
Also this block of code does not work which looks for any submit button and not reliant on Validation plugin:
$("form").submit(function() {
});