Complete CRUD Operations using JavaScript with CSS & Html
Vložit
- čas přidán 27. 08. 2024
- #learningzity#javascriptcrud#beginnertutorial
In this video I developed basic javascript crud operations help with the css and html. more than that I explained the javascript DOM manipulation methods including getElementById() and getElementBtTagName()
🔵Check out the code on my Github if you get stuck : github.com/osh...
🟠React Basics #1 | Learn the react basics in 5 minutes
• React Basics #1 | Lear...
🟠Student Registration Form Using React | Basic of Form Handling
• React Basics #1 | Lear...
Thanks For Watching ❤💻
Excellent video and teaching. Helped me to remember how to code this. Question; is there a simple way to add a search function to find by Product code or Product name the contents already entered in to the storage? Thank you for your time. I subscribed.
Updated with search function in github search branch 👇👇👇
github.com/oshgodage/JavaScript-Crud-Operation.git
@@learningzity how to grid operations
😊😊😊😊😊😊😅😅😊😊
thanks for video i have seen many videos to learn it but you are the best😇
Having problems, It doesnt let me add a whole new Record, it replaces the first one when i put "function onEdit(){" Ut let's me make more than 1 record but not edit them but when i do "function onEdit(td){" it lets me edit the records but doesnt let me make a new record, only that same one
Updated the code.
Same problem, when i add the onEdit(this) in cell5.innerHTML it has a error
Garrett Evans Wow thank you Garrett, you've made my day!
I love a lot your programming tutorial: your excelent explanation, the background music, your beautiful accent...
Thank you @Michel Amir Madrigal Torres !
Thank you, it helped but i had a little bit of problems. Good Tutorial
Very well presented. very clear and helpful. Thanks. Mary
Dude you are the best. It is safe and 100% works
Thanks to share
tNice tutorials actually was, and I'm just starting myself, I have no idea what I'm doing but I have a ton of ideas in my head. Ti to figure tNice tutorials out
This is essential for my practice, thank you
tq so much for ur clearcut explanation...
BROOO thankyou so much, this really helped and the tutorial was really easy to use as well :)
teaching technique is lovely❤️🤗
hi there, whats up?...thanks for sharing this project....it's really helpful to put the main js concepts in practice...just keep it up!!
hi, you need to add selectedRow = null; to the last line in function updateRecord(formData). thanks for your video
Excelente aula!! obrigado por compartilhar conhecimento parabéns.
Thank you ! ❤
@@learningzity hello can i ask a question? i follow your codes but in my case the java script didn't working...please help me 😥
Excellent ...pls keeping more videos
Great! Works well and very helpful :)
I from Brazil, thanks! I love yoooooou.
using soft, can't wait to get my hands on it.
need the other half of the video!
Thanks for this explanation.
❤
wonderful video,great content 👌🙌
Thank you so much ma'am this video very useful
Thank you ! Tutoriel intéressant et clair.
Best Video Ever❣❣❣❣❣❣
I really like the way you do. Can you create a series about NodeJs and ReactJS full tutorial, and some ecommerce projects in fact? Thanks!!
It seems good idea 🙌
Nice Explanation
Very good 👏👏
This is awesome demo... Thanks :)
Good Explaination, But include Live Server....! People might confuse like Me Haha...😅😋
Very helpful thanks!!
Great tutorial, thank you so much, is it possible to request a video on some new topic?
Yes, soon
i think addEvent listener should add while click event happens
i cant add dynamic table. you have done export default function in onFormSubmit but does not really tackle that
Suggestion: AddressBook JavaScript Vanilla
Thank you madam
why we passing the insertNewrecord(data) => data inside the function parametre
can u help am a begineer
It uses to pass the formData values (var formData=readFormData();) such as Product code, Prodcut Name, Qty, Price to the insertNewRecord(data) as parameter
Loved this! Can you do local storage with it?
Cookie perfect in local storage
Thank you for this video
Background music like - explaining movies
Complete CRUD Operations using JavaScript with CSS & Html
JavaScript for delete data in localStorage by button on table rows
Great Job thanks
Awesome lecture mam!!! Really it is very useful...
It's my pleasure 😊
else to it. How do I do that? Your answer would be Nice tutorialghly helpful and appreciated.
In this project is it connecting to any database?
thank you
afted editing it is giving new table data instead of updating old data
when we refresh the page data has to visible ,but when you refresh data is gone
can you solve that problem to me
One way is use window.localStorage . it can store data locally within your browser
that's awesome🥰
I have a question please answer me
My question is where id="storeList" you already used in "insertNewRecord() " how did you do that can you explain me 🥺
insertNewRecord() is a function where I call 'storeList' id (5:52 ) using document.getElementById(storeList) (15:12 )
uh, is there something that im missing? cause ive followed your steps and the table, when i submit it, it doesn't show up.
😅
I guess so..Plz check with the GitHub code I mentioned above
Thanks for amazing tutorial, but event is deprecated what should I use instead of event in onFormSubmit() function?
nice work keep it Up
Thanks @imran baitham !!
best luck!
How we can make that program in two pages?
One page for encoding
And one page for saving table
how to add multiple records? and after updating the records? how it posibble ?
I get a TypeError: Cannot read properties of undefined (reading ' instertRow') on line 26: var newRow = table.insertRow(table.length); I really can't find my error, and I mimicked it pretty well. Any idea why it might happen?
It's difficult to guess the idea without looking at your code, but it seems you had missed something in below line
var table = document.getElementById("storeList").getElementsByTagName('tbody')[0];
check the table id and are correctly assign in your code
In The setup hey bro i wanted to know how do u load your Sample guide into the packs in the browser?
THANK YOU!! ✌
How can I integreate this to DB
Hi I like your video but i was having trouble when I type product code product name qty and price nothing appeared
excilent
Thanks❤
need help my submit button does not work after apply javascript
Check whether you call the JS function(your submit function) correctly in the submit form. check the code in github
Thank you 😊
can you made same video using node js on crud opration
I can't see coading
It’s very difficult to understand the codes what you write there. They are to be zoomed out during making the videos.
hey there Excellent video by the way watching this video i make an student form and i have a doubt that when i am entering the roll number it should be unique like if i make the 2nd entry with the same roll number there should be a pop up that roll number is present in the table. Like that can you help me for the same.
After CRUD operation to connect DATA basic video
Excellent Explaination mam! Looking forward to connect with you on LinkedIn!
How to add view function edit and delete is ok but view required
Thank you
perfect video
Code not visible
Loved this :) Can you do json file with it?
can I code this on my mobile phone?
hello there, this video was really informative and helped me but I've a question : what if instead of delete and update btn in every row can we add checkboxes and as we checked a checkbox both delete and update btn should be enabled and we can delete multiple rows on a single click and the same with update
Have you found the solution to your question, I have the code of what you are describing. I downloaded it from the internet very long time ago.
How to retain previous value if i submitted once using html form? Example : if HTMl form has 3 input (name , age , Mob number) first i send all 3 data it saved in record successfully. Now if i want to send name (same name) with only updated number than i don't want to enter age again. means age should be there only.
If you want to update the mob number you can select the relevant row from the table and submit, the theoretical part starts here as you want
-> 19:17 .Therefore No need to send the name again.
@@learningzity actually i am sending data in Elasticsearch (to store data) where i can't select the row and update. Is it possible to get back particular name details from table on html page than i can edit it?
@@bhaveshkunbi2164 If you're using ES then you need to know id of it to update, in your case it's similar to mob number id.
How to save all recorded data into database
One way is using PHP(create sql connection) file with MySQL database(store data), for this you may need to modify above video code little bit ...
Write a program to continuously take a input for students details from the console or html ,the user should be able to add multiple students details once .the data should be saved in a database . Once the data is saved the user should be able to edit and delete option should allow for the bulk delete.plese code
I cannot place value in table there is no error
How to get total price(auto calculate) in this sequence please update your video ...
how about store data after refreshing page
how is this CRUD when there is no database?
Hello creator! We are having problems with the data not displaying once we pressed the Submit button.
It might be the case of not calling submit function correctly.
Thank you so much mam ❤️
Your most welcome 😊
Thanks for the video. I just wondering does the data remain there if the tab was closed and open again? Does the data is fetch @ save from db?
Since there's no db connection connect with frontend, after refresh you won't get previous entered data
@@learningzity thanks for the answer. Just a quick question...can javascript integrate with backend development?
@@muhammadfakirullah9986 for that you can use node.js, which allows the javascript code to be run on the server-side
@@learningzity thanks...i hope you can do more video about coding...i support what you did, to me it gives motivational to others... also thanks a lot for the info 👍
true
Hey there!! Nice video, but there's something wrong.. After I click on the edit button, I can't insert new lines of data, it appears on the same line that I clicked.
Thank you for pointing out that, I updated the code
how i can i find stored data
Dr mam this form js video very helpful for me but video quality is not good
Thnx mam description ma sab details dena k liya
👏👏👏👏👏👏
nice, but how to save the data if they have the data entered how to save that? they have no database!?
This is front-end development hence data only store temporary to console, for save data you might need back-end work stuff
Mam valuable video
Glad its help ❤
Hi when add more the one record the first one gets deleted and the new record shows. How to make multiple records be shown. Awesome videos btw
For the insertion check table and newRow variables, its all start from there,
For deletion consider the index of the row