Prevent multiple form submission using a counter? - javascript

P.S - Although there are many other such questions in Stackoverflow, I could NOT find the method that I was trying to implement.
Now, what I tried doing is as follows :-
Profile Page
Email : example#example.com [Edit Details Button]
Edit Details Page //user is sent here if s/he clicks on Edit Details Button
<form id='inputform'>
<input type="text" name="email" id='email'>
<button type="submit" id='submitform'>Submit</button>
</form>
<script>
//Script part below
</script>
Script
//validation part here
var noofsubmits = 0;
$('#submitform').on('click',function(e){
e.preventDefault();
if($('#inputform').valid()){
noofsubmits++;
if(noofsubmits == 1){
$('#inputform').submit();
//redirect users to a different page on successful form submission
}
}
});
On every form submit, the user is redirected to the profile page (which shows updated info). Now, everytime the user tries to edit details , the varialbe noofsubmits is set to 0.
I am not having any problem with this method, but is there any practical problem with this method? Like what if the user disables Javascript in the browser, so would this method not work?

Yes for sure if javascript is disabled on the client side, the script part will not be executed. (and you have to do validation and redirection on the server side)
However, there are very very few people who disable javascript in their browser.
The drawback of doing validation and redirection on the server side is that the user will need to wait for a slightly longer time because there will be time lag before the server respondes to the client request. But if your validation is done on the client side (javascript), then the user will experience immediate response on data validation.
On the other hand, using javascript will also be good if you want some visual effect like animation to be rendered on the client side.
Since very very few people will disable javascript in their browser, you can continue to use your javascript approach to do the job

Related

html script history.back() causes "Confirm Form Resubmission". How to suppress that browser prompt using my custom script? [duplicate]

I am in bit of a delicate situation here. In my organization we design stock management systems and it is a web application based on JSP pages and servlets which handles them.
I have been asked to fix a specific problem. We have a JSP page with an HTML form table where there are stock details. When user enters the details manually and submit the form, stock details updated in the database and it works fine.
Problem is this : When the user press the browser's back button, user can come to the previous page where he submitted the details. And when the user submit this, data is saved once more to the database.I need to prevent this behaviour.(Something likeclear and reload the page.)
Things I did so far : clear the browser cache.Code works fine but not the expected result.
Unfortunately I cannot share the code due to company regulations. What I need is a help to prevent this behaviour or a workaround.
Thanks in advance..
You can use a javascript function with the help of a hidden attribute to reload the web page. When the user press the back button,based on the value of the hidden attribute, page will be reloaded without loading the cached page.
Your approach of clearing cache is correct. Coupled with that, you can use this approach.
<input type="hidden" id="refreshed" value="no">
<script type="text/javascript">
onload=function(){
var e=document.getElementById("refreshed");
if(e.value=="no")e.value="yes";
else{e.value="no";location.reload();}
}
</script>
One drawback of this approach is if your clients' browsers have disabled JS, this will not work.Otherwise it should work.
When the user press the browser's back button, user can come to the
previous page where he submitted the details. And when the user submit
this, data is saved once more to the database.
According to how you described it, that is based on a doGet request. Which means every time you visit that URL, it will send the request with whatever parameters were added.
As someone already mentioned, if you switch the form to a post method and switch the Servlet to a doPost, you won't have this issue anymore.
Alternatively you can circumvent this with a javascript solution. Here are some options:
You can check if the user clicked the back button, disable form if true.
Another way is by storing a cookie which you check on page load, if it exists you can disable the form.
You can use this code also
$(document).ready(function() {
function disableBack() { window.history.forward() }
window.onload = disableBack();
window.onpageshow = function(evt) { if (evt.persisted) disableBack() }
});
You must use a Post-Redirect-Get pattern: https://en.m.wikipedia.org/wiki/Post/Redirect/Get.
Actually, every use of standard HTML forms with method="post" should be implemented with that pattern. It doesn't have any use for AJAX-posted forms, which actually could be another solution but will require more work and probably some architectural changes.
I had this same problem while building a django web app, and my solution was to not allow caching of the html that contains the form. In your request handler, do not allow the browser to cache the page. This will force the browser to get the page fresh from the document.
Which, in this case, you can just verify in your request handler if the requested form has already been submitted.
My code for reference:
from django.views.decorators.cache import never_cache
#never_cache
def GetForm(request, pk):
# Logic #
if (IsFormCompleted(pk)):
# Handle request #
Here is a solution.
give a random id in a hidden field on the form. Then on the server side, if the user resubmit, check if the random id already on the database. If so, redirect user.

How do I create a form that only allows one submission per day per user in HTML?

