Creating an AJAX Submit Form using JavaScript - Tutorial For Beginners

[@senju31]

Thank you. I wish there more KZbinrs and or persons in general like you. God bless.

[@leslinks]

what you have taught us is just awesome. i told you i intend to use procedural way to submit the form after the js validation. but it is more than that. i'm gonna implement this in my project. Thanks mate!

[@sajadgholami1137]

Thanks a lot 'dcode' I learned it completely ♥

[@dcode-software]

No problem!

[@omniversal4739]

Thanks. I've been trying to use that with prepared statements to avoid sql injection attacks, your tutorial (and some research on Stack Overflow alongside with the php docs) helped me to actually understand how to pass my params into the prepared statement function. Seeing as to how bad my usage of this is because of the repetative code I have to use in my case while writing the logic for my prepared statements, I'm better off making my own php framework or something.

[@dcode-software]

Awesome to hear!

[@TomasMisura]

thanks a lot for this tutorial ! I have seen a lot of tutorials but this is one the best ones :)

[@dcode-software]

I'm glad to hear that mate! Once again you're very welcome

[@senju31]

@7:15 - PHP Logic @11:26 - JS Logic

[@zomalee4512]

How to pass checkbox array??

[@shanekanyi7676]

Hi, I wanted to ask how in the beginning you link the check-login.php file to the index.html file because I don't get anything on the webpage in the network tab of inspect

[@shawnbeans7389]

THANKS FOR TEACHING THIS FOR FREE

[@TutunSadhukhan]

Thank u so much for such a valuable tutorials...❤❤

[@tejjmk5141]

Love Your Stuff 😃

[@dcode-software]

Thanks mate you're welcome!

[@svitirur1665]

What is the difference between using js ajax for form registration and PHP

[@ezequieldasilva1415]

In big projects will help you to decrease the delay of the server, using a handler like this it's convenient because you can have a better UX and also can play a little more with the front-end side.

[@sharksean6363]

Thank You very much! You've helped me a lot! Nothing I can do for you but subscribed your channel and give you a BIGGGG thumb! You are wonderful! Thanks!

[@cloudpuncher4615]

your on fire mate :)

[@dcode-software]

🔥🔥🔥

[@patrickgeider]

Love the voice mate

[@dcode-software]

Thanks mate

[@musiclovers8488]

You are awesome dude!! I wanna give you 100000000000000 likes!! ThNks a lot dude

[@oliviam830]

why request.open('post') and not 'put'? (very useful vid btw, thank you so much!)

[@antonisantoniadis9974]

Thank you sir! Great tutorial with great explanation!

[@dcode-software]

No worries mate!!

[@ezequieldasilva1415]

Thanks you a lot, this was very clearfly

[@RamuRamu-jp3yy]

Thanks helped a lot subscribed .

[@dcode-software]

Awesome 🙂

[@naiemofficial_]

I did it successfully as your tutorial. I'm using it in a multi-step form. I want to hide the login form and show another module from php at that same file once $_POST data will match with php condition. Thanks in advance.

[@Pengoled]

Hi, great tutorial. I am actually new to PHP and I am really confused about how to start writing in PHP? Which program do I need to install to get started? Thanks

[@dcode-software]

My suggestion is to install something like XAMPP and WAMP - they provide easy installs for an Apache Web Server and PHP environment

[@moisescastillo3447]

awesome, videos like this with this level it helps a lot, I wonder if you can make a contact form with captcha, and button to update the recatcha, php ajax and native javascript, since it is appreciated for everything

[@TheMrPopov]

You explained it very well, thanks!

[@dcode-software]

Hey no problem!

[@niko-sd5pv]

For example im using linux with Chrome and is not working...

[@saregama.devsaikat]

Thanks

[@LoveAntifa]

My current dilemma is that the form works and sends the info to the mysql database but it's all in small letters even if I'm using caps lock, I want to be able to use small and capital letters so how do I accomplish it?

[@abdurhmanalsobhi4564]

So no need to use header('content-type: application/json') in the php script ? is json_encode() just enough ?

[@dcode-software]

Technically it'll do the job but it's very highly recommended you use content-type so the receiver knows what data type it's receiving. Please see my video on content-type for more info, it's definitely worth a watch

[@galihridhoutomo]

Sir i am using firebase and npm, this web not using PHP file, if you were me what would you do ?

[@Lchends]

Hi there, I'm very new to AJAX and JavaScript, and I wanted to know how do you run the page, like, don't you need a server? What is your 'youtube.web"?

[@Lchends]

