Multiple Inline Insert into Mysql using Ajax JQuery in PHP

hello friends in this video tutorial we are going to learn how can we insert multiple online data and to my SQL table and single click by using PHP script with Ajax query in our one of previous tutorial in which we have covert inline insert of single data but in this tutorial we have will insert multiple and line data into table we will insert multiple and line data without using forms submit but we will use content editable attribute in table for fill multiple data into table and then after you will click on submit button when we have click on Save button data will be saved into our database without refreshing of page now let's start learning this topic this is our testing database and in this we have one table items with five table column like item 8 item name item code item description and item price we will insert multiple data into this table this is our index page and on this page we have used JavaScript libraries query and bootstrap framework we will use functionality of both the library into this tutorial first we have create on table with attribute class is equal to table and table bordered and attributes it is equal to crud table in this table we have already create five table heading like item name item code description and price fifth column for remove button we will fill dynamically in query after this in this table we have add one table row with five table data tag in first table data tag we have right content editable attribute is equal to two and class name is equal to item name by using this content editable attribute we can edit the content of this table data element in second table data tag we have also add content editable attribute is equal to true and in this element we have add class name is equal to item code in third table data tag we have also add content editable attribute is equal to true and in this element we have add class name is equal to item description and fourth table data tag we have also add content editable attribute is equal to true and then this element we have add class name is equal to item price and last table data tag will be blank friends this is our simple table with one blank row but here we can write something on to this table data tag so we will enter write some data into this table data tag now below this table we have to find one button with attribute type is equal to button name is equal to added is equal ad and in button text we have write plus sign so one half click on this button then it will append blank table row into table with it cried table after this we have defined one more button for save multiple data so we have right button tag with attribute type is equal to button name is equal to save it is equal to save and button text we have write save this button we have defined one division tag with attributes it is equal to inserted item data in this division prog we will load inserted item data from table and table format now we have moved to write query code under this first we have defined one variable count is equal to one we will increment value of this variable by one when we have click on add button so when we have click on button with their dad then it will append blank table row in table with it crowd table so we have write dollar with button it add word click event and blank function so when we have click on this button this code will be executed under this first we have write count variable is equal to count variable plus 1 so when we have click on this it will increment count variable value by 1 then after we have defined one more variable HTML code is equal to open table row tag with attribute that is equal to roll with count variable we have write HTML code variable and in this variable we have app and HTML code like open table data tag with attribute content editable is equal true class name is equal to item name and close table data tag after this we have again write HTML code variable and in this variable we have app and HTML code like open table data tag with attribute content editable is equal true class name is equal to item code and close table data tag for a pen third table data tag we have write HTML code variable and append HTML code variable and in this variable we have app and HTML code like open table data tag with attribute content editable is equal true class name is equal to item description and close table data tag for app and item price table data tag we have write HTML code variable and append HTML code variable and in this variable we have app and HTML code like open table data tag with attribute content editable is equal true class name is equal to item price and close table data tag in last table data we want to make button for remove table row so we have write HTML code variable and in this variable we have app and HTML like open and close table data tag in between this tag we have write button type is equal to button with that if you name is equal to remove unclasp is equal to remove in this button we have add on data variable role is equal role with dynamic count variable and in button text we have write - we will use this data variable value for remove particular table row lastly we want the clothes table row tag so we have write HTML code variable and in this variable we have app and HTML code like clothes table row tag so our HTML code is ready for create blank editable table and store into HTML code variable now we want to apply this code into table with it is equal to crowd table so we have write dollar table Lib crud table with a pen method and in this method we have write HTML code variable this method will append HTML code into table within krod table friends here you can see that when we have clicked on plus sign button then blank table role has been appended into table which remove red button so this code is working now when we have click on this remove button then whole table row must be removed from table so inch query code we have right dollar with document as selector with on method and under this method we have right click event with button class removed with function so when we have click on any remove button this code will execute and remove particular table role from table under this first we have defined one variable the lead role is equal to dollar this with data method and under this method we have write data variable row this method will fetch value of data row variable and store into this delete row variable in this data variable we have store read of table row tag so now we want to remove particular table row and we have a two table role which is store into the lead role variable so we have write dollar with hash tag with the lead role variable with remove method this method will remove HTML element from web page so our code ready for remove particular table row your friends you can see that when we have to click on add button down it has a pen table rolling table which remove button we have a pen more than one table roll now we want to remove one table row so we have click on remove button and that table row has been removed from table now we want to save multiple in line table data when we have click on Save button so inch query called we have right dollar with button it save would click event with function so when we have click on Save button then this code has been execute under this first we have defined for array variable like item name item code item description and item price in this array variable we will store item name table column data into item name array item code table column data into item code array item description table data into item description array and item price table column data into item price array variable first we want get the item name table column data and store into I to name array so in table item name table column has class a some name so we have right dollar with the table column class item name with each method would function by this each method we can fetch all value of item name class one by one under this method we have right item name array variable but push method under this method we have right dollar with this selector with text method here text method will fetch text from table data and push method will push this value into item name array variable same way we won't get the item code table column data and store it into item code array so in table item code table column has class item code so we have right dollar with table column class item name with each method with function under this method we have right item called array variable with push method under this method we have right dollar with this selector with text method here text method will fetch text from table data and push method will push this value into ice and code array variable after this we won't get the item description table column data and store into item description array so in table item description table column has class item description so we have right dollar with table column class item description with each method the function under this method we have right item description array variable with push method and under this method we have right dollar with this selector with text method here text method will fetch text from table data and push method will push this value into item description array variable lastly we want get the item price table column data and store into item price array so in table item price table column has class a sum price so we have right dollar with the table column class item price with each method but function under this method we have right item price or a variable with push method and under this method we have right dollar with this selector with tax method here tax method will fetch tax from table data and push method will push this value into item price array variable after fetching all data and store it into a ray a variable now we have start writing Ajax requests so we have write dollar with Ajax and under this first we have write URL option set to insert dot PHP page we have send requested to this page in second option we have right method in this we have write post method and here we have used post method for sending data to server in third option we have write data option and in this option we have define item named item code item description and item price variable we have sent value of this variable value to server and lastly in Ajax we have write success callback function this function has been called after request success and it will receive data from server on to this function we want the clear value of table data tag so we have write dollar with table data tag with attribute content editable is equal tree with text method with blank value this code will clear value of table data tag after this we want to remove table row which we have a Penta table so we have write for loop with variable is equal to 2i less than is equal to count variable and write plus plus onto the sloop we have right dollar with table row tag with hash tag with row with dynamics value of I with removed method this method will remove appended table Row one by one from table now we have moved to write PHP code for insert multiple data so on this page first we have make database connection so we have write dollar connect variable is equal to mystically connect function with for argument like hostname set the locale lost username set to root password set to blank and database name set to testing after making database connection now we have write if statement in under condition we have writes of function with dollar post write some name variable this condition will check at value of this variable is set then it will execute if block of code suppose value is set then it will execute if block of code and under this we have create for a variable like item named item code item description and item price and in this variable we have stored value of data which we have received from Ajax request then after we have write query variable is equal blank in this variable we will store multiple insert query because we have uncertain Alta pull data for create multiple query we have write for loop with dollar count variable is equal to 0 value of dollar count variable is less than value of count function with dollar I 2 name variable and dollar count variable value as plus we have right dollarized name clean variable is equal to mystically real escape string function with two arguments like dollar connect variable and dollar item named with dollar count variable as index this function will clean text and store into new dollar I to name cleaning variable same way we have clean texts of other variable like dollar write and code variable item description variable and item price variable one by one and store into new cleaning variable after clean text of all variable so we have write a statement with condition like dollar item name clean variable value is not blank and dollar item code clean variable value is not blank and dollar item price clean variable value is not blank and dollar item price clean variable value is not blank this condition will check if all variable has some value then it will execute if block of code that means all fields are required suppose there is all fields have some value then it will execute if block of code and under this we have right dollar query variable and in this variable we have a vent query like insert into item table the table column item name item code item description and item price with values like dollar item name clean variable dollar item code clean variable dollar ID and description clean variable and dollar item price clean variable it will make multiple and serve data query and store into dollar query variable so now we have right if statement and condition we have right dollar query variable value is not equal to blank this condition will check it this variable has some value then it will execute if block otherwise it will execute else block of code suppose this variable has no value then it will execute L block of code and under this we have right to echo statement with message like call fields are required but suppose dollar query variable has some value then it will execute if block of codes so now under thus we have right of statement and in condition we have right mystically multi query function with two argument in first argument we have right database connection string and in second argument we have right dollar query variable this function executes multiple and third query and insert multiple data suppose this function will successfully insert data into table then it will execute if block of code and under this we have right to echo statement with message like item data inserted but suppose there is some error then it will execute the else block of code and under this we have right to echo statement with message like error and it will display this message to user so our code is ready so we have saved this code unchecked output and browser friends you can see we can not and remove table roll so now we have direct click on submit button when we have click on submit button then it display alert message like all fields are required so we have fill all fields here we have fill tree item data and click on Save button here we have click on Save button then we have received alert message like item data inserted and all appended table role has been removed from table and it will be blank now we have shared database table for data inserted or not here you can see data are properly inserted into table so now we want to display inserted data after click on Save button so we have go to index page and then query code we have create on function like fetch item data this function will fetch data from item table on to this function we have right ajax.request with first option URL set to fetch dot PHP page and second option we have right method and desorption set the post method lastly in Ajax requests we have rights success callback function this function has been called after request has been successfully completed this function will receive data from server now we want to display data under a division tag with it was equal to insert a diesem data so we have write dollar with division tag it inserted item data with HTML method and under this method we have write data this will display data under a division tag with it is equal to insert add item data which it has been received from fetch dot PHP page so now we have moved to write PHP code under fetch dot PHP page on this page first we have make database connection by writing proper credentials then after we have write dollar output variable is equal to blank value in this variable we will store item data in HTML table format now we have write dollar query variable is equal to select star from item table order by item it in descending order after this we want to execute this query so we have write dollar result variable is equal to mystically query function with two arguments like dollar connect variable and dollar query variable this function will execute query and store result into dollar result variable then after we have rightt dollar output variable and in this variable we have app and HTML code for table but for table column like item name item code item description and item price after the planning table definition now we have right while loop with conditions like dollar row variable is equal to mislead fetch array function with dollar result variable this function will convert query result to array in store into dollar row variable under this while loop we have right dollar output variable and we have app and HTML code like open and close table row tag with for table data tag in first table data tag we have store item name data in second table data tag we have store item code data in third table data tag we have store item description data and in last table data tag we have store item price data after this we want to close this table so we have right dollar output variable and append close table data tag so now we have save item data and table format in dollar output variable so now we want to send this data to Ajax request so we have write to a code statement with dollar output variable now we have moved index page query code here we have called this stretch item data function so one page has been loaded this function has been called in fetch data from item table and display on web page then after one we have saved multiple data and display latest inserted data so here we have also called the function so when we have saved data then this function has been called and it will display latest inserted data also on web page so our code is ready so we have saved this code and check output in browser friends previously we have uncertain Alta pull data but at that time it will not display inserted data on webpage so first we have refreshed page this page and now here we can see the previously inserted item data and table format so now we have filled table with two data here we have filled two items data and now click on Save button here when we have click on Save button then in below at display data which we have inserted now so our code is working this is very useful feature when we want to insert multiple data at once and here we have not used any form field or form submit event but here we have used simple table with content editable attribute which convert table data tag to editable element so we can use this is form field and by using query Ajax with PHP for insert multiple data into MySQL table this type of feature is very useful when you have to insert large amount of data and single click friends if you like this video tutorial please share this tutorial with your friends or even you can also share on social media also if you want to get more update regarding our video tutorial please subscribe our channel for future update thank you for watch this video for getting source code of this video tutorial you can visit link which we have provided video description and under this link you can also check online demo also thank you for watching this video

Channel: Webslesson

Views: 103,799

Keywords: multiple inline insert data, multiple insert data in php, live multiple table data insert using php ajax, multiple insert data using php ajax, ajax multiple insert in php, ajax jquery multiple insert, multiple inline insert using php ajax jquery, insert data into mysql using php jquery ajax, jquery add remove table row, add remove row dynamically using jquery, insert data into database using jquery ajax, live table add data using ajax jquery in php

Id: rRBWUPlpSNw

Length: 25min 0sec (1500 seconds)

Published: Sat Mar 11 2017