Full React Tutorial #28 - Submit Events
Hey gang, in this React tutorial we'll take a look at form submit events & how to react to them.
🐱💻 🐱💻 Course Files:
+ github.com/iamshaunjp/Complet...
🐱👤🐱👤 JOIN THE GANG -
/ @netninja
🐱💻 🐱💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninja.co.uk/udemy/m...
+ Vue JS & Firebase - www.thenetninja.co.uk/udemy/v...
+ D3.js & Firebase - www.thenetninja.co.uk/udemy/d...
🐱💻 🐱💻 Helpful Links:
+ HTML & CSS Course - • HTML & CSS Crash Cours...
+ Modern JavaScript course - • Modern JavaScript Tuto...
+ Get VS Code - code.visualstudio.com/
🐱💻 🐱💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja
Пікірлер: 55
~Notes~ Handle form submission in reactjs 1. assign a handler to submit event in form element 2. within submit handler we prevent page refresh 3. implement post request with fetch api to send post data to designated api thats all !!!
@victorvondoom2350
2 жыл бұрын
i wish there were more helpful people like you . you turn the world less stupid because of your comment. you may know this but your comment has enlightened me , quite deeply .
@rakeshwasnik9327
Жыл бұрын
do you have the same for other videos in the series as well
I am watching these videos like a TV series with each new episode coming everyday. Thanks
@shinchanshukla3938
2 жыл бұрын
ohooooooooooooo
Your tutorials are really so clear, useful, straight to the point and not long. The value you bring with your video is just incredibile. Thank you so much for everything you do
WOWW. You're videos have big a game changer. You explain everything perfectly. MY FAVEEEE . I am soo happy to have discovered your channel!
Insanely high value videos. Thank you so much!
Your tutorials are so so good. Iean they are the best. Simple, easy and straight to the point. I would really love a web3 tutorial with solidity, ethers, react and hardhat 🙏
@NetNinja
Жыл бұрын
Thank you :)
Thank you very much, Shaun. Great Work!!
After the great course i think it will be good to start work on some projects , so we will wait for the video's dear Thanks
thank you very much this video was very helpful
Thank you. May God bless you
thanks brow
Incredibly useful! Thanks!
@NetNinja
Жыл бұрын
Thanks Caleb! :)
2:21 I respect your authoritah!
damn this guy is good, thank you net ninja!
But even if we didn't use the preventDefault, wouldn't our event function still be fired and do its actions? Is there a reason we want to prevent the refresh of the page after we submit our form?
its really good stuff
amazed with this videos :)
So is the action attribute not general practice for submitting forms in React?
thanks so much
Thank you --- your courses are top notch. Natural born teacher... we appreciate you sir.
@NetNinja
6 ай бұрын
That means a lot :) thank you!
ty
Thanks.
May I ask, why is "clicking the button" automatically understood as the action "submitting the form" ? I mean, you don't put type="submit" inside the button, it's literally just a button with no function. I wonder if onSubmit auto assigns the button as the submit handler? If anyone can help, thank you!
Thank you
@NetNinja
Жыл бұрын
You're welcome Vivek!
Any novice teacher would have combined this video and the next video as a single video. This is where you make a difference by abstracting submit event and post request
Consolelogtheblog!! clb , baby
2:01...hey why are we defining the object with the elements title,body and author?? Why can't we take something else?
I don't know how or when it happened but at some point my application in create.js tried to import e from 'express' which was giving me a bunch of errors. I was losing my mind as my code was identical to the github and then i realized this import was sitting at the top. Removed it and we are back at it lol. Wow that was frustrating LMAO. to clarify i have been following this tutorial to a T and think bill gates had something to do with it. In fact, im positive billy is the culprit, a truly sick person trying to derail a new dev. NOT TODAY BILLY, NOT TODAY.
How does it know that the button should trigger a "submit event"? Couldn't the button have some other function?
@sean_of_possession
Жыл бұрын
Not sure if you got your answer or not (late reply), but here it is: if you only have 1 button inside your form tags, that button's default type becomes 'submit.' This applies UNLESS you explicitly change the type attribute of the button to something other than 'submit', such as 'button'. The only button on your form with no type attribute set will automatically trigger the onSubmit function for the form.
Eyyyyy I made it here!
@ahmedel-hindawi9226
3 жыл бұрын
same
love the series. let me know if you guys have a question so far. I will try to help with debugging
how is it the blog object contains the information from form???
@freddyescobar96
2 жыл бұрын
it's simple javascript, when the key and value have the same name, you can do this: const blog = { title: title, body:body, author: author} it's the same to do const blog ={title,body, author} that means that the value of that object have the same name as in the state variables
@ammaralhomyqani9079
2 жыл бұрын
@@freddyescobar96 thank u so much, hope good day for you
got a question idk if it's dumb or ! but how is it being submitted without having the btn have a type submit attr?????
@Cedielagekohaha
3 жыл бұрын
because of the form, when you click a button inside a form it will trigger a submit
@minhnguyenquocnhat3796
Жыл бұрын
@@Cedielagekohaha what happens if there are multiple buttons? How to assign different tasks to them if they are in the same form?
@sean_of_possession
Жыл бұрын
@@minhnguyenquocnhat3796 What @Cedric Sarigumba said applies ONLY if the button inside the form tags is the ONLY button in the form. If it is the only button, its type attribute defaults to 'submit' and will call the function in the onSubmit for the form. If you have multiple buttons inside your form tags, you will need to explicitly define the type attribute for one of them as 'submit'. The other buttons will default to 'button' unless you explicitly specify otherwise.
Im getting these errors..
Heyyy Bro, How are you i am copying your videos in my mother language , i s that ok?
@intensiveadvancedmath5281
Жыл бұрын
Qani?
e.preventDefault() never new why i used it.
@satyam1543
Жыл бұрын
to prevent page from loading when we click on submit button
ty