Develop Reference

Handling multiple HTML submit button presses from form in WordPress

So I’m running a WordPress site and it has a form I have made using HTML with a text field, an email field, a password field, and a submit button.
The problem is that users can spam the submit button, and users are occasionally prone to do that as I’m using AJAX to handle the form submission which can take a while.
Any elegant solutions would be good. I have a few suggestions I think could work but I’m not sure how to implement them, if they will actually work, or if they’re even viable.
First possibility I’m thinking of — when WordPress loads a new page, it often has the swirly loading screen with a grey background. could I have the loading screen come on prematurely, as in at the point when I run any AJAX code, too, rather than just when it changes page?
Second possibility I’m thinking of — is there a way to block all of the form fields and the submit button from being pressed as soon as you click it so it cannot be spammed and fields cannot be changed? Could this work via JavaScript (sorry not the best with JS)?
Third possibility I’m thinking of — is there a way that the system only accepts one form from an IP in the space of 5-10 seconds and any other submissions of a POST request in that cooldown time are ignored?
Would any of the above solutions work or be viable enough to work? If so, how would or could they work? I’m thinking the second one is probably the easiest to implement? However, wouldn’t the first one confirm to the user that we’re processing their data so it’d be better for the UX?
Fourth possibility that considers UX and the solution I feel is more practical — is there a way to block the submit buttons and input fields from being pressed or edited once the submit button has been pressed once, and then have a swirly loading bar appear below or above it (maybe via CSS and HTML?) so users know the site is doing something or loading?
Something just to note — the change must be client side only and the change should not affect the user if they come back to the page in future, meaning it should not remain blocked if they refresh the page or come back to it later. I know it’s implied, but wanted just to specify that.

