Develop Reference

How to disable button when clicked button to action window location and enable it again after window location finished [duplicate]

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

How to prevent form resubmit on refresh while form is submitting

I'm using nodeJs, handlebars, and JavaScript to submit a form with the post action but form submission is taking time due to a lot of data to store in DB son while the form is submitting if someone refreshes the page it creates duplicate data in DB.
can you tell how can I prevent this from happening?
I create a button to submit the form and submit using Js like this.
function sumitform() {
var myform = document.getElementById("myForm");
myform.submit();
}
<form id="myForm" action="/path/toNodePostApi" method="post">
<input name="name" value="{{{data}}}">
<input id="btnsubmit" class="btn" type="button" value="submit" onclick="sumitform()">
</form>

You can disable the button after is pressed, but this is not going to hold the user form "refresh" the page and re-submit the values.
In my case I do a "Working or Submitting" icon while doing it, but you will have to validate on the server side. This will only let the user know, that the page is working on something a wait before hitting refresh.

You could ask the user to confirm they want to leave (or reload, in this case) the page:
window.onbeforeunload = function() {
return true;
};
In addition you could store the data in session. Check to see if there is data in session on page load. If it is there, the page was reloaded and you can make an api call to take appropriate action on the server to remove the previously sent data (or prevent it from being sent again from the client in the first place).

document.getElementById("myForm").addEventListener("click", function(event){
event.preventDefault()
});
It prevent from reloading on button click
Clicking on a "Submit" button, prevent it from submitting a form
Clicking on a link, prevent the link from following the URL

SharePoint 2013: Redirect to different page after cancel button is hit

I am using SharePoint 2013. I have a custom list form for Feedback and Suggestions. Currently, to access the form, a user clicks on a link that takes them directly to the New Item form.
What I am trying to accomplish:
- When a user clicks save, they are taken to a "Thank You" page.
- When a user clicks cancel, they are taken back to the home page.
Things I have done:
- On the link to the new form, I have added "?source=(URL for Thank You Page" - This accomplished the Save button task, but not the Cancel button task.
What I need help with:
I need to know how to override the default cancel button. Right now it also redirects to the Thank you page. I need it to go to the Home Page.
The only thing I can do to edit the form is add code snippets.
Thanks in advance!

SharePoint out of the box behavior is to send the user to the url in the Source querystring parameter WHEN THEY CLICK EITHER THE SAVE BUTTON OR THE CANCEL BUTTON on the new form.
Since the OP is experiencing different behavior, it is possible (maybe even likely) that someone has added code to the master page of her site to override the oob behavior.
Anyone coming here looking for how to redirect the Cancel button, PLEASE PLEASE PLEASE check the behavior in your own site before spending hours hunting for some esoteric solution like one of my user's did. I showed him how to use the source parameter, and we solved his issue in <1 minute.

To accomplish this I did the following:
To redirect after Save button is pushed:
Create a Thank You page and copy the URL. Save for Later.
Add "?source=" then the url from step 1 to the end of the link that takes you to your new item page.
EX: https://NewItemForm.aspx?Source=https://ThankYou.aspx
That will redirect to the Thank you page, if you hit save or cancel.
To Fix the Cancel button, do the following as well:
Go to your list > Form Web Parts (in the ribbon) > Default New Form
Insert Script Editor Web Part
Add the following code:
<script>
function goToByePage(){
window.location.assign("https://SitePages/Home.aspx");
}
function overrideCancel()
{
//Custom input button
var input = document.createElement('input');
input.type = "button";
input.name = "Cancel";
input.value = "Cancel";
input.id = "custominput";
document.querySelectorAll('.ms-toolbar input[value=Cancel]')[1].parentNode.appendChild(input);
document.getElementById("custominput").setAttribute("class", "ms-ButtonHeightWidth");
//Hiding already implemented cancel buttons
document.querySelectorAll('.ms-toolbar input[value=Cancel]')[0].style.display = "none";
document.querySelectorAll('.ms-toolbar input[value=Cancel]')[1].style.display = "none";
//this is main logic to move history back
document.getElementById("custominput").setAttribute("onclick", "goToByePage();");
}
_spBodyOnLoadFunctionNames.push('overrideCancel');
</script>
<style>
#Ribbon\.ListForm\.Edit\.Commit\.Cancel-Large
{
display:none;
}
</style>
This will remove the upper cancel button that was in the ribbon, and make the cancel button on the form take you back to whatever page is listed in the goToByePage function.
The code for this comes from 2 different sources:
https://sharepoint.stackexchange.com/questions/190776/basic-custom-list-how-to-redirect-to-different-page-on-cancel-and-on-save-butto
https://social.msdn.microsoft.com/Forums/office/en-US/5036ab40-2d9b-4fe5-87a2-5805268eea07/how-to-override-behavior-of-the-cancel-button-in-the-ribbon-and-the-form?forum=sharepointdevelopment
Hope this helps someone else in the future!