Just found out :D I'm using the LAMP stack on Ubuntu, ty!

[@shubhadas1537]

but u don't setup database for this

[@andykyle9347]

Sir how to encrypted form data while we send data through url using post/get method

[@better_vet]

I have one problem --> this check-login.php is going on post as an action to server and response with answer but I had another php file going on post action and I don't know how to merge this 2 different php file and make one file to say to server as post and get them to work too any Solution???

[@windandkitesurfer]

I follow step x step, a couple of times using your exact text - at 18:40 where your "console.log(requestData);" shows the actual values of the two input variables (username and password) I get this on the console (note same output on edge and chrome): username=${form.username.value}&password=${form.password.value} Within my script tags I am setting "requestData" here: const requestData = 'username=${form.username.value}&password=${form.password.value}'; ...and loading "form" here: const form = { username: document.getElementById('username'), password: document.getElementById('password'), submit: document.getElementById('btn-submit'), messages: document.getElementById('form-messages') }; Thanks, any feedback welcome!

[@dcode-software]

You need to use back ticks: `

[@windandkitesurfer]

thank you @@dcode-software that was it! In all my years programming never used the ` key, first time and now I'll be wondering how I was able to not use it for so long. Thanks again, you have gained a loyal subscriber :)

[@dcode-software]

No worries mate! Haha, just FYI it won't work in Internet Explorer :)

[@windandkitesurfer]

@@dcode-software, yes it will work in ALL browsers with just a few slight tweaks: I assign all values to the vars I plan on passing via ajax to the php processing page (note I'm using my own test form variables): let first_name = document.getElementById('first_name').value; let last_name = document.getElementById('last_name').value; let email = document.getElementById('email').value; let textarea1 = document.getElementById('textarea1').value; loading the requestData object as follows: const requestData = 'first_name='+first_name+'&last_name='+last_name+'&email='+email+'&textarea1='+textarea1; working perfectly in Chrome, Edge and ie11 Thank you again for helping along this path!!

[@markystudio14]

That's the error that I encountered but when I check the code. I saw that (') this is not the right code there. So I just copy the back tick on sql server and paste it. Then worked. But I got a problem in a last part of this video about posting the error messages. It says Uncaught TypeError: cannot read property 'forEach' of undefiened

[@romainpolo2133]

Thank you !

[@dcode-software]

No problem mate!

[@andykyle9347]

hi sir did u have tutorial using simple database for ajax tutorial

[@arofficialtv3727]

Is the username and password is already set example the dcode?

[@rahulps]

please help i have issues when using mysqli functions in check-login.php error in console "could not parse json"

[@Sparkly-1999]

I have the same issue

[@rahulps]

@@Sparkly-1999 i fixed it somehow

[@gayathrirejeesh2978]

@@rahulps how?

[@rahulps]

@@gayathrirejeesh2978 need to check it was an year ago

[@gayathrirejeesh2978]

@@rahulps atleast where to find solution?

[@BLOPIsUrM8]

Can i Integrate this with django the same way?

[@velikijrabochij7353]

Hello sir, I have question, I just watched the video and haven't tried to code it yet, but in the else statement you remove a firstChild which is already empty in the ul. My question is: Why you need to remove a firstChild if inside of a parentElement was already empty?

[@yonathanhailemelekot5238]

he does not want to append to the previous errors

[@medooaattya9870]

