When I am clicking a submit button on my HTML form, the function related to the button is called and it does its work. After completing the work a mail notification is sent which is consuming too much time. After that a confirmation message is displayed on the same HTML page (without using Ajax; i.e., the page is refreshed).
I want to avoid letting the user click the submit button multiple times in confusion during the waiting period of sending mails. So I am thinking that I should disable the button after it is pressed once.
How can I do this?
Can you please suggest any other technique to achive this goal without disabling the button?
Simply:
<form action="file" method="post" onsubmit="this.submit_button.disabled = true;">
<input name="submit_button" type="submit" value="Submit" />
</form>
You can achieve this without disabling the button by using a nonce, however it is a bit more complex. Essentially, when the user requests the page that has the form that will be submitted, assign a unique id to that user's request (store it somewhere on the server, and make sure it's submitted along with the form). When the form is then submitted, look up the unique id to make sure it's not in process or already processed, and then if it's OK to proceed, mark the unique id as "in process", process the form, and then mark it as processed. If when you do the initial check and the page is in process or already processed, you'll need to take the necessary action (redirect them to a confirmation page if it was successfully processed, or back to the form if it was not successfully processed).
How can I do this?
You can take a look at the javascript code in this page:
http://www.codinghorror.com/blog/archives/000096.html
<input type="Button" onClick="this.value='Submitting..';this.disabled=true;" value="Submit">
Can you please suggest any other technique to achive this goal without disabling the button?
Show a busy panel:
"... Your request is being processed please wait..."
(source: vodafone.co.uk)
If you disable a button right before submitting, then the parent form will not be submitted. You need to disable the button after submitting. Best way it to use JavaScript's setTimeout() function for this.
<input type="submit" id="foo" onclick="setTimeout('document.getElementById(\'' + this.id + '\').disabled=true;', 50);">
50ms is affordable enough to give the form the chance to get submitted.
To enhance the user experience more, you could of course append a message or a loading image dynamically during the same onclick event as already suggested by others.
Assuming you don't want to disable the button you could always pop up a modal on the page. This will block the user's interaction with the page. You could throw some kind of loading spinner in there with a message that the submit is in progress.
I don't understand why it is a problem, as you are doing a regular submit, the user should see a white page while you are processing in the back end.. But in case if you want to disable the button, here is the code, use it on the button
onclick="this.disabled=disabled"
You could have the button be disabled, but still seem active to the user. In the function that gets called after the button is hit the first time, have the first thing it does set a global variable like disableButton to true. When the user presses the button, have that go to a function called something like checkSubmitStatus. If disableButton = true, return false. if disableButton = false, trigger the submit function.
You have still disabled the button, but your users can press away unaware.
I'm not submitting anything, but Google Chrome 31 doesn't update the button look while calculating, so i came up with this workaround:
<style>
.btnMenu{width:70px; font-size:12px}
.btnMenu:disabled{background-color:grey}
</style>
<input type="button" class="btnMenu" value="Total" onmousedown="b=this; b.disabled=true; b.v=b.value; b.value='Calculating...'; setTimeout('updateTotals(); b.value=b.v; b.disabled=false', 100)"/>
This question already has answers here:
How to prevent buttons from submitting forms
(20 answers)
Closed 4 years ago.
I have few field within a form to dynamically add data to database. I send data from couple fields to php using ajax and receive correct response. But when i click button with attached click handler to submit required fields whole form being reloaded i dont know why. Could somebody please help me out. Anyway thanks in advance ;)
$("#button").click(
function(){
var somedata1= $(".someinput").val();
var somedata2= $(".someselect").val();
ajax_post('http://someurlhere',
'some1='+somedata1+'&some2='+somedata2+'&csrf_token='+csrf_token, handle_submit, handle_error);
}
);
You need to prevent the default action that submitting a form does (reloading the page).
$("#button").click(
function(e){
// this prevents the default action from the submit action
e.preventDefault();
var somedata1= $(".someinput").val();
var somedata2= $(".someselect").val();
ajax_post('http://someurlhere',
'some1='+somedata1+'&some2='+somedata2+'&csrf_token='+csrf_token, handle_submit, handle_error);
}
);
This question already has answers here:
How to open a file / browse dialog using javascript?
(9 answers)
Closed 9 years ago.
i have this problem:
i have this code
if(ext!="rar") {
$('#myform').trigger('click');
}
and if the file extension of the chosen file is not rar, the file input should open the window again to choose another file, but this code does not seem to work. What should i do?
$("#btn").click(function()
{
var fu = $("#fu");
var ext = /[^.]+$/.exec(fu.val());
if (ext!="rar")
{
fu.trigger("click");
}
});
http://jsfiddle.net/tugpM/1/
Assuming that your form tag has the id myform, what you have done just triggers a click on the form (not even on the submit button of the form). Without the HTML, it is not possible to know what you are triggering the click on.
What you need to do is trigger the click on the submit button
$('#mysubmitbutton').click();
or trigger a form submit:
$('#myform').submit();
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
how to prevent multiple form submit from client side?
We have a project management tool which we are using, but when a user submits a log under task they click the submit button several times. this adds in several entries of the same information.
I have tracked down the code within the PHP file and I have seen online many solutions for on submit click. I have been playing around for the last four or five hours but unfortunately I have been unable to get anything to work. I was hoping someone could provide a little assistance:
This is the code that I have in the PHP file:
<input type="submit" class="button" value="<?php echo $AppUI->_('update task'); ?>" onclick="updateTask();" />
effectively I just want the user to click the button, and after a single click. It is either greyed out or the user is unable to click any more.
Thank you
Just disable the button in updateTask() function:
document.getElementById("mysubmit").disabled = true;
This assummes you add ID to your submit button.
If it's an AJAX submit, make sure you reenable the button if the submit fails.
Why not simply disable the button in your updateTask() script?
document.getElementByID("myButton").disabled='disabled'
If the updateTask function is too generic, then your button could call a more specific function that deals with just that button:
function myButtonClicked() {
document.getElementByID("myButton").disabled='disabled';
updateTask();
}
and then change your button to call myButtonClicked instead of updateTask.
<input type="submit" ... onclick="myButtonClicked();" />
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Is there a way to catch the back button event in javascript?
In my application,the user can enter data eithe add or modify those modification is saved into database using ajax.After all the modifications is completed in the screen then user will be finalized the data.In the time,user accediently click on Browser 'Back' Button.
So,what i need is,if user clicked without 'Update' button then if clicks the Browser 'Back' button.i want to shown the alert message.So,How to detect/capture the 'Back' Button.Please help me
You could use the window.onbeforeunload event
<body onunload="Unloader()">
<script type="text/javascript">
function Unloader() {
}
</script>