Submit username and password javascript (not a form) - javascript

I have a popup which asks the user for login information, which means two input text fields for password and username.
Now as I will be verifying the information using ajax I didn't wrap the elements on a because form always needs a php action, correct? or am I missing something?
So I'd like to know if there is a fancier way to check if the user pressed enter, in order to submit the login information, than checking each time a key is pressed, with keydown, if it's the enter key.
Thanks in advance

You still need a form to wrap your user inputs, and that form still has an action. However, you won't do a full page post. Instead, you'll send an AJAX post. jQuery makes this really easy.
$(function() {
$("#myForm").submit(function () {
var data = $(this).serialize();
var url = $(this).attr("action");
$.post(url, data);
return false;
});
});

Now as I will be verifying the information using ajax I didn't wrap the elements on a because form always needs a php action, correct? or am I missing something?
A form requires an action, it doesn't have to point to a URL that is processed by PHP. There are much nicer languages available (this is subjective).
What you are missing, is a fallback for when the JavaScript isn't run for some reason (such as the file not being downloaded due to a network glitch, the client not supporting JS or having JS, etc). Build on things that work.
So I'd like to know if there is a fancier way to check if the user pressed enter, in order to submit the login information, than checking each time a key is pressed, with keydown, if it's the enter key.
If you build on things that work, then you'll have a form anyway, and can run your JS in the submit handler. Then you don't need to care if the form was submitted by a keypress or a button click.

Add attribute to form
<form onSubmit="call your javascript; return false;"> ...
so when enter, or submit button is pressed your javascript will be called and then you can do what ever you want with your form values. Reutrn false will prevent classic form submit.
I hope this helps

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.

Can someone explain the difference between onsubmit and action?

I'm having trouble understanding what the form action is used for. It seems like I can handle form data with a Javascript function by setting the onsubmit value to that function. I'm seeing a lot of different examples online that are confusing me even more.
Can someone walk me through what this will do and maybe give me an example of what the form action could do that "onsubmit" can't or shouldn't?
<form onsubmit="someFunction()" action="???"> ... </form>
A user will enter information into the form, then they hit a button to "submit" that information. someFunction() will do stuff with that information... then, the form action is responsible for what? I've seen some examples that look like it just specifies a URL to a page telling the user something like "Thanks for submitting".
I'm sorry if this is confusing. I'm not sure how to ask what I'm confused about. I'm looking for a really simple answer that you might give to a child about what that line of code means for the user and also for the information that was entered into the form.
The difference here is subtle but important:
onsubmit is an event attribute, meaning whatever JS is in it will be called on the submit event.
action tells the browser where to send the contents of the form when it is submitted in either a GET or POST request (POST by default, unless specified otherwise by the method attribute), then reloads the page with the result of the request it sent.
The action attribute is less customizable because it won't run any of your custom JavaScript, all it will do is send the data to your backend. On the other hand, onsubmit runs your custom JavaScript, which can do whatever you want (including sending data to your backend). If all you need to do is run some client-side JavaScript when the form submits, use onsubmit. If all you need to do send data to the server when a form submits, use action.
Generally, you don't want to use both at the same time because if action sends data to your backend, then your page will reload. In fact, even if you don't specify an action attribute, then the page will still reload because it is the default behavior. When using the onsubmit attribute to run JavaScript when a form is submitted, you'll need to override this default behavior with event.preventDefault(), hence why most onsubmit handlers look like this:
function onsubmitHandler(event) {
event.preventDefault()
// ... rest of the code ...
}
onsubmit() function needed to handle the form submit in JavaScript. When we add the URL in action attribute, we can't handle the form data in JavaScript. In this case, we can't validate the form data, so the empty data is sent to the server. This will increase server load and it's really bad.

Form submit with enter key acts wrong

