Pure JavaScript CRUD Operations with Html

quick demo of this video tutorial in this video we are going to implement JavaScript credible with add edit remove using HTML and CSS in order to insert a new record for surf or populate the form if you submit the form corresponding employee will be added into this HTML table here if you want to update this record just click on this edit button here then it will populate the corresponding employee back to this HTML form then make the required changes then click on submit so here we have updated corresponding employee if you want to delete an employee record click on delete then it will ask for confirmation are you sure to delete this record or not click on OK so here we have deleted corresponding employee record apart from this we have discussed HTML form validation using pure JavaScript I hope this video will be helpful for javascript and HTML bigness so please watch till the end of this video tutorial before starting this video I would like to ask you a favor if you found this video helpful please thumbs up this video if you are new here please please subscribe to this channel and click on the bell icon to get notification about my new videos most of the video LSN here also has a written blog post you can find the link in video description you can grab code from the as well lots of YouTube welcome to code affection this is my big nails tutorial for HTML and JavaScript in this tutorial we are going to implement pure JavaScript quad operations with HTML fits out further ado let get started we will be creating required HTML and JavaScript files inside this project folder here we will be using visual studio code editor for this project in order to open the IDE in this project directory right click here then click on open with code first of all I will start with creating index dot HTML so first of all we have to set the doctype as HTML followed by HTML tag itself inside that we have the head tag and then we have the body tag whatever HTML element we have inside this body tag here will be displayed inside the webpage first of all inside this head tag I will set the page title as HTML collide with pure JavaScript in order to work with this project we have to have one style sheet and one javascript file so let me create those two files here script dot j s and then we have styles dot CSS now we have to add these two files inside this HTML here it is recommended to add stat sheet just before the head and tag here and regarding the script files it is a best practice to add them just before the body and tag here so here we have said the basic foundation for this project let me save all of these modifications here then I want to open this index dot HTML inside the web browser so back to the project folder directory here then double click on index dot HTML so here we have the page title as HTML crud with pure JavaScript now in order to design this application I will be using basic HTML table so here we have the table inside then we have a row with two columns inside this first column I will show the form for credit operations it will be a basic HTML form inside that we will implement the quirt operations insert update and inside the second cell here we will have an HTML table inside that we will list all of the inserted records so first of all we will add the form for insert and update operation inside this first cell here so here we have the HTML form basically inside this application we are going to implement operations add edit and remove around employee details like full name employee code then city and salary so first of all I will add controls for full name so first of all we have the label for full name after that we have the input control which is the text box here we have set the type text so it will be a text box and here we have said the name attribute as full name since these two controls are related to a single property full name I want to enclose them inside a div here for that I will do this like this we have to add HTML elements for remaining field also so let me copy this and paste it below three times and we have to change their allowable and attribute name accordingly first of all it would be for employee code so I will set this name as EMP code and this is for salary and finally we have label textbox pair for city at last we have to have a button for submitting this form so for that purpose I will add this div here inside that we need an input with type will be submit then I will set the value as submit in order to style or position in this do I want to add this custom class here for action buttons now let me save this that back to the application reload this page so here we have the plain HTML form for crud operations before styling this form here I want to add an HTML table so that when we insert new employee records we can add them into this new tab here so inside the second column here we want to have another table in order to list inserted a course so here we have the table with custom class list inside that first of all I will add the tea hat with a single draw inside that we have to add column header for each employee record so here we have the full name employee code salary and city along with these columns I want to add one more golem in order to show action buttons like edit and delete beneath this D hat we need the T body inside that we can insert employer of course dynamically when we submit the form now in order to identify these HTML elements from JavaScript I will add ID for these elements here so first of all we have the table and I will set it as employee list then we have city text box then salary text box employee code and full name text box now in order to style these elements here I will quickly update this style sheet here Styles dot CSS so here we have the all CSS rules for this application we are not going to discuss these CSS rules here so that we can focus on pure JavaScript code to operations and edit remove now let me save all of these modifications then reload this page here so this is how the application looks like now let's try to submit this form here so that we can insert your course into this HTML tab Lesya now I'll save it inside this project will not be persistent instead we will store them inside this HTML table directly just to understand pure JavaScript operations with HTML form submission in most of the web browser you can see input predictions like this these are the predictions from previous form submission in order to avoid predictions or autocomplete inside form controls we can set this autocomplete property as off now let me say this then back to the application so this is how we can prevent default autocomplete from the browser now let's try to submit this HTML form in order to insert a new employer code inside this HTML table here that we can do with on submit event for this form here so here we have the on submit event inside that we have to pass a JavaScript function for current operations before the JavaScript function when we submit an HTML form we can see some default behaviors if I submit this form you can see that this page is reloaded and it also pause form country data so first of all we have to prevent this default behavior of an HTML form which is reloading and sending form data through Curie string or URL parameters for that we just need to do this event event dot preventdefault will block this default behavior of the form let me save this then let me do the same that we have done before now if you submit this form you can't see any default behavior now we have to deal with the form submission inside a JavaScript function for that we will create one function on Form submit inside this dialog script file here so here it is function function name will be on form submit first of all inside this function we have to retrieve values from these input controls here for that I'm going to define its a paid function here so here is the function read form data first of all I will define a variable form data inside this form data we can push value of full name textbox like this we can access HTML elements using the ID by calling this function get element by ID from document object so here we have the full name ID which is the input control for full name here like this we have to push values for remaining controls also so here we have employee code then salary and city finally from this function we have to return this object form data for that we can do this return form data now let's call this function from this form submit here form data is equal to read form data so inside this object form data we have retrieved all values from these HTML controls here now using this object here we have to insert new record inside this HTML table here for that I will define another function here which is insert new record with a single parameter data into this function we will be passing this four data here that means it will have these much properties full name employee code salary and city so first of all we have to have a JavaScript object for this HTML tab we have given an ID for HTML table here which is Employee List to be specific we have to insert your course inside this tee body here so we can do this you have this object table inside that we have the tee body from the table which has the ID Employee List so it will be this t body element here now inside this tee body element we have to insert a new row for that we can call this function in third row inside that we have to pass the index of nirach where we have passed length of the table initially length will be 0 upon new record insertion it will increment by 1 so it is perfectly suit for index of new record which is to be added now inside this row we have to insert new cell for these employee details for that we can do this recall the function insert cell with index of this cell so here we have inserted a new cell inside this row now inside the first column we have to insert fully named value for that we can do this cell 1 dot in HTML and inside that we have said this full name which is from this data parameter here like this we have to insert a new cell and save the corresponding value for these remaining properties here for that we can do this here we have this cell for employee code then salary and city finally inside the table we have an extra column for buttons like edit and delete operation so we have to add one more cell for edit button and delete button so here is the cell inside this cell we need the HTML for those two buttons so we can do this this is for edit operation finally we need one more anchor element for delete operation this HTML can be passed using double course or single course or we can even use backtick also so here is the difference if you use single quotes instead of backtick here you can see the difference we must provide them in a single line otherwise we will have problems for better readability we may have to split them into multiple lines so we can use backticks in those cases instead of these single quotes and double quotes now let's call this function from this submit event here insert your code inside then we have to pass this form data object let me save all of these modifications here then reload this page let me insert a new record click on submit bow so here we have the newly inserted record for Tony Abraham after submitting this form here we want to reset the form controls to the initial value for that I will define a separate function here function name will be reset form inside that we have to clear these form controls separately so this is what we do document dot get element ID and we have this full name textbox here and we will set the value to empty string like this we have to reset remaining text boxes for that we can do this now let's call this reset form function inside this form submit even here now let's implement the next credit operation which is edit or update operation for that we have to click on this edit hyperlink here and we have to populate the corresponding employee details inside this form here so let's look how we can do that for that first of all along with this hyperlink here we have to add the on click event for this hyperlink now we have to implement this on edit function and into this function we have passed a reference for this TD cell HTML so here is the function on edit with a single parameter TD first of all inside this function I will declare a variable selector row and inside this variable we have to store the corresponding HTML crop which is this TR element for that we can do this first of all we have the TD parent element inside this TD element we will have the corresponding cell HTML and with this parent element property we have the exact CD element from zero instead of TD cell we need the corresponding TR element for that we can do this so this will return the corresponding raw element now inside this function we are going to populate these employee details back to this form here for that we just need to do this first of all we have the full name textbox and into this text box we have to populate the employee full name so here it is we have the corresponding draw and we have the first cell which is for full name and from that cell we need to return in HTML which will be the exact employee made after that we have to do the same for remaining test box also employee calls salary and City now let me save all of these modifications here then reload this page previously inserted a code will not be there inside this table for the demonstration I'm going to insert one more employee here so here we have the newly inserted up code for the employee Bruno Nash and click on this edit button here so here we have populated corresponding employee details back to the form here now after making require changes for update operation we have to submit this form we have already wired up a function for this form submission which is here on Form submit inside this function we have already implemented curve operation insert now we have to change this function in order to accommodate update operation for that basically we have to identify whether the current operation is insert or update operation for that I will be using this property here selected draw so first of all I want to make this property as a global variable inside this script file here so I will add that declaration here was selected row initially it would be none so in case of insert operation it would be null during update operation when we click on the Edit hyperlink it will be populated with corresponding employee role so based on this property here we can decide whether we have an insert operation or update operation so it is also necessary to reset the property during the reset form function here then back to the form submit function here first of all during update operation this will be not if the property is null then we will do the insert operation otherwise we have to do the update operation regardless of update or insert operation first surfer we have to fit the current form data into this property form data here for update operation I am going to define one more function here so here is the function update record with a single parameter form data now in order to update the employ details here based on the new values from this form we can do this here we have the corresponding employee record TR element we have the four cell inside that we have to save the full name of the employee like this we have to update remaining cells also we have employee code salary and city now we just need to call this function inside the else block here before testing this update operation let me implement the final crud operation which is delete here so here is the function on till it with a single parameter TD and inside that first server we have to store the corresponding T element inside this property here and then in order to delete that corresponding row from this HTML table here we just need to do this we have the corresponding employee HTML table then we just need to call this function delete row inside that we have to provide the corresponding employee or index so this is what we need for delete operation after deleting the record we have to reset the form and since we have a delete operation it would be a loss of data so we have to confirm the operation from user side so I will add this if close here with this confirm message are you sure to delete this record or not if you sir confirm the operation then only we are going to do the delete operation inside if close here now let me save this then back to the application here reload this page then let me add one more employee so here we have added a new employee record for Roy Mathew now let's check edit and delete operation for ready to operation click on this hyperlink here so here we have operated corresponding employed it is I will append a suffix with updated text here then submit before so here we have updated employee record for Roy Matthew then if you want to delete this employee just click on this delete hyperlink here then it will ask for confirmation are you sure to delete this record or not if you confirm it it will delete the corresponding employee finally I want to show you how to implement validation inside this HTML form with pure JavaScript I want to make this full name as a mandatory field in order to indicate this is a mandatory field I will append the suffix with esta so here it is I will happen this star here if we submit the form without filling full name here we have to show a validation error message so I will add that label here so here we have the label inside the label we have this message this field is required for this our label we have added this specific ID full name validation error and we have few custom classes also so initially this label will be hidden because of this custom class here height we have to show this label and we have another waveform validation function name will be validate inside the function for sir for I will define a boolean value is valid and it will be set as true initially after that we have to check the full name text-box value if it is empty string then we have to reset this boolean value is valid to false then we have to show this label here for that we have to remove this height class from the class list for that we just need to do this inside this class please here for the label that we have just added here we have to remove this height class from class list array in the else block we have to do the reverse operation for so for we will set the boolean value true then we will check whether we have a height class inside this label if there is no height class we will add the class here finally we have to return this boolean value is valid now we just need to call this function before form submission here if is valid returns true then only we will do these insert and update operation here sorry instead of is Valley we have a function validate let me save all of these modifications here then back to the application reload the page then I will try to submit this form without entering full name so here we have the validation error this field is required now let me fill this form properly now let's submit the form so here we have inserted new employee rocoto aartsen and we hide that validation error message for full name so that's it guys in this video we have implemented curve operations with HTML and pure JavaScript you can download this project source code from the github link given below in video description if you found this video helpful please thumbs up this video and for more awesome videos like this please please subscribe to my channel Cod affection please like and share this video with your friends and colleagues so that they can benefit from this have a nice day bye [Music]

Channel: CodAffection

Views: 186,473

Keywords: Javascript CRUD table, crud application using Javascript, pure Javascript CRUD, CRUD in HTML and Javascript, Simple CRUD with Javascript, Javascript- Add Edit Remove, HTML CSS Javascript CRUD, CRUD Operations in Javascript and HTML, Html CRUD with Pure JavaScript, Html Form CRUD Operations, Begginers tutorial for Html and JavaScript, html table insert update delete, delete html table row, insert new record in html table, CodAffection, HTML Form Validation with Javascript

Id: -rNQeJi3Wp4

Length: 24min 18sec (1458 seconds)

Published: Thu Oct 11 2018