In Web Development
Node JS Express Ajax CRUD Operation - Insert Data into MySQL Table - read the full article about Node Js update, Web Development and from Webslesson on Qualified.One
Youtube Blogger
hello friends this is tutorial series on how to use ajax in node.js express application and under this series we have buildcrud application in node.js by using ajax mysql database and bootstrap model and in this part we will show you how to insert or add data into mysql table in node.js by using ajax with bootstrap framework here we have to make single page crud application in node.js so here we will use bootstrap model for getdata and by using ajax we will insert data into mysql table in node.js in previous part we have already download node.js express application and we have also show you how to fetch data from mysql table and display on web page by using ajax now in this part we have use ajax for insert data so for this we have go to text editor and here we have to open sample data template views file and here we want to create add data button so for this here we have to write button type is equal to button within attribute is equal to add data after this here we have to write class attribute is equal to button button success button small and float end class and in button text we have to write add so here our add data button is ready so when we have clicked on this button then add data model will be pop-up on the web page and below here we can see that we have used bootstrap modal code and here we have to write it attribute is equal to action model so this attribute value we will use for popup model on web page after this we want to create one html form and under this model so here we have to write form tag with method as equal to post and after this we have to write it attribute is equal to sample form this it attribute value we will use forgetform data now we have go to modal header class tag and here also we have to write it attribute is equal to dynamic model title and this it attribute value we will use for display dynamic model header title now we have go to modal body class area and under this we want to create form field so first we have to create field for get first name data so for this here we have to write input type is equal to text with name is equal to first name and it attribute value is equal to first name so under this tag we can write first name data next we need to create form field for get last name data so for this here we have to write input type is equal to text with name is equal to last name and it attribute value is equal to last name so from this tag we can get last name data next we need to create select box for getgender data so for this here we have to write select tag with name is equal to gender after this we have to write it attribute value is equal to gender and under this select box we have to create two option tag for select gender so from the select box tag we can select gender data next we need to create one form field for get age data so for this here we have to write input type is equal to number with name is equal to age and it attribute value is equal to age so from the stack we can get age data now we have go into modal footer tag and under this tag we have to write input type is equal to hidden with name is equal to it and it attribute is equal to it so under this field we will store a table column data after this we have to create one another hidden field with name is equal to action and it attribute is equal to action with value attribute is equal to add this hidden field value we will use for define crud operation action and lastly for submit form data here we have to create one button for submit form data so for this here we have to write button type as equal to submit and class is equal to button and button primary and in it attribute we have to write action button so when we have click on this button then form data will be submitted so here our model is ready now when we have to click on add button then this model must be popup so for this here in jquery code part we have to write dollar selector with buttoned ad data and after this we have to write click event with callback function so when we have click on the add button so this block of code will execute and under this block first we want to reset modal header title so here we have to write dollar with header 5 tag it dynamic modal title with text function and under this we have to write add data so it will display add data on modal header title after this we want to reset all form field so for this here we have to write dollar with format sample form with zero index dot reset function so it will clear all form field data and next we need to set hidden action field value so here we have to write dollar with hidden fielded action with value function and under this function we have to write at so here we have to set hidden field value next we want to set submit button text so here we have to write dollar with submit button it action button with text function and under this we have to write add so it will display add text on the submit button and lastly we want to pop up model on the web page so for this here we have to write dollar with model it action model with modal function and under this function we have to write show event so it will pop up model on the web page now we want to check output in the browser so we have go to command prompt and goes into our nodejs working directory and after this here we have to run this command so this command will start node js server now here in browser we have hit base url sample data url in the browser so here we can see that mysql database data has been fetched and display on web page using ajax and above it we can see that one add button has been appear which we can see here now we have to click on the button so after click on the button here we can see that modal has been pop-up with simple html form so here we can fill data and we will submit this data by using ajax to nodejs server site script so for this we have go to sample data template file and here we have to write dollar with format sample form with on function and under this function we have to write submit event and callback function with event parameter so when form has been submitted then this block of code will execute and under this block first we have to write event dot prevent default function and after this we have to start write ajax request so in ajax first option we have to write url and in value we have to write base url roots file name action root name so it will send ajax request to this file now in second option we have to write method and in value we have to write post so it will use post method for send data in third option we have to write data and in value we have to write dollar would form its sample form with serialize function so it will create url encoded text string by serializing form values in fourth option we have to write data type and in value we have to write json so it will receive data from server in json format after this we have to write before send callback function so this function will be called before send ajax request and under this function we have to write dollar with submit button it action button with attribute function with two parameter like disabled and disabled so it will disable submit button and in last option we have to write success callback function so this function will be called after ajax request has been completed and this function has been received data from server which will be get from this data variable now under this function first we want to enable submit button so for this here we have to write dollar with submit button it action button with attribute function with two parameter like disabled and false so it will enable submit button and here first we want to display success message on the web page so here we have to create one span tag with it is equal to message so we will display success message and under this tag now for display success message here we have to write dollar with span tag it message with html function and under this function we have to write division tag with classes equal to alert an alert success class and between this tag we have to write data dot success so it will display success message on the web page and after this we want to hide model from web page so here we have to write dollar with model it action model with modal function and under this function we have to write hide so it will remove modal from web page after this we want to display latest inserted data in html table so for this here we have called load data function so it will fetch data from mysql and display on web page in html table by using ajax after this we want to automatically remove success message from web page so for this here we have to write javascript set timeout function and under this function we have to write dollar with span target message with html function and under this function we have to write blank value so it will remove success message and after this here we have to write 5000 so after 5 second success message will be removed so here our jquery code is ready now we have go to sample data javascript file and here in action root first we have to write if statement and under condition we have to write action variable value is equal to add so if this condition true then it will execute if block of code under this block first we want to store form data in the local variable so for this here we have to write first name variable is equal to request.body.firstname so here we have store form first name field data into local variable after this for store last name field data so here we have to write last name variable is equal to request.body.lastname next for storage form data into local variable so for this here we have to write age variable as equal to request.body.age and lastly for store gender form field data into local variable so for this here we have to write gender variable is equal to request.body.gender so this way we have store form data into local variable now we want to write insert data query so for this here we have to write query variable is equal to insert into sample data table with table column like first name last name agent gender with values get from dollar expression first name variable dollar expression last name variable dollar expression age variable and dollar sign with gender variable so this way we can define variable inquiry under node.js now we want to execute above insert query so for this here we have to write database.query function so this function has been used for execute mysql query and under this function first parameter we have to write mysql and cert query so for this here we have to write query variable in which we have store mysql answer and in second parameter we have to write callback function and this function return two data like error variable and data variable now we want to send response to ajax request in json format so for this here we have to write response.json function under this function we have to write message key and in value we have to write data added message so this function will send response to ajax request in json format so here our code is ready now we want to check output in the browser so first we have go to command prompt and here first we have to stop this process after this again we have to start node js server by using this command so friends first we have to refresh web page and after refresh of web page here we can see that add data button and mysql table data has been displayed in html table using ajax now for add data we have to click on add button and after click on add button here we can see that module has been pop-up in the browser so here in modal we can see html form with different field and with add button so now we have to fill all form field one by one once we have fill all form field now we have to click on the add button and after click on add button here we can see that modal has been removed from web page and here we can success message on the web page and on the web page we can see that lastly added data has been displayed under html table so this way we can do add or insert data into mysql table in node.js express application by using ajax in next part we will learn how to edit or update existing mysql data in node.js express application using ajax lastly thank you for watching this tutorial and we will be meet in next part
Webslesson: Node JS Express Ajax CRUD Operation - Insert Data into MySQL Table - Web Development