I am using laravel and sammy.js for my application. My login form looks like this:
<form action="#/login" method="post">
<!-- inputs -->
</form>
Now, sammy.js catches it like this:
this.post('#/login',function(){
//handle, send to laravel for login
});
My problem is that if I press the enter key, apparently instead of submitting the form, which would result in this.post('#/login') event to be catched and the function to be executed, an HTTP request is already made, and the laravel route is requested. As the route does not exist, a MethodNotAllowedHttpException is thown.
Now, the question is: why does this happen? While pressing the "submit" button makes the login, hitting the enter key results in the error above.
I would like an actual solution to the problem, as well as an explanation of it, not patches like e.preventDefault() on keypress or return false in js.
Note: sammy is initialized correctly, the form is in the container on which sammy works and submitting using the enter key used to work in a previous version of the site. A lot has changed by now, so reverting is not a good option, so I would like an actual suggestion on how to solve the problem.
Thanks
citing section 4.10.22.2 Implicit submission in the Html5 specification:
User agents may establish a button in each form as being the form's
default button. This should be the first submit button in tree order
whose form owner is that form element, but user agents may pick
another button if another would be more appropriate for the platform.
If the platform supports letting the user submit a form implicitly
(for example, on some platforms hitting the "enter" key while a text
field is focused implicitly submits the form), then doing so must
cause the form's default button's activation behavior, if any, to be
run.
In a nutshell, hitting the Enter key will always submit the form (issue an Http request) regardless of SammyJs. Note that the enter key will submit the form even if there's not Submit button!
Are you returning false from the #/login Sammy route?

How to control what happens when a user puts their email in the text field and clicks submit

I am making a task list on my site, in which i will put different things to do..
In the end they will be asked to put in their email address and click submit.
Now This is what I want to do when they click submit:
The next day,(not right away!) they should get an email that should
link them to next task.
This should be automatic, and I just have to set the submit buttons
up with the right code provided by you.
It will be my great honor if a volunteer helps me out.
I am also using wordpress
This can be done using JavaScript and Java Servlets.
in action page call: action servlet.
Servlet Should be able to send the email at particular time.
How to send email automatically at particular time of day in javaClick here to see how to send an email at particular time
Try this too
You can't do this with just javascript. You will need that form to post to some back end server which can store the information (probably in a database), and process it at some point in the future when it is necessary.

Multiple use of a form before it is submitted

I'm new to JavaScript, and trying to figure out the canonical way to do the following.
I have a form with some checkboxes and a selector.
Let's say the checkboxes are styles of music and the selector is for people's names.
I'd like the user to be able to select the styles of music for multiple people and then submit the form with all of the data.
For example, the user might first check off Classical, Jazz, Rock, and Pop and choose "Joe", then select Jazz, Pop, Country, and Electronica and choose "Jane". So there would have to be two different buttons for "submit person" and "submit form".
I would like to:
Have a list of the names and their chosen styles populate below the form, for feedback
Allow the user to use the form as much as they want, and then submit all the data at the end
I get the feeling that using jquery and JSON is perfect for this, but I'm not sure what search terminology to use to figure out how to do this.
If it matters, the form will be processed by a Django view in Python.
You can achieve this by using AJAX for submit person. Your work flow should go like this:
User selects Joe and the corresponding styles of music.
User hits 'Submit Person'. On this event, encode the name of the person (Joe) and the styles of music selected into a JSON object and pass it to your back end script via an AJAX (jquery ajax() ) request.
The server side script with do whatever processing it needs to. When it finishes, you AJAX calls' success handler will be invoked. At this point, you can probably remove 'Joe' so the user knows the submission was successful and does not submit for Joe again.
Wash, rinse, repeat for all other people in your form.
PS - when you pass information to the back-end via AJAX, you do not have to encode it as JSON. You can either send it as a standard POST request. To encode a Javascript objects into JSON, use JSON.stringify()
The above is one way of doing it, however it won't work like you asked in your question (keep collecting data - submit at once), To work it that way, everytime the user hits 'Submit Person', add the data to a Javascript object, but do not submit it. The submitted data will keep building up in a JS object.
Finally, when the user hits 'Submit form', stringify the data and submit it.
How about using django form-wizard.. Could it be enough? https://docs.djangoproject.com/en/dev/ref/contrib/formtools/form-wizard/

Categories