The "submit" event on forms in JavaScript

hey guys hey going and my name is dumb and today I want to take you through the submits event inside JavaScript so essentially the submit event is going too far off whenever you submit an HTML form okay so I find that it's only useful when you prevent the default behavior of a form okay so in this video we're going to use the submit event in combination with an HTML form in order to make an AJAX request okay so let's hop inside the HTML for this document okay and inside here we can begin by actually creating a form to work with right so down here I'm going to make a new form and replace the action attribute with an ID and give it a value of my form I'll also give it a class of the form just to add some custom styles okay now I'm not going to put the action or method attribute so the reason for that is because we're going to use Ajax to submit this form there for the action and method attribute is not required alright so inside the form we can now we can create a few fields okay let's make one for a username okay so make a new label for a username with some text as being username okay and a respective input fields of type text with a name of a username and an ID of username alright we can copy and paste this for the password field so we're going to say password and all of these ones can be a password okay so now we have these two fields I can add a submit button okay so button of type submits and the value of let's just say login okay so if I saved this and refresh the browser we get this form right here so as I said I've added my own custom styling through the form class but we have a fully functional form right here okay so now we're going to use the submit event in order to fire off an ajax request okay and we'll also send the form data with the ajax request all right so back inside of the HTML let's head over to the JavaScript section all right we can start by getting a reference to the actual form element okay so let's just make a new constant down here and we'll call this one my form equal to document dot get element by ID and pass in my form inside here okay so now we have a reference to the actual form element all right so let's add an event listener for the submit event all right so down here let's say my form dot add event listener and pass in submit inside here all right now for the for the function handler we can just take advantage or capture the event instance so we're gonna put e inside there as a parameter all right inside the function body the first thing to do is to prevent the default behavior of the event so I'm gonna say e dot prevents default so what this will do is it's gonna stop the default behavior of the browser redirecting to a different page to actually post the form so even though there's no action or method attribute the browser is still going to actually attempt to submit the form to a different page or even the same page all right so that right there is going to prevent that from happening all right down here I'm also gonna say console.log and say form has been submitted okay so now with this code I'm going to save this and refresh the browser I'm gonna then enter some data inside here I'm gonna say username Depot and a password of this just say D code as well all right so I'm gonna I'm gonna hit enter okay and we get form has been submitted so we can see if I you know try to submit the form there's no redirection but we get that message right there now if I was to actually remove this prevent default line okay I'll save this and refresh the browser and then submit again we see the browser actually refreshes the page right so that prevent default is quite important if you're using the submit event okay so now it is all set up we can we can now use Ajax to actually send the data somewhere else all right so I'll just create a PHP file inside this directory let's just call this one login dot PHP it's going to be quite straightforward okay I'm just going to simply var dump I'm gonna var dump the post global variable all right so now whatever data that we actually send from the form it's just going to display the data you know formatted you know bio-damper style okay so let's now make an AJAX request to this log in PHP file and then see the actual response alright so down here inside the the event listener we can create an instance of a xml httprequest object so make a new constant equal to a new XML HTTP requests ok we can now open the request up you can say request dot open okay this will be a host a post method alright and the URL is going to be login dot PHP that one right there ok so we can see how I'm actually specifying the method inside here as well as the actual action as opposed to inside the form up here alright so we can say when the request comes back so request dot onload we're simply just going to console dot log console dot log the requests doctor response hit so whatever the PHP spits it up okay was gonna log it to the console okay and then we can finally say request dot sent but what I actually send off the data in the form so I'm gonna use the form data object to actually achieve this so what you can do is just say inside the send method we're gonna say new form and data okay and then pass in my form so the form data constructor accepts a form as a argument and then it's going to send off the actual name and value as a as a post okay so we can now you know save this and refresh the browser and test it out a refresh and then I'm going to say username decode and password decode okay press login and we get array use the name decode password dica that's from the PHP scripts alright and that right there is how you can use the submit event inside of JavaScript thank you for watching and I'll see you later

Channel: dcode

Views: 113,573

Keywords: code, coding, programming, tutorial, introduction, beginner, walkthrough, guide, software, development, simple, easy, into, english, with, example, examples, js, javascript, web, website, app, ecmascript, ecmascript2015, es6, event, addeventlistener, on, driven, form, submit, input, text, password, field, select, option, ajax, async, asynchronous, fetch, api, http, request, response, html, html5, css, css3, xml, xmlhttprequest, serialize, get, post, query, string, json, method, action

Id: I_fVO_NzT2g

Length: 8min 50sec (530 seconds)

Published: Mon Jul 02 2018