Connecting Firebase to a HTML Form | Firebase Tutorial

Поделиться
HTML-код
  • Опубликовано: 25 янв 2025

Комментарии •

  • @gabzydaisy
    @gabzydaisy 2 года назад +10

    Thankyou, the explanation was very comprehensive. Appreciate the recap on the end of video too.

  • @nicolassuarez2933
    @nicolassuarez2933 Год назад +2

    I saw five tuts already, this one is the best!

  • @Anime_Empire_2.0
    @Anime_Empire_2.0 2 года назад +13

    Everything works like a charm , I even customised my own form and have added more values , I also created another 1 function that shows message , resets the form and sets a time out for 3 seconds then you can just call this function inside the submitForm function !! overall I realy liked it thanks for this content.

  • @beaubreau
    @beaubreau 2 года назад +3

    Love the way you explain things as you go. This helped a lot.

  • @_chinocabron
    @_chinocabron Год назад +4

    As a ui/ux designer ive been trying to get into js with simple things like this that my clients ask me for. this video has done what any other couldn't which is making me understand its logic. thank you!

    • @Rigzin-kq2wg
      @Rigzin-kq2wg 5 месяцев назад +1

      hey, hello
      Like firebase what are the other technologies required for a UIUX. I was learning firebase for my backend project.

  • @inariiii
    @inariiii Год назад +5

    this video caught my heart this is straight up the best video on learning to use firebase i have ever encountered , everything is just so right, the calming background music and everything, really thank you so much for this video

  • @limendime3720
    @limendime3720 2 года назад

    Very helpful, thank-you. It is pretty cool to see data submitted through a form actually being stored somewhere instead of being erased, lol.

  • @agilitydeveloper7627
    @agilitydeveloper7627 3 года назад +5

    Thanks, your the only tutorial that worked :)))

  • @mdshamsurrahmanarif6783
    @mdshamsurrahmanarif6783 2 года назад +1

    thanks for the amazing video man, i was strugging with it for few weeks but you solved all my problems. Thank you

  • @Shiropuglive
    @Shiropuglive 2 месяца назад +1

    Thanks for this wonderfull video. It save my lots of time and now my database is working
    🥰

  • @kasunkanchanamusik
    @kasunkanchanamusik Год назад +2

    Yes it worked. Thank you so much. Can you make full website tutorial with backend and frontend please
    We are from sri lanka

  • @SUGGUYASWANTH
    @SUGGUYASWANTH Год назад

    got the right video after doing a lot of search. thank you.

  • @araputrevor5103
    @araputrevor5103 2 года назад

    This is perfect. Thank you so much. Your teaching is outstanding. God bless you.

  • @daniellemansfield1532
    @daniellemansfield1532 Год назад

    I'm creating my own portfolio website, this is perfect for creating new blog posts! thankyou!

  • @denhamk
    @denhamk Год назад

    Thank you !! The only video that helped me get this thing to work!! Thank you!!

  • @sanatanchakravarty3941
    @sanatanchakravarty3941 2 года назад

    Vetri, this is awesome work. I borrowed your code from Git, and I am very very thankful. Superb job.

    • @VetrivelRavi
      @VetrivelRavi  2 года назад +1

      Awesome, Glad I could help you

  • @chetan6896
    @chetan6896 9 месяцев назад

    Clearly explained and I executed successfully 🔥

  • @serdartoren
    @serdartoren Год назад

    It was very clean and successful!! Thank you so much

  • @rahulkagita
    @rahulkagita 4 месяца назад

    I got a reference error at 12:47 that says firebase not defined but everything's fine in my script code can you assist me with it

  • @shortFlixstudio-v8f
    @shortFlixstudio-v8f Год назад

    Great tutorial and in detail. Thank you bro.

  • @ThePenguinclasses
    @ThePenguinclasses 6 месяцев назад

    Relly helped me in my internship!

  • @DrMorax
    @DrMorax Год назад +3

    I want to create two forms with different purposes, do I just make a different web or is there a better way to do it?

  • @PeterOne24
    @PeterOne24 2 года назад

    Very helpful highly recomended this chanel

    • @VetrivelRavi
      @VetrivelRavi  2 года назад

      Glad you think so!

    • @PeterOne24
      @PeterOne24 2 года назад

      @@VetrivelRavi Hi I have a question. after I create react app following this video, after I host it in github pages. It shows blank black page.

  • @IrfanShaikh.
    @IrfanShaikh. 10 месяцев назад

    Nice Explanation. Thanks for the help...

  • @adityamathur8906
    @adityamathur8906 2 года назад

    This is a great video. I loved how you explained everthing thing you did in such a great way. Thanks for crating this video Really healped me a lot. Hope to se more of your videos

  • @Coder_of_Bihar_0005
    @Coder_of_Bihar_0005 11 месяцев назад +1

    How can create add item in own app in home screen by coding

  • @creativetutorial69
    @creativetutorial69 2 года назад +3

    Your explanation is about great quality
    Thankyou :)

  • @NaturalBeautyEverywhere
    @NaturalBeautyEverywhere 2 года назад +2

    excellent video. 100% working

  • @adrianfernandez1621
    @adrianfernandez1621 Год назад

    Very helpful. Well done 🎉🎉🎉🎉

  • @ShreyasGandhi-ij3qz
    @ShreyasGandhi-ij3qz 9 месяцев назад

    Thanks for video ....
    how can we export that generated data in form of csv files ????

  • @macieq44
    @macieq44 Год назад

    Haven't watched the video yet, but the comments make me excited to do so :D

  • @miguelvelascodev
    @miguelvelascodev Год назад

    you are awesome man, thank you so much !

  • @rmaravind940
    @rmaravind940 2 года назад

    Informative video ever helped me a lot bro Tamil🔥🔥

  • @YPTechDATIA
    @YPTechDATIA 2 года назад

    very nice i was looking for this tutorial

  • @billyfrcs19
    @billyfrcs19 2 года назад +1

    Thanks Indian guy on youtube.

  • @rahultomer126
    @rahultomer126 Год назад

    thank you for this tutorial really amazing for beginners

  • @oblivious1494
    @oblivious1494 Год назад

    Nice tutorial. How to see the saved data on another webpage. Lets say if its a recipe webiste where an user created a recipe than saved it, now he wants to see his saved recipe.

  • @mitsujinn
    @mitsujinn 8 месяцев назад

    hello there. I'm new in this type of web thing and I have a project to make a simple submit web and store the data to firebase, just like this video. however, I dont know yet how to make a simple website just like the one you have. do you have video tutorial how to make one like yours ? thanks man

  • @faygio
    @faygio Год назад

    Thanks brother, this is very useful.

  • @i_Mordercag1
    @i_Mordercag1 11 месяцев назад +1

    Music nostalgia :)

  • @etherealize
    @etherealize 10 месяцев назад

    how do you generate a cdn link for your firebase project?

  • @rajyadav8415
    @rajyadav8415 2 года назад

    thanks bahiya for this awesome content❤❤👍👍

  • @alexandracynthia5223
    @alexandracynthia5223 Год назад

    Please, do u have a video about how to show the information of the form (from firebase) on a html page?

  • @phamquan1358
    @phamquan1358 10 месяцев назад

    can you help me how to we take data from firebase out?

  • @simothedeveloper
    @simothedeveloper Год назад

    Thank you, but how can i get the value from a radio button?

  • @dotafanatic2413
    @dotafanatic2413 Год назад

    i want to ask, if you use xampp then connect to firebase? or directly clicking the HTML file then add the file data to firebase?

  • @dharmendrasingh-tb2qw
    @dharmendrasingh-tb2qw Год назад

    Thank you sharing a knowledge

  • @gopixus
    @gopixus Год назад

    Good explained, thanks

  • @신승호-c5j
    @신승호-c5j 2 года назад +1

    Hi, I'm not sure why you pasted configuration code into js while it is supposed to go in the script tag. If I only paste the given code into my HTML code would this not work?

    • @VetrivelRavi
      @VetrivelRavi  2 года назад +1

      always maintaining the scripts in separate file would better

  • @ragavidurai23
    @ragavidurai23 5 месяцев назад

    Hey its really working 🎉thank you but i had a doubt how can you take the cdn link

  • @VetrivelRavi
    @VetrivelRavi  Год назад +1

    Firebase CDN Links(Alternative Setup Doc) - firebase.google.com/docs/web/alt-setup

  • @MiloAnya-m7r
    @MiloAnya-m7r Год назад

    It helps a lot, by the way do you have another video that display the values that you input in database?

  • @crakkistim
    @crakkistim Год назад

    Good tutorial! Thank you so much

  • @kensleylewis
    @kensleylewis 3 года назад +1

    Good stuff. do you have a video on deploying your local form to firebase hosting?

    • @VetrivelRavi
      @VetrivelRavi  3 года назад

      are you asking about custom domains ? Or How to deploy the project in firebase ?

    • @VetrivelRavi
      @VetrivelRavi  3 года назад

      Yes i do check this video
      ruclips.net/video/RAWHXRTKTHw/видео.html

  • @raffph
    @raffph 2 года назад

    how to change the "random alpha-number" the above of variables id into number?

  • @WhisperedTales911
    @WhisperedTales911 Год назад

    do we need to install any extensions in vs code?

  • @amazingbrain4057
    @amazingbrain4057 2 года назад +2

    Nice video and great explanation. Everything worked out well. Please I would like to know if you would be able to create a video where we can fetch the data from Realtime DB and display information using HTML/CSS (like a dashboard). Also, I seem to be getting errors on v9.

  • @jadida2288
    @jadida2288 2 года назад +3

    great tutorial, but the music is a bit disturbing in the background

  • @denhamk
    @denhamk Год назад

    I don't understand what I'm doing wrong. The entries go into firebase. But.. my name field is not appearing. The email field appears .. and in the message field I get the name of the person.. I have checked all the IDs for it and it's all correct. No matter what I put in for the IDs it's only these two fields that appear .. any help?

    • @VetrivelRavi
      @VetrivelRavi  Год назад

      need to see the code...

    • @denhamk
      @denhamk Год назад

      @@VetrivelRavi ok.. but how to send? RUclips doesn't like me sharing code on here

  • @usamashaikh3366
    @usamashaikh3366 2 года назад +1

    Thanks Man

  • @minhhoahuynh6625
    @minhhoahuynh6625 Год назад

    thanks bro very much from VietNam 43 .

  • @A1Loaded
    @A1Loaded Год назад

    Thanks for the explanation.
    Please, how and where did you get the CDN link? Firebase and CDNs are being updated but none of those updated links seem to work for HTML app. Please hit me up

    • @VetrivelRavi
      @VetrivelRavi  Год назад

      firebase.google.com/docs/web/alt-setup

    • @A1Loaded
      @A1Loaded Год назад

      ​@@VetrivelRavi Thanks a lot but its still not working or am I doing something wrong?

    • @A1Loaded
      @A1Loaded Год назад

      please can you send me an email with your whatsapp number so we can discuss this in detail?

    • @VetrivelRavi
      @VetrivelRavi  Год назад

      vetrivel.galaxy@gmail.com -> Please drop an email I will contact you back

  • @alphagaming5432
    @alphagaming5432 10 месяцев назад

    Thank You so much It Helped me

  • @bhavinravalia9285
    @bhavinravalia9285 Год назад

    very helpful i got erro bcz not haviing cdn link thank you now it's working

    • @VetrivelRavi
      @VetrivelRavi  Год назад

      firebase.google.com/docs/web/alt-setup

  • @velsmusics326
    @velsmusics326 Год назад

    thank you so much for your beutiful video

  • @steve_franc
    @steve_franc Год назад +1

    I followed the tutorial but it doesn't work for me, is there a part I'm missing?

    • @스웩여자큥큥
      @스웩여자큥큥 11 месяцев назад

      same here, there's issues on initialize firebase

  • @vishalaurora9631
    @vishalaurora9631 Год назад

    What if we want to connect 2 forms to the same database

  • @MohammedAnees-pz3ys
    @MohammedAnees-pz3ys 2 месяца назад

    ur video helped me a lot

  • @DouglasMbugua
    @DouglasMbugua 10 месяцев назад

    nice tutorial! Thanks alot

  • @blazexiytb
    @blazexiytb 2 года назад

    when i look at console like in 12:47 it says: firebase.js:12 Uncaught ReferenceError: firebase is not defined
    at firebase.js:12:1

    • @VetrivelRavi
      @VetrivelRavi  2 года назад +1

      follow this order

    • @mafazrahman123
      @mafazrahman123 2 года назад

      I got the same issue.
      how I solved?
      Add the after the closing of body tag.

  • @rizvi424
    @rizvi424 Год назад

    helpful tutorial thanx sir

  • @justinalmodovar8978
    @justinalmodovar8978 Год назад

    how can i put image to the firebase

  • @alexandracynthia5223
    @alexandracynthia5223 Год назад

    thank u very much, it works very well! now i need an example about how to show firebase information on a html page please help me

  • @Wangui..
    @Wangui.. Год назад

    Mine is not showing the databaseurl pls help

  • @tranliem06
    @tranliem06 2 года назад

    Hey what i should do when i have a gender selection in the form

  • @GreenGames2k
    @GreenGames2k 9 месяцев назад

    Thankyou for your work

  • @zeris3134
    @zeris3134 2 года назад

    thank you for the video but how can we load the data that was save from firebase to another webpage can you pls help for school thank you

    • @VetrivelRavi
      @VetrivelRavi  2 года назад

      sure...kindly please go through this following link
      firebase.google.com/docs/database/web/read-and-write

  • @ahmadsy1000
    @ahmadsy1000 Год назад

    Hi. For me it's absolutely not working. Can you help me?

  • @learnwithabhineet4138
    @learnwithabhineet4138 2 года назад

    My database is not getting store in firebase.can you pls help?

    • @VetrivelRavi
      @VetrivelRavi  2 года назад

      please do share me the error code

  • @ginacarvajal6763
    @ginacarvajal6763 Год назад

    Thank you very much.

  • @quratulainaisha3265
    @quratulainaisha3265 2 года назад

    Its not working for me .... even console shows an error on addEventListener .... and no data is shown in firebase .. please guide me what should i do ?

    • @VetrivelRavi
      @VetrivelRavi  2 года назад

      Can you please share me the code and the error screen shot ?

    • @shadabpathan4812
      @shadabpathan4812 2 года назад

      I m also facing the same issue please help me bro.

    • @VetrivelRavi
      @VetrivelRavi  2 года назад

      please share the error code

  • @manurajput1351
    @manurajput1351 2 года назад

    Can you tell me in index.html that you have used the script tage for the firebase how to get this link

  • @mafazrahman123
    @mafazrahman123 2 года назад

    Can we deploy this project in firebase?
    If yes then how?

  • @bintouongoiba1217
    @bintouongoiba1217 Год назад

    very good, thanks you !

  • @themigliore
    @themigliore 3 года назад +1

    it works for me, thanks

  • @mahanoor3512
    @mahanoor3512 3 года назад

    i do everything same as u did. but my database is not shown in Realtime database? why??

    • @VetrivelRavi
      @VetrivelRavi  3 года назад +1

      Check the script file that you linked in the index.html....If its correct share me the screen shot of the error what you got in the console....to my mail

  • @krlnd.
    @krlnd. 2 года назад

    hi, i have a problem that it says the firebase is not initalised on the js file, any way to solve this issue?

    • @VetrivelRavi
      @VetrivelRavi  2 года назад

      Please doe share the error code

    • @krlnd.
      @krlnd. 2 года назад

      ​@@VetrivelRavi
      hi, here is my code, removed the const firebase part for privacy
      //initialising firebase
      firebase.initializeApp(firebaseConfig);
      //referencing database
      var pollDB = firebase.database().ref("7menweb");
      document.getElementById("favemem").addEventListener("submit", submitPoll);
      function submitPoll(e){
      e.preventDefault();
      var name = getElementVal("name");
      var email = getElementVal("email");
      var feedback = getElementVal("feedback");
      console.log(name,email,feedback);
      }
      const getElementVal = (id) => {
      return document.getElementById(id).value;
      }
      this error is given:
      Uncaught ReferenceError: firebase is not defined
      at form.js:13:1

  • @christianbortotto5471
    @christianbortotto5471 Год назад

    hello great video thanks, I tried to customize the fields but it doesn't work anymore. could you give me a hint. I replaced ID on html file and mail file. but it doesn't send anymore.I can only add fields but not edit existing ones

    • @VetrivelRavi
      @VetrivelRavi  Год назад

      please follow through the ID name of the existing fields

  • @MdAzad-hc3le
    @MdAzad-hc3le 11 месяцев назад

    Thank You So Much Sir

  • @VincentAziz
    @VincentAziz 2 года назад

    could you explain what is the link with CDN.Js

    • @VetrivelRavi
      @VetrivelRavi  2 года назад

      Thats the source file to access the necessary methods for the firebase client

  • @observerslife.8789
    @observerslife.8789 Год назад

    how to send this message to admin email?

  • @baibhavipandey4814
    @baibhavipandey4814 Год назад

    somebody please help I'm getting firebase not defined error

  • @btsophile512
    @btsophile512 2 года назад

    getting error "firebase: Error(auth/admin-restricted-operation)"

    • @VetrivelRavi
      @VetrivelRavi  2 года назад

      please make sure that you add the main app when you are trying to connect the db. please do follow the link stackoverflow.com/questions/69215748/firebase-error-auth-admin-restricted-operation-after-createuserwithemailandpassw

  • @sarabinsanad4713
    @sarabinsanad4713 2 года назад

    The content is nice and wonderful, but I have a problem when sending firebase is not defined how to solve it

    • @VetrivelRavi
      @VetrivelRavi  2 года назад

      check check whether you linked your script tag in html

  • @digitech8007
    @digitech8007 3 года назад

    I do everything like u do. But cant upload and also not shown the data on console ..why ?

    • @VetrivelRavi
      @VetrivelRavi  3 года назад

      Change the payment method in the Firebase........
      Choose Blaze mode instead of spark mode then it will upload

  • @tusharsahni6759
    @tusharsahni6759 Год назад

    sir, can u plz hep me to link firebase to my code, im not able to do

  • @wuba04
    @wuba04 2 года назад

    hey what app do you use for coding html

  • @Shalom_Phiri
    @Shalom_Phiri 2 года назад

    Apparently the variable firebase is undefined on my code, please help

    • @Shalom_Phiri
      @Shalom_Phiri 2 года назад

      The firebase object I mean

    • @VetrivelRavi
      @VetrivelRavi  2 года назад

      Make sure that you added the firebase CDN link first and then your local script file next

  • @viveknikam5509
    @viveknikam5509 2 года назад +1

    I have an error- Uncaught Reference error: firebase is not defined
    Pls reply aspa

    • @VetrivelRavi
      @VetrivelRavi  2 года назад

      Did you defined the script tag in the HTML

  • @anastasiaivashchenko6338
    @anastasiaivashchenko6338 2 года назад

    WOW! Great tutorial!