Form Headers Prior to Postback - javascript

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.

Related

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.

Cross domain form submission via iframe, without server side controls

I'm attempting to set up a same-page form submission mechanism for a client website. Their forms submit to a handler page which is on a different domain, so I cannot submit via ajax. Previously I have had success cloning my form into an iframe and submitting that (I don't need to retain control of the iframe, and I don't need to verify receipt, just post the data) but that is now being blocked in Chrome.
It would be relatively trivial to add cross-domain headers if I had control of the servers involved, but I don't.
Is there any way to resolve this, or do I have to tell my client that the method I was using is no longer available and they have no options without making server-side changes?
There's no need to clone the form. Just set target="iframe_name" on the <form> element.
Just target the iframe.
You can change form's target and action dynamically, if for example you need to reuse it for some other submission.
<form target="IFRAME_NAME">...

Is captcha needed if a submit request is posted through ajax?

If I use an ajax request to post a form without actually creating any form or input elements on the page, is a captcha still needed to block spambots?
Are there any spambots out there clever enough to run JavaScripts and submit a ajax post?

intercept form submit response

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.

Form submission not posting data after previous preventDefault'd events

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).

Categories