I have a form which, when submitted, is first validated by a function that is bound to the form's "submit" event. If the validation fails, the submit event has it's default action cancelled via e.preventDefault(). If the form submits correctly the first time, it works. If, however, it experiences a preventDefault then subsequent submissions do not send any form data in the POST request. I analyse this in the Chrome code inspector.
FYI it is a multipart/form-data form.
Is there any reason that the form would ignore all the inputs when submitting?
I found my problem. Form elements that have the "disabled" attribute are not included in submission. I was disabling form elements in order to disallow the user from editing things while waiting for response from the server (it is an asynchronous post to an iframe).
Related
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.
I have an HTML5 form that I use to submit a query:
<form action="/get_my_download/" method="get">
...
<button type="submit">Go</button>
</form>
I know I can fire an event before submitting the form using onsubmit="my_pre_submit_function()", but is there a way to fire an event after the form has been submitted and the reply has been received? It's worth noting that the response to this form is a file download, and submitting the form with AJAX is out of the question since Javascript can't touch the file system. How can I be notified that the response is complete?
You can use type button instead of submit and do you own submission using xhr. This will give you more control...
The MDN docs only list two form events : submit and reset.
Thus, you need a wrapper function that submits the form and then performs some action. If `AJAX is 'out of the question" I think you're out of luck, bud.
Why exactly can't you use AJAX? As tymeJV mentioned, AJAX is just performing a call to the server; it doesn't grant access to the file system.
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?
I want to intercept my form's submit response via javascript. Submit is normally done by a submit button or jquery's .submit() (with no params). Is there a way to intercept that submit response like;
.submit().done(callback)
I know .submit() does not have support for this, however creating a post request like finding every input in that form and getting their values into data object which we will then pass to .post() method seems a bit clumsy to me. Besides there will be no advantage of using <form> tags in html in that approach.
Any suggestions for this?
No, you can't.
Besides, when you do .submit() or click submit button, the page unloads and a new page loads. which means all java script on the page is gone so there is no point in having a callback.
I have a submit input in a form with an onclick method. The onclick method correctly adjusts the action of the form and allows the form to submit (submission is handled naturally, not through a javascript submit). What I need to do is add a http request header (X-Requested-With = XMLHttpRequest to be exact). Is there a way to ensure the form post is sent with that header? The post cannot be submitted via javascript using the form.submit() method.
According to this answer what you're asking for is impossible in its current form. However you could modify where the form submits too. For example POST to:
www.mysite.com/XMLHttpRequest or www.mysite.com/NormalRequest
so that the server understands the context of the request.