Since you're doing this as an AJAX request, i imagine you currently have some javascript tied to the onsubmit event. Most likely this function of yours encodes the data to JSON and then sends it to the server using ajax.
One way you could accomplish this, is:
Introduce a new variable in the global scope (so outside of the onsubmit-handler); like var submission_cache = ''; or the like.
Next, inside your onsubmit handler, between the stage where you have 'encoded the entire form to a single json string' and the stage where you 'actually send the data', you compare the json to the submission_cache variable. If it matches you ignore the submission, if it doesn't match then you store a copy of the json (or a sha1 checksum of it) in submission_cache, and then just continue with the ajax stuff.
This way:
Since it is a variable on the page, the cache has the same lifetime as the page. If they leave your site and return later, the variable will be empty again, and they can submit identical info as the last time.
Secondly, if they notice they made a typo 1ms after they submitted, they can resubmit (since the cache wont match), which i imagine is desirable.
Another solution that you could use in addition to the above is to simply enable the disabled attribute on the submit button (inside your onsubmit handler function. Re-enable it after a setTimeout or in one of your ajax onreceived/onerror closures.

When the users are on the same webpage, is it possible that one user has clicked on a button and that will notify all other users?

Just like the title says. I want to create a shared online timer for my friends and say when one of my friends clicked the "refresh timer" button, ideally that all my other friends' page should get automatically refreshed with the new timer, or a notification saying that the timer has refreshed and require them to refresh the page.
I think at least the latter one is possible since when you get a comment of your question on Stackoverflow, you will get notified somewhere in the page telling you there's a new comment.
How to achieve this functionality? In JS or? Thanks in advance!

Javascript setInterval
using Javascript setInterval when the page is loaded, if you're not using MySQL, check a notepad for the text update(or whatever you want) and when it's found, clear it and then run whatever code
When the user presses a button, have it write to the file update(the same thing as above)

There would be 2 ways to go about it:
Simpler one would be to use polling through setInterval and look for changes on the backend.
A more accurate way would be to use Websockets which relay information to the clients that the timer has been reset.
Your choice of tool would depend on how complex you're willing to let it be

Tell when a user is going back in browser history

I have a page A that displays some text from my database. The text is editable and gets autosaved using AJAX. If the user would go away from that page, and then go back to page A using browsers history functionality, the page would not have the latest data (since we went back in history). And the user would edit the old data, which would overwrite the latest data on the server when it gets autosaved.
I assume this is purely a front-end issue, where my server can do nothing about this. What solutions could be aplied? If it was possible do detect with javascript that the user went back in history, then I could simply display a text saying that the user has to refresh the page. But is that even possible? Or are there any better solutions?

There are lots of options and strategies for a situation like this.
The first thing you can do is to try to disable caching on the page. You can use meta tags to do this.
You can also keep track of when the user presses the back button using libraries such as this one. You can respond either on the server or on the client, although you want to be careful because a disabled back button can annoy users.
Should you ever happen to consider using a javascript framework such as AngularJS you can probably keep track of the back button using the framework.
Finally you can solve issues like this with careful page design. If the data on a page can change you might load the current data via ajax before the user has a chance to edit it. By doing this - your "load" code will run even if the user does use the back button. Take a look at this stack for more information on that!
Hope these suggestions help a bit!

If you are using Jquery then use/
$(document).on('pageshow', '#Content' ,function()
in place of
$(document).ready(function()
It will solve your problem, the javascript file that is back end will be loaded when that particular page loads

Change element value on external website

I have such a problem - I want to change value of an element on some external website.
Namely: I have webcam http interface which is password protected and there is a page with motion detection checkbox and "Apply" button (form submit). I want to create simple program with some sort of delayed toggling of motion detection (so I can launch this program and have some time to leave the building before motion detection starts). So I want to change checkbox state and write this change to system. I tried something like this, but that doesn't work:
jQuery.get("http://admin:password#192.168.0.1:12345/motion-page.asp",
function(data){
$('input[name="checkbox1"]').prop('checked', false);
// and there "simulate" clicking on Apply button - submit the form -- don't know how ...
}
);
Can anybody help me with this, please?

I would backtrack from the page that shows when you submit the camera form. See if the form itself is submitting the "turn camera on" variable as GET or POST. If you already know this, then all you would have to do is access the same URL as the form from the camera (assuming it's HTTP accessible on a network like this) and submit that same set of variables.
If you don't want to open a browser to do this, you could write yourself a custom application that submits it for you, but either way you have to open something to make the submission, as a script has to wait [X] amount of time before making the request. The fastest way will be through a browser.
I am not sure you need jquery for this (I never use jquery hardly at all). What I would do on the scripting side, since merely accessing this script means you want to activate the timer most likely, would be to create a timer object in javascript, and then make a single function that either accesses the URL of the camera form submission with the GET string parameters (that's easiest if it's doable via GET, because you wont have to build a form), or, if it's POST, have the function build a form and submit the form via POST to the same URL.
Google how to create a timer in javascript, and google how to automatically submit a form. Doing the code for you would be a waste of my time if you can figure it out on your own. If not, come back and we'll see what we can do :)
Good luck.

Why not after hitting the submit button, or after checking the box, have javascript actually run a timer? Look into the timer functions in js or jquery if that's more your thing. Not sure if you need it written to disk or whatever... since you're not giving much info, but whatever data you're wanting recorded could be captured when the box is checked and can be submitted along with the form whenever the timer runs out.
Submitting a form in jquery is simple:
http://api.jquery.com/submit/
:)

Confirm dialog box on unload/exit UNLESS the back button is pressed?

I have some simple code to display a confirm dialog box when the user tries to leave my form:
window.onbeforeunload = askConfirm;
function askConfirm(){
return "Your answers will be lost.";
}
But this is a multi-page form and they frequently press back to change some values on a previous page.
But when they do this dialog box still comes up.
Is there a way around this?

The answer I would suggest unfortunately doesn't actually answer your question but is a solution of a kind. The only possible solution here, imv, is to make sure that a user clicking the back button doesn't actually create an issue by storing the form answers from all pages. In the case of PHP I would store them in a session ($_SESSION). You have to recognise that users use the back button more than any other UI element within a browser. If your form truly has to be across a number of pages then you need to make sure the data they have entered is persistent across all these pages. I would actually provide a navigation for this within your own interface. Provide a clear sequential process visually and allow instant navigation through this process where possible.

I don't see a way to specifically detect whether the user pressed "back" or any other browser button. This is outside the site's scope.
Only one solution comes to mind: Show the confirmation dialog only when a global flag has been set to "true".
if (ask_when_exiting == true)
return "Your answers will be lost.";
You would have to set the variable to true? in the onclick event of every link that you want the confirmation to pop up for. You should be able to mass apply this event to every link on your page using JQuery or another JS framework (Seomthing like $$('a').each()....).
However, this will disable the confirmation for reloading the page, or any other event that is not triggered using a control on the page like typing in another URL or closing the browser, as well.