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.
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.
So currently, I have a form with many parameters and a button that when clicked causes the user inputs to be edited into a more manageable string. Is it possible to at the same time send it to my Nodejs server and if so how to get that value (I'm guessing something like req.body.generateForm but I doubt that works)? This is the basic structure of my form.
<form id="generateForm" method="post" action="/app" onsubmit="return writeForm(event);">
Yes, instead of attaching your function directly on the form via onsubmit and calling it. You can instead add an event listener and prevent default.
adding event listener
let form = document.querySelector("#generateForm");
form.addEventListener("submit", writeForm, true);
more about event listenders here:
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
function writeForm(event){
event.preventDefault();
//your function to mutate and send data here...
}
i advise you practise sending data using vanilla javascript once, just to know how it works. then using ajax Jquery to make it easier. lastly moving forward using a webframework to really simplifly things.
FYI, i found MDN web docs to be a great resource.
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.
hi i am using jquery submit() function to submit iframe . i want to add another event after completing the submit()
curently i use $('.form').submit();
i can not use when() then() because i am using jquery 1.3.2 , please help
#Kanishka Panamaldeniya the only way i see it happening without using ajax post kind of submit is once the form is submitted to the destination send out some response back to the page in the form of a get request by appending some variables to the url as additional params and catch them during an load event of the iframe page...dirty and disgraceful as it may sound its still a feasible option... hope it helps you in some way
In asp.net page, How can i call the javascript methods for form processing-submitting if the user browser supports javascript and use code behind events if the browser does not support javascript.I have the javascript code to send the form data to an ajax server page using jquery. Don't know how to invoke the needed one based on the browsers javascript availability
Create the form that does a postback and submits the data without JavaScript then set the click event on the submit button to call your javascript function.
Then use e.peventDefault() and e.stopPropagation() in the click event to prevent postback.
You may also need to capture the enter key press event and prevent it from causing a post back as well.