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.
Related
We currently have a form to sign up for our services on our page. It doesn't actually submit; we prevent the default event and then run through a series of checks, make an AJAX request, and redirect to a thank you page (or display an error message/try again).
We then decided to add the form two more times (once at the bottom of the page and one more time popping up in a modal). Is this inappropriate?
In our current state, we have the error of multiple elements using the same ID. Knowing this is bad, I've found a workaround: Possible to associate label with checkbox without using "for=id"?. The problem is even without the ID error, I'm not entirely sure having three of the exact same forms on the page is appropriate still.
How should I handle duplicate CTA's on the same page?
I am working on page, which uses a modal dialog to allow a customer to chose an item.
On this dialog, the customer can choose one item from a pre-populated list or write in their own item. Once the user clicks the OK button, the modal goes away, gets the name of the item using .val() and through jQuery's .text() function we enter whatever the item name was into a div element.
Since the customer can write in anything, do I have to be concerned about them putting in a <script></script> tag? Are there any other security things I should be concerned about in this scenario?
I am not worried about the back end as when the user finally submits this form, we have input validation on the back end. I am just concerned about the front end.
Thanks!
If you use jQuery's .text(untrustedString) method, you'll be fine. That method will escape any html or tags.
$('<div>').text("<test>")[0].innerHTML
// returns "<test>"
What you would not want to is use .html(untrustedString) method, as any script tags or other html elements in the string would get created.
$('<div>').html("<test>")[0].innerHTML
// returns "<test></test>"
Although, if this will only be shown in their own browser there isn't much security to be gained. You would only be able to attack... yourself? People already have the ability to inject whatever javascript they want into a webpage running in their own browser, should they desire.
The only time this matters to security is if my hacking script tag executed in someone elses browser, which, for instance, beams their cookie to me over the internet and I can assume their identity on your website.
So this isn't about security, it's about your app not exploding when someone enters text that may have meaning to HTML.
That said, in this case, you should definitely use text().
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/
:)
My app has a use case where there is a page where the user can edit data and press save or interrupt editing and make a search or click links. The framework is kind of odd and uses javascript to submit a form for every link that is clicked so we ended up with a mishmash of javascript and java hacks the facilitate the dialogs and checks for unsaved data which became messy and I had to ask about it:
How to exclude components from javascript onkeydown
https://stackoverflow.com/questions/12525020/why-does-this-code-create-a-loop
I either got dialogs that never ended, pressing "yes" to "You have unsaved data. Do you want to comtinue?" made a loop to another same dialog and when I tried to fix it nothing works.
Now the program works on the screen but the solution is messy and if there is another bug or we notice that my solution affect other component there will be trouble.
So I'm asking if you know a plain Java way to check for unsaved session data? What happens is a form is presented to the user and clicking a link when data has been edited should present a dialog thatwarns that data is unsaved. I think doing it without javascript is a better solution, can you comment and/or help me here?
No.
The user enters data in their browser; there is no way for the server to know this unless you submit it.
I have an HTML page in which a table with innumerable no of cells are placed all over the page. In detail a employees 24 hour day schedule is divided into 30 min cell means 48 cells in row by 100 employees on average. Each cell on click opens a popup which on submit submits the whole page again.This is been in use since ages but a new client wants this should happen after all the random popups modfications are complete(means all changes should happen only once). This is mostly written in java,javascript with a custom framework.My qusetion is what is the dual approach for this kind of situation. Most generic answeres I researched is AJAX implementation but i feel some tweaking inside the javascript might fulfill the requirement.
Without AJAX, the only solution I can think of is not submitting the form every time one value is changed, but having a "Save" button that saves them all at once.
However, AJAX would be the best solution. All you do then is submit a iny amount of data to the server and that is dealt with, all while the user stays on the current page.
Mozilla's tutorial is probably the best on the subject if you're using plain Javascript. The various frameworks like jQuery have really simple built-in functions.
It's not absolutely necessary to use XML. A quick and dirty method for data for which you know the format and that is fairly similar is to just pass the data back and forth using the XMLHTTPRequest object. You could detect changes to individual cells with Javascript and events to store the cells that are modified and their new contents. Create the functions to pass the data back to a server page that updates the database.
This can be extremely fast. In one app I worked on, the HTML was 100k per refresh and this dropped to 5k or less when only the data was updated.
AJAX would definitely be the best solution for that. But seeing as you're hesitant to do a rewrite, two ways of improving come to mind:
Change the architecture of the table so that not every change requires a submit - it should be possible to change as many fields as necessary, and then save them all with one submit action. That depends on the table's structure, though, and the way the saving script works - a rework might be necessary, hard to tell without knowing more.
Create an invisible IFRAME, give it a name, and set all <form> elements' target attribute to that IFRAME. There would still be a submit action for every pop-up, but it would be submitted into the invisible Iframe, while the page does not have to be reloaded, and the user can continue working. This not really a beautiful solution but might do the job, at least as long as there are no file uploads involved.