I am pretty new to HTML forms, but I am trying to limit 1 submit request per user, per day. So I don't have any people spam it. I am not the best coder, but not the worst.
Example (in words, not code):
If user has not submitted the form today:
Form allows person to submit.
If user HAS submitted the form today:
Form does not allow person to submit form, notifies them as well.
Please note this in HTML and JavaScript only please!
I do not think that you can do this with only client side technologies (like HTML and JS) since they're session based. If a user opens a different browser or even closes and opens the same browser, the JS and HTML are 'new' again. You could limit it per browser if you used a client side cookie that stored the submission and the time stamp, but it would not prevent the user from submitting again using a different browser.
Here is a link about cookie creation and reading: Set cookie and get cookie with JavaScript
html and js only solution:
if (confirm("have you made a request today? 'OK' means YES, and 'Cancel' means No")) {
document.getElementById("submitBtn").disabled = true;
} else {
document.getElementById("submitBtn").disabled = false;
}
<form>
First name:<br>
<input type="text" name="firstname"><br> Last name:<br>
<input type="text" name="lastname"><br>
<button type="submit" id="submitBtn">Submit</button>
</form>
yah, not really possible. sessions or cookies can be easily bypassed as others mentioned...
You could try to prevent spam with a captcha.

How do password managers know when I've logged in successfully?

So you know how you are presented with a login screen and then, you fill it out, and then the browser loads the next page? At this point, somehow the password manager bar pops up for LastPass, 1Password, or some other extension, asking if you want to save the password. How do they know you've just logged in successfully??
Forms are sometimes submitted and other times the js intercepts the form submit and sends AJAX.
The response comes back and may set a new cookie, but sometimes the existing session cookie continues to be used (allows session fixation attacks but some implementations do that).
A new location is loaded or reloaded but sometimes the javascript reloads a portion of the document instead
But somehow these password managers DETECT that I've logged into a site successfully! How? Is it because I entered something in a password field, and then some form was submitted or some network request was sent? But how do they know it was successful?
Anyone familiar with these password managers able to give some useful info?
The reason I ask is that I want to develop an extension that detects when you've logged in and somehow tries to extract your user id from the service. It is for the purposes of sharing your user id with friends automatically, and letting them know (with your permission) what sites you are using a lot.
Any hints on techniques to extract the logged-in user's id on the service would also be helpful.
They aren't actually aware of a successful login in most cases. They are aware that a form with a password field was submitted, and the response was a 200OK. This may still be a page displaying an error message.
As for extracting user IDs, I'm pretty sure you mean profile pages or something similar. That will have to be done on a site by site basis as sites will have their own APIs and route structures.
As someone already answered this question, I will agree with him.
They aren't actually aware of a successful login in most cases. They are
aware that a form with a password field was submitted, and the response
was a 200OK. This may still be a page displaying an error message.
Since browsers watch for the request having a password field in it and the response status, But still you can fool the browsers easily. To get to know about the logged in userid you definitely need backend support / api. It depends on the authentication frameworks used in the back-end. But you can get the form fields easily, but extracting / finding userid from the form fields is a quiet difficult task, In most cases, form will be having only two fields there you can manage to get the userid. But in some cases like banking sites they will send few dummy fields fool such tools, Also many fields will be encrypted in the client itself to protect man in the middle attacks. In some cases userid is different from email, So its difficult task.
They only detect if the form was submitted, and it a code 200 (OK) was returned. They don't necessarily know if you were logged in, but this method works on most websites. They might also detect if a new page was loaded afterwards, since a failed login doesn't usually redirect the user. I have, however, had a prompt to save an incorrect password before.
They can detect your current tab. and each HTML element of that page.
May we they have list of login page case to detect keywords like
login,username,forgot password. and check all keyword to identify this is login page.
They just ready page and even they can read your password (yes) .
If you made request from that page & response will be 200ok it means your password is correct.
Whenever to request to server with username and password the server checks these two entry into their database and the server will found your data it will return response code 200 and using AJAX success call back script will catch the response code and will show successful message.
and also return some sort of information you can store into localStorage of browser or into cookie for further use.
I have created a couple of pages static HTML and form: So when form is submitted it goes to second page.
Let's test
<form action="test1.html">
<input type="text" />
<input type="password" />
<input type="submit" />
</form>
</body>
Chrome don't bothered anything happened. While firefox has given a popup to save password even when form is submitted to an error page.
So firefox only looks for a form submitted with a password field and asks for save password popup box.
If want to create an extension which can check wheather user is successfully logged-in and then you want to ask for password remember popup. For that you have to check for server response. I couldn't create a dynamic page to to proof read it with browser example.

Redirect using post and get the succes of the redirect

