The "submit" event on forms in JavaScript
HTML-код
- Опубликовано: 2 окт 2024
- You can use the "submit" event in JavaScript to react to when the user submits an HTML form. This can be useful when you want to use AJAX for your form processing.
In this video I take you through a quick example of how to use the "submit" event - which includes the use of AJAX to submit a 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:
developer.mozi...
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
A web dev named Dom? perfect.
😂😆
😂
😂😂😂
Anyone else getting 405 error method not allowed? How to fix @dcode
Sometimes you can get stumped by the simplest of issues, and its sooo annoying looking for hours and every tut you watch doesn't seem to give what you KNOW is a simple answer to a simple problem. Your basic method just works! Thanks fella!!! Hope the lockdown isnt driving you nuts lol 👍
No worries mate!! It's going alright mate getting used to it slowly, all the best :)
damn the quality of this video! fkn subscribed !!!!
Thanks mate
You are the best Boss.
Thank you very much for this little tutorial. I tried to find a video like this for too long. I wish you good luck, man
No worries mate, glad you enjoyed it!
@@dcode-software hello sir i want to appears image on click on button can you help me please
Thank you, I had a question
By taking multiple inputs in FORM like name, age, number, after clicking on submit it will appear on new page with name:xyz, number:123456. with edit option also can we make like this with only using java script. please make a video on this.
thank you
How do you get FormData working with just JavaScript? I want to code in Node JS.
When I pop the new FormData(myForm) in the parameter of a console.log, I get some obscure data that isn't helpful.
I followed this video EXACTLY. I get this error and i don't know what to do... Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') ... "MyForm.addEventListener("submit" , (e) => {}); " This line is where the error is ?!
Hi, can you edit the title to say PHP instead of Javascript. It's quite misleading...good video nonetheless!
I have a question, if i wanna to but counter of users submit the course for example, how can i do it? and what can I write to search about this task?
Great informative video!
You're welcome
exactly what I was looking for, good stuff
i need the actual code please
Without the .php and using only JS... I'm still getting page refresh upon submit. No data capture. The getElementById is global scope. I have addEventListener with e.preventDefault(); AND I have e.preventDefault(); on the formHandler as well and page is still blinking.
Dude, this VS Code theme looks amazing. What theme is it?
yea it is very good i want it too
Unfortunately I uninstalled this theme long ago... sorry guys!
@@dcode-software oof
@@dcode-software but I found an alternative
Great video.
Thanks
which font do you use and theme for the vscode
Thank you very much Sir!!!
What is google waiting for?
how do you parser that var dump?.
I mean when you do an sql querry like the one below and var_dump it
while($row = mysqli_fetch_array($result)) {
var_dump($row);
}
one the other page. I use
console.log(JSON.parse(this.responseText) );
^^^ that is an error but when I use log w/o parse it works.
console.log(this.responseText)
Like how?
How to reset the form after submitting it?
why not just add the code
Hello there,
Wy am I getting a TypeError: myForm is null?
The code is:
const myForm = document.getElementById("myForm");
myForm.addEventListener("submit", (e) => {
e.preventDefault();
console.log("Form is submitted");
});
Of course, the form has id myForm in html.
I am doing a radio form type, but that souldn't be the problem.
Thanks!
We have JS code that fires on our thank you page, that we would like moved to our submit button on our form. so how we can do that
This works great..., but if I have multiple forms on a page how can I add event listeners to all forms? Say adding a Ajax-form class to all forms I want to add a listener to and then looping through them to add a listener to each one. Sounds simple, but when I try it my forms stop posting on submit.
Working fine but form data is as it is...the form data on html page should disapper...give solution
thanks :)
i liked your video, because you deserve this. what your content in this video is the thing i don't find any where in the web
hi, I am looking for building a simple homepage, where I have a simple searchbox for google.
how to implement that in a html ? I know basic html and I know how to make a inputbox but how do I redirect the input text into google searchbar? So it has to go essentially to Google.com
Please make video how to hide or encrypt JavaScript file
console is logging the entire page where i put ajax the request. it doesnt response the form values :(
can you use onSubmit to do the same thing?
Nice answer to a simple question. Thanks!
thank you so my bro that worked fine
Thank you so so much bro 🙏 u helped me a lot bro . Good stuff 👍 keep up
No worries mate! 😁
@@dcode-software though I'm a beginner it matters the most so it's kind a big problem than usually it's situation where I'm gonna quit it 😂 . That's when I saw ur video I resolved in a minute that's makes me more happy 😊
Thank you bro 👍
For my assignment, I got the error code on the first step, saying it cannot add read property of addEventListener of null... My teacher isn't the greatest at explaining and I feel lost in the course. Do you think you can point me in the right direction to deal with this problem? Thanks
Whatever you're using to select the element is wrong - whether it's getElementById or querySelector. Or it's because your script is included in the head of file and not at the end of body. It could also be helpful to watch my video on the DOMContentLoaded event.
dcode thank you! Will do!
thanks a lot , hope you get an enormous success in this field
it doesnt workd can u give the code?
Thanks so much❤️
Very Helpful. Thank you!
Thanks you.! create vedio 👍🎬
No worries mate
thank you for your explaining, really amazing
wasn't this supposed to be the vanilla javascript one?
This is using vanilla JavaScript
Can't we do this without login.php?? @dcode Help me out.
Yes, you can do this with any server-side language or technology. This video is focused on the front-end
Thanks for this video! Super helpful!
thank you so much sir , you know you remove one of my difficulties .
Glad to hear you got it done!
Who uses light mode 🤣?
Me. Sometimes
@@dcode-software 😅😅
Thankss for informations =)))
what if i don't like to use AJAX and instead using normal procedural way in php form submission??
how can i get rid off event.preventDefault() ??
If you want to do a traditional form submission then you don't need to worry about preventDefault
@@dcode-software Thank You for the response. yeah right but, i've used preventDefault() to stop the form and did the form validation. now the validation is working nicely but the form is not submitting because of preventDefault(). i prefer JS validation instead of php validation. how do i continue to submit the form after the validation. i use php and mysql.
Can u plz tell me which theme and font are you using...I love the theme and the font style...
Sorry but it's been a while since I've had this theme - I suggest trying GitHub Light though
As for the font, it looks to be Office Code Pro D
@@dcode-software thank you...😊😊
Great video. Can you make video on PHP. I am learning something new in all of your videos even though I am an intermediate developer.
That's great to hear 😁 I have a new series lined up which I'll be releasing soon. After that though I'm definitely down to do some PHP because it is one of the first languages I learnt! Cheers for your support
Is This Possible Without Using PHP
@dcode please reply ASAP
Yep - this is purely client side. It doesn't matter what the server-side language is
Yes, use apps script
@@ConsulthinkProgrammer Thanks
@@wealthwhiz270 You're welcome. For more reference about HTML Form to Google Sheets use Apps Script ruclips.net/video/AGPFsvKzXm0/видео.html
did anyone get Status Code 405 Method Not Allowed on the line ==> request.send(new FormData(myForm));
If you are using a server built into your text editor or some other command line tool I recommend you download an actual server instead such as NGINX or Apache/XAMPP
Is this includes php language?
What do you mean?
There is login.php
Yes, this should work with PHP
So when i login it wont forget the exact value of when i did on sign up
Only getting this.
Cannot POST /login.php
30 lines of code = 3 hours of troubleshooting @ developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest and developer.mozilla.org/en-US/docs/Web/API/FormData and developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send and developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open
Thanks
May i know which theme you are using
It's looking good