Creating an AJAX Submit Form using JavaScript - Tutorial For Beginners
HTML-код
- Опубликовано: 19 июн 2018
- View the Code and GitHub Repository:
dcode.domenade.com/tutorials/...
You can use AJAX within JavaScript to create a form submission that does not require a page reload or redirection. This can enhance the user experience and you'll learn that from this video.
The code begins with a few standard HTML input fields and a submit button. When the submit button is pressed, the JavaScript code will make a request to the server which will perform the validation. The web browser will then receive a response from the server, containing information about the attempted login: whether or not it was successful AND any error messages that came with it. From there, the web browser can either display those messages or redirect the user.
In this video we'll be using the above logic to create a basic Login Form.
Support me on Patreon:
/ dcode - with enough funding I plan to develop a website of some sort with a new developer experience!
For your reference, check this out:
• Sending POST data with...
Follow me on Twitter @dcode!
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #javascript #webdev
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!
Thank you. I wish there more RUclipsrs and or persons in general like you. God bless.
thanks a lot for this tutorial ! I have seen a lot of tutorials but this is one the best ones :)
I'm glad to hear that mate! Once again you're very welcome
Thanks a lot 'dcode' I learned it completely ♥
No problem!
Thank u so much for such a valuable tutorials...❤❤
Love Your Stuff 😃
Thanks mate you're welcome!
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!
Thanks you a lot, this was very clearfly
THANKS FOR TEACHING THIS FOR FREE
Thanks helped a lot subscribed .
Awesome 🙂
You are awesome dude!!
I wanna give you 100000000000000 likes!!
ThNks a lot dude
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.
Awesome to hear!
your on fire mate :)
🔥🔥🔥
Thank you sir! Great tutorial with great explanation!
No worries mate!!
Thank you !
No problem mate!
Love the voice mate
Thanks mate
You explained it very well, thanks!
Hey no problem!
Thanks
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.
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
@7:15 - PHP Logic
@11:26 - JS Logic
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
👏
Sir how to encrypted form data while we send data through url using post/get method
How to pass checkbox array??
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?
hi sir did u have tutorial using simple database for ajax tutorial
Can i Integrate this with django the same way?
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???
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 :(
Sir i am using firebase and npm, this web not using PHP file, if you were me what would you do ?
Hi, can you please post the CSS file with this tutorial; this is a great tutorial - best one for me.
Do you really need it???
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!
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:
ruclips.net/video/0IMz8d9Cby4/видео.html
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!
You need to use back ticks: `
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 :)
No worries mate! Haha, just FYI it won't work in Internet Explorer :)
@@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!!
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
Is the username and password is already set example the dcode?
but u don't setup database for this
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
My suggestion is to install something like XAMPP and WAMP - they provide easy installs for an Apache Web Server and PHP environment
What is the difference between using js ajax for form registration and PHP
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.
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?
he does not want to append to the previous errors
Thanks for video what keyboard do you use? The switches sound nice
No probs, the keyboard is MasterKeys Pro S RGB (Cherry MX Blue)
@@dcode-software same here chur for tuitorial mate
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"?
Just found out :D I'm using the LAMP stack on Ubuntu, ty!
For example im using linux with Chrome and is not working...
So no need to use header('content-type: application/json') in the php script ? is json_encode() just enough ?
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
if i use form tag instead of div, will the click fn work ?
Yeah definitely, it will work. Thanks for joining the live stream btw
👌👌👍👍
Please provide css file link in the description please
why request.open('post') and not 'put'? (very useful vid btw, thank you so much!)
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^_^
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...
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)
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?
i have the same error...
I got that error too and I don't know what is wrong.
Any one who solved this problem ?
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: ruclips.net/video/6NdWrZ77YO4/видео.html Thank you so much!
Don😎
DOM*
You sound like Rowan from Viva La Dirt League.
Hi Dom , can you make another video , how to use ajax in django. please reply to me
Hey mate, are you referring to making an AJAX call to a Django-backed server?
Yes , if you know django.
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!
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.
Thanks very much I appreciate the support man 😁
catch error ?? could not parse JSON i don't know why ?
Your JSON string is invalid, try validating it using an online tool maybe
did you get it?
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
Do you have a "name" attribute on the input fields?
@@dcode-software nope, i followed your guide. Did i miss something?
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
@@dcode-softwareI just did it, but nothing changed. Does the name need to be a specific string or something?
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.
please help
i have issues when using mysqli functions in check-login.php
error in console "could not parse json"
I have the same issue
@@alifayed8717 i fixed it somehow
@@rahulps how?
@@gayathrirejeesh2978 need to check it was an year ago
@@rahulps atleast where to find solution?
where is source code?
not a secured way....
Hello sir !!
There isn’t any short way?
Can I have ur email?
What for?
@@dcode-software I have some problem in mvc
Hey man send it to me on twitter, or just post it here
my first problem is register and login in mvc.I download 10-12 vids but they aren't what i want