thank you for this , i have problem when i try to get responseObj = JSON.parse(xhr.responseText) console log to me Unexpected token < in JSON at position 0 :(

[@codecast8713]

You sound like Rowan from Viva La Dirt League.

[@cdrrffrhrhr5279]

Uncaught TypeError: Cannot read property 'firstChild' of null at handleResponse (index.html:72) at XMLHttpRequest.request.onload (index.html:55) 100% follow your code, the system reports an error. Could you please share me source code? i want to figure out why and learn, i am still a newbie of coding. Thank you for this tutorial anyway^_^

[@wonjaehwang7670]

Thanks for video what keyboard do you use? The switches sound nice

[@dcode-software]

No probs, the keyboard is MasterKeys Pro S RGB (Cherry MX Blue)

[@jamesecroyd]

@@dcode-software same here chur for tuitorial mate

[@riddhicalidas6113]

Hi, can you please post the CSS file with this tutorial; this is a great tutorial - best one for me.

[@Dexter101x]

Do you really need it???

[@leslinks]

if i use form tag instead of div, will the click fn work ?

[@dcode-software]

Yeah definitely, it will work. Thanks for joining the live stream btw

[@ca4990]

I thought that in a registration format you need to use a database, to hash the password and then verify if its correct using PDO or mysqli...

[@arminharper510]

there are different ways to do it. AJAX does the same thing. on your PHP script you can write code to retrieve data from MYSQL, compare it to the data sent by the client(javascript) then send a response, or save the data sent by the client and save it in MYSQL and send a success message back to the client (Javascript) the only difference is that with AJAX everything happens live, you see no loading, you will not be redirected to another page and don't need to refresh the page to see the messages. if you use a POST method form and click sign in, you will see that briefly the page refreshes to show you the server response, that is not the case, basically AJAX helps you build web apps that behave like desktop apps(everything happens live)

[@raniamahmoud3165]

I have a problem with displaying the error messages, the console gives me a " Uncaught TypeError: Cannot read property 'forEach' of undefined at handleResponse at XMLHttpRequest.request.onload " everything else works just fine, even if I replaced the foreach loop within the "Handle response function" with a console message it gets displayed. can you help me with fixing that?

[@muhammaddzakwan6783]

i have the same error...

[@markystudio14]

I got that error too and I don't know what is wrong.

[@markystudio14]

Any one who solved this problem ?

[@DipesMandaviya]

where is source code?

[@loganzenker122]

Hey dcode! Thanks a lot for this tutorial! I am wondering if you know a way to bypass the CORS issue I seem to be having? Every time I submit the login, it says it has been blocked by CORS policy. Thank you for your time!

[@dcode-software]

Hey, no probs! I've got this video on CORS if you wanna take a look at it, it should explain why you're getting that problem: kzbin.info/www/bejne/Znqwq2uabqiVr5Y

[@zakariamarmoud7638]

catch error ?? could not parse JSON i don't know why ?

[@dcode-software]

Your JSON string is invalid, try validating it using an online tool maybe

[@gayathrirejeesh2978]

did you get it?

[@dopamine_Seeker]

not a secured way....

[@danielesette1950]

nice tutorial, but i can't get this code working. Every input in the login form pops out the errors "Password can not be empty!, Username can not be empty!" i don't really get whats wrong

[@dcode-software]

Do you have a "name" attribute on the input fields?

[@danielesette1950]

@@dcode-software nope, i followed your guide. Did i miss something?

[@dcode-software]

Are you saying "nope" that you didn't add a "name" attribute? If so then you need to add it. Without it the input won't be submitted to the server and that could explain why you're getting those messages

[@danielesette1950]

@@dcode-softwareI just did it, but nothing changed. Does the name need to be a specific string or something?

[@dcode-software]

The fields need to be "username" and "password" respectively - if you upload your code to something like CodePen I can have a look at it for you.

[@mdalamiri7400]

Hi Dom , can you make another video , how to use ajax in django. please reply to me

[@dcode-software]

Hey mate, are you referring to making an AJAX call to a Django-backed server?

[@mdalamiri7400]

Yes , if you know django.

[@dcode-software]

I haven't had much exposure at all to Django but it is something that I'd be open to making a video about - but if you wanted to make an AJAX call the process wouldn't be too different any other server, you'd simply set up some sort of endpoint or API and then make the request!

[@mdalamiri7400]

I am using django and recently start to learn ajax call in javascript but I didn't find a lot of tuts to learn it in javascript, so I had to learn jquery , after that ajax, so learned jquery and now I start to learn Ajax. but I have this trouble . which is (there are not enough videos to learn ajax call using django). but anyway thank you for your time ... you are awesome man ... continue in this way.... someday you will be something great.

[@dcode-software]

Thanks very much I appreciate the support man 😁

[@Henry_Nunez]

👏

[@JoshuaTMagee]

Fantastic tutorial, thank you! I'm curious how you would go about taking the JSON response from the server and display each error message directly underneath each relevant form input field? So, for example, any email form errors are displayed underneath the email input field, etc. Essentially, how would you integrate the code from this tutorial into a UX design like the one in this other tutorial of yours: kzbin.info/www/bejne/bH_HiKWQbJyMhZY Thank you so much!

[@musiclovers8488]

Hello sir !! There isn’t any short way?

[@kartikdesai597]

Don😎

[@dcode-software]

DOM*

[@danbrown5080]

Can I have ur email?

[@dcode-software]

What for?

[@danbrown5080]

@@dcode-software I have some problem in mvc

[@dcode-software]

Hey man send it to me on twitter, or just post it here

[@danbrown5080]

my first problem is register and login in mvc.I download 10-12 vids but they aren't what i want