I want to disable submit button once it is clicked..Let me explain it as below
On form submission validation is done using ajax call and submit button is disabled using
.attr("disabled",true);
If response is 'Fail' (i.e. validation fails) button is clickable again using .attr("disabled",false) in ajax response
This work absolutely fine in FF and chrome but in IE8 whenever button is pressed, effect of being enable to disable is visible (button is normal when clicked, visible like disabled). don't want this momentarily change in appearance on IE8.
I even tried some suggestion like using .attr("disabled","disabled"); and .removeAttr("disabled"); to make it disable and enable.
Code snippets:-
$("#submitBtn").click(function(event) {
event.preventDefault();
$("#submitBtn").attr('disabled',true);
dataToPost = $("#Form").serialize();
$.ajax({
type: "POST",
url: 'FormValidation',
data: dataToPost ,
success: function(response){
if(response.status=='FAIL')
{
$("#submitBtn").attr('disabled',false);
//Some code
}
else{
/* submit the form to if validation is successful */
saveData(dataToPost);
}
Instead of disabling the button, why not prevent the click behaviour?
One way to do that would be to do something like:
var waitingForAjax = false;
$('yourButton').click(function(e){
if (waitingForAjax) {
return false;
}
waitingForAjax = true;
// ajax call
});
then on ajax fail set waitingForAjax to false again.
Unfortuntely if you use the disabled attribute, no matter what you try IE will just default the colour of the text to grey, with a wierd white shadow...thing... yet all other styles will still work. :-/ as answered here.
Related
I have a web page with several forms. Only one is visible at a time, depending on state.
On one form, pressing the enter key appears to be causing a reload of the page rather than triggering a click event for the form's button.
I have a lot of javascript, primarily because I need client side interaction with mailchimp. Because of that, I have disabled the form's action= html and have instead created a javascript function to handle the click. It works fine if you click on the button.
I have also assigned a listener for the sole field in the form:
var input = document.getElementById ("new-email-address");
input.addEventListener ("keyup", function(event)
{
if (event.keyCode === 13)
{
event.preventDefault();
document.getElementById("new-email-address").click();
}
});
Yet, when I click the enter key, the $(document).ready (function() executes. It's possible something else is executing beforehand, but, if so, I haven't found a way to discover that.
What could be causing this behavior ?
It turns out that the enter key is being handled at the form level. To disable that, I added this code for each form:
$("#the-form").keypress(function(e)
{
if (e.which == 13) // Enter key
return false;
});
How to disable Save As dialog while pressing Ctrl+S
Description: I am developing one web application.Here When i am going to form submitting using "Ctrl+S",In Firefox before submitting "save As dialog" will open.How to disable save As dialog in Firefox.
You can accomplish this by handling the window's onkeypress event to check whether the CTRL key and S are depressed, and if so, canceling the event from by calling preventDefault() on the event object:
window.onkeypress = function(event) {
if (event.charCode === 115 && event.ctrlKey) {
event.preventDefault();
// your code here....
alert("'Save As' dialog suppressed!");
}
};
Note that the keypress event may behave differently in different browsers. This did work in FireFox, however.
How to disable/enable a button? which is not in a form , in a navBar. I'v tried some examples , all fail.
I'm changing my textarea text $("textarea").val(x); The text is changing , the problem it doesn't get auto re-size , I see the ugly scroll bar on the side , If I manually resize it , its OK... is there a method to force refresh or something like that?
Thanks
Update (TextArea):
If i click on the text area and then press any key -> it opens up as should be,
I'm trying to simulate it .. but fail , the binding is works , but the trigger for keypress/keydown doesn't , I tried some codes from googling, this should work , I think , mayb for nomral jQuery 1.6 , but not jQuery mobile.. My test are are on Chrome and iPhone 4
$('#textarea').bind('click', function() {
var e = jQuery.Event("keypress", { keyCode: 64 });
$(this).trigger( e );
});
UPDATE:
Link button example:
http://jsfiddle.net/gRLYQ/6/
http://jsfiddle.net/gRLYQ/7/ (Header button example)
JS
var clicked = false;
$('#myButton').click(function() {
if(clicked === false) {
$(this).addClass('ui-disabled');
clicked = true;
alert('Button is now disabled');
}
});
$('#enableButton').click(function() {
$('#myButton').removeClass('ui-disabled');
clicked = false;
});
HTML
<div data-role="page" id="home">
<div data-role="content">
Click button
Enable button
</div>
</div>
NOTE: - http://jquerymobile.com/demos/1.0rc2/docs/buttons/buttons-types.html
Links styled like buttons have all the same visual options as true
form-based buttons below, but there are a few important differences.
Link-based buttons aren't part of the button plugin and only just use
the underlying buttonMarkup plugin to generate the button styles so
the form button methods (enable, disable, refresh) aren't supported.
If you need to disable a link-based button (or any element), it's
possible to apply the disabled class ui-disabled yourself with
JavaScript to achieve the same effect.
Regarding your second question, you can cause a textarea to autogrow by triggering a keyup() event on it.
Considering your original example code, the following works for me:
/*Note: I'm using 'on' instead of 'bind', because that's what I've actually tested
with, but I'm pretty sure this will work with 'bind' as well*/
$('#textarea').on('click', function() {
//First we'll add some text to #textarea
$('#textarea').val('some dummy text to be added to the textarea');
//Then we trigger keyup(), which causes the textarea to grow to fit the text
$('#textarea').keyup();
});
Short and sweet version of the above, this time chained and with no comments:
$('#textarea').on('click', function() {
$(this).val('some dummy text to be added to the textarea').keyup();
});
Adapted from here.
I'm trying to prevent the user from clicking on more than one postback-causing element on the page. In other words, if they click the 'continue' submit button, they shouldn't be able to cause another postback before the original request comes back.
I've had a go with two versions of jQuery code. Neither does exactly what I want:
This version will disable all the postback elements, but in doing so, it stops the clicked element from firing. For the record, I don't think the .removeAttr('onclick') is really required, but leaving it out doesn't seem to change the behaviour.
$(function() {
$('a, :button, :submit').click(function() {
var elements = $('a, :button, :submit');
elements.attr('disabled', 'disabled').removeAttr('onclick');
});
});
This version disables all other postback elements, but it lets me reuse the same element that was clicked - I don't want to be able to hit the same button twice.
$(function() {
$('a, :button, :submit').click(function() {
var otherelements = $('a:not(#' + $(this).attr('id') + '), :button:not(#' + $(this).attr('id') + '), :submit:not(#' + $(this).attr('id') + ')');
elements.attr('disabled', 'disabled').removeAttr('onclick');
});
});
How can I prevent this behaviour?
I just tested your first approach without JQuery, and it worked fine, i.e. disabling the submit button didn't prevent the form submission.
<form method="get">
<input type="text" name="textfield" value="a" />
<input type="submit" onclick="this.disabled=true">
</form>
Maybe you want to double check is there is anything else, e.g. JQuery, going on?
Maybe you could put a flag or something that it could remember what button it was clicked and if that flag exist, you can remove the onclick event on that postback-causing element. But I think this cannot be done in client side scripting alone, since once the page is submitted, all client side elements and scripts are refreshed.
Perhaps instead of making this a click function make it onmouseup so it fires after the click event has occured.
Here's a final version that worked - just overriding the form submit event rather than looking at any individual elements.
var submitted = false;
$(function() {
$('form').bind('submit', function() {
if (!submitted) {
submitted = true;
return true;
} else {
return false;
}
});
});
Thanks all for your suggestions.
I have a webform and i want to detect if F5 button was pressed or if the page was refreshed. I know about postback but it is not what i'm looking for. I have a gridview that loads in a modal popup when a button is clicked and a parameter's value is set for the gridview. When refresh is hit and if the modal popup button was previously clicked the modal popup is visible right after refresh. I want to detect if the page is refreshed to prevent this. any ideas? I thought to try Override but I'm not exactly sure how to use it. I tried Control.ModifierKeys but I don't have access to ModifierKeys.
Pressing F5 or physically clicking the browser refresh behaves similarly to navigating away from the page. This is captured in the event window.onunload. Try the snippet example below:
window.onbeforeunload = function (evt) {
var message = 'Are you sure you want to leave?';
if (typeof evt == 'undefined') {
evt = window.event;
}
if (evt) {
evt.returnValue = message;
}
return message;
}
This will capture the refresh and allow you to do something or prompt the user.
Reemember that hotkeys are processed in the client side in the browser. The easiest way to implement this is through javascript.
Look at the following link:
http://snippets.dzone.com/posts/show/3552