window.location not refreshing to the existing URL

I have a PHP page with implementation of jQuery horizontal tabs. I have added a jQuery script so that the page URL reflects the tab#. I have a form on the page and upon form submission I need to refresh and stay on this same page to include the jQuery correct tab number.
This is the code to add the jQuery tab number to the URL:
<script>
jQuery(function($) {
$("<p>").html("Loaded at " + new Date()).appendTo(
document.body
);
showTab(location.hash || "#tabs-1");
$("#nav a").click(function() {
var hash = this.getAttribute("href");
if (hash.substring(0, 1) === "#") {
hash = hash.substring(1);
}
location.hash = hash;
showTab(hash);
return false;
});
function showTab(hash) {
$("div.tab").hide();
$("#tab-" + hash).show();
}
});
</script>
The full URL of the page is http://somedomain.com/includes/nonadmin_user_profile.php#tabs-5 and includes the tab number for the jQuery horizontal tab.
I am using this script to refresh and stay on the same page: echo "<script>window.location=window.location</script>";
On refresh here is the problem as it lands at this URL which does not include the tab number. http://somedomain.com/includes/nonadmin_user_profile.php
Any suggestions would be appreciated very much.
Here is another detail: The problem described above does not occur if I merely refresh the page with the browser refresh button or if I right click the page and refresh. In this instance the page refreshes and stays on the full url with the tab#.

Per Disaster Faster's request, the issue encountered was simply that the browser was not going to the desired location of the page. The form data was successfully submitted and correct page was loaded.
The solution to his issue was modifying the form's action attribute to include the location information (similar to adding location information to an anchor).
Original:
<form action="nonadmin_user_profile.php" method="post">
New:
<form action="nonadmin_user_profile.php#tabs-5" method="post">
Original Post:
The window.location = window.location redirect should include the location information.
JSFiddle: http://jsfiddle.net/6dqcmh9d/
If you click the button first, it'll report the URL with the location information because it hasn't been added to the URL. Then click the link and re-click the button. You'll receive the URL with the location information added.
If you want just the location information, you can use window.location.hash, but this will only produce the location on the page, not the URL of the page.
The problem you'll run into will be with the form submission. To submit a form without changing the page, you'll either have to submit the form to a new window (add target="_blank" to the form) or implement AJAX. In either case, we'd need a little more of your code to help with integrating it properly.

It is likely that the tab controls are being handled with onclick events or something similar, and are not listening for hash changes onload. You'll likely need to add some custom JS to force the tab change if there's a hash change.
What's wrong with using the reload() method?
document.location.reload(true);
From the docs:
The Location.reload() method Reloads the resource from the current
URL. Its optional unique parameter is a Boolean, which, when it is
true, causes the page to always be reloaded from the server. If it is
false or not specified, the browser may reload the page from its
cache.
If you need to integrate it into a PHP echo struct, use:
echo '<script>document.location.reload(true);</script>';

You should use reload() to refresh the page, eg:
window.location.reload();
Or given your example:
echo "<script>window.location.reload();</script>";

Stealing the redirect URL of a button

Is it possibe to change the return URL of a button whose job is submitting a form to the server? The main deal here is that I don't have the script that controls the button, hence the word "stealing."
If you are curious about the use case, I have a Salesforce Visualforce page that has an embedded Flow in it. I want to jump out of the Flow when the user is half way through and a certain condition is met.

Assuming the button is not in an iFrame...
$('#some_button').click(function (e) {
e.preventDefault();
// Do stuff here then submit the form..
$('#some_form').submit();
});
You could also use this method for $('#some_form').submit().... You can read more about it here.