Say, I have a simple form on my website having three fields : name, password and email.
I have to get these information from the users, and keep in my database.
Then redirect to another website and send all these information using post.
I also have to know whether the user was successfully redirected to that site(HTTP STATUS 200).
Here's how I'm doing it:
For Point 1, I'm simply submitting the form.
After the data has been successfully saved in my database, I'm rendering the following form with hidden fields. This gets submitted and user gets redirected to anotherwebsite.com
<form id="form_id" action="https://www.anotherwebsite.com/form" method="POST">
<input type ="hidden" name ="name" value ="$name">
<input type ="hidden" name ="password" value ="$password">
<input type ="hidden" name ="email" value ="$email">
</form>
<script> document.getElementById('form_id').submit(); </script>
Problems:
I don't think my strategy to achieve point 1 and 2 is correct. I need a better solution. Submitting the form, then rendering a page with hidden fields and submitting it again to redirect to another site just doesn't feel right.
I have no clue to achieve the 3rd point.
Based on your question you might try this approach:
create a form with name, password, email fields in a file ( HTML ).
Submit the form to server.
On the server side get the data (including the form attribute in a variable) and save it to database.
then redirect to the given website ( using the variable you've stored in step 3 ).
You can easily know the status ( 202 or any error) using any of server side scripting language.
If you are sending the user to another website, the only way to know that the user was successfully redirected is for that website to notify you in some manner. Once the user leaves your page (and that's what a redirect is - it tells the browser "leave this URI and go to this URI instead"), the scripts on that page stop running, so they can't collect any further information.
If you just need to know that the information was submitted successfully, your script could POST the data in the background, wait for a 200 response, then redirect after the information has been submitted. But that may not meet your requirements, since you still won't know if the redirect succeeded.
Another possibility which does allow you to know whether the page on the other site loaded correctly would be to open it in a new browser window/tab instead of redirecting. This is the only way to keep your page active (and, thus, your scripts able to run) while loading another page. However, it introduces other issues, like what to do with the original page. (Leave it open in the background (likely to confuse the user) or close itself after seeing that the new URI has loaded (could cause undesirable visual artifacts as one window/tab opens and then the original one closes; destroys browser history)?)
If at all possible, having the final destination site notify you when the transaction completes is almost certainly the best way to go.
To achieve point 3 you need to use cookies if you are actually trying to implement a login-cum-membersarea system. Othewise, you simple need a redirect inside a condition statement.
my $cgi = CGI->new;
if (condition) { print $cgi->redirect('https://www.examplesite.com/file.html') }
for a general way of doing point 1-2, you can look at the tutorial here:
http://practicalperl5.blogspot.com/

How to append to form "Thanks for the email!" after submit button is pressed?

I'm building a contact form for my website and I would like users to enter their information, click submit, have the information process with php and to just have a message display on the bottom of the form. Originally, I was redirecting to another page and the form was working properly, but now I just want to append a small message and can't get it to work.
This is what I have currently in my contactengine.php file for it to process all the variables and send the email.
if ($success){
THIS IS WHAT I DID BEFORE THAT WORKED BUT HAS TO REDIRECT
// print "<meta http-equiv=\"refresh\" content=\"0;URL=index_thanks.html\">"; //
//BELOW IS WHAT I WANT TO OCCUR
<script type="text/javascript">
$("#contact-area").append("Thanks for your message!")
</script>
}
You don't need JavaScript for this. JavaScript is great, but it should only be used where necessary, since it can add some brittleness to the user experience.
Here's a possible design approach:
Set up a POST form
Process the form, set a session variable to thank the user, and redirect to the form again. This switches the browser from POST to GET mode†, and is usually as simple as this:
header('Location: http://yourdomain.com/form.php');
exit();
Render the form as usual. If a session variable is set to thank the user, render the thank you message, and unset the session variable‡
I wouldn't use a <meta /> refresh here - it needs to load more data to work, and is more fiddly to implement.
† The POST-redirect approach is a common design pattern in web development. There are plenty of resources about this on the web, if you are unfamiliar with it. It fixes problems associated with rendering web content inside a POST method, particularly in relation to page refreshing and using the back/forward buttons.
‡ These temporary session variables are sometimes known as flash variables. They exist from one HTTP operation to the next, and are erased at the end of the second operation.
You cannot put JavaScript inside of your PHP code. However, I will give you an explanation of what you need to do.
On the client side, bind an event for the click, then
$('form button').click(function() {
$.post('file.php', {'object': 'property'}, function(success) {
if(success) {
$("#contact-area").append("Thanks for your message!")
}
});
});
On the server side, you will process this:
//file.php
$sentByAJAX = $_POST['object'];
return true;

Categories