Add Remove Select Box Dynamically using Jquery with Ajax PHP

hello friends in this video tutorial we are going to learn how to add or remove dynamics select box into form dynamically by using CH query and how to insert multiple dynamics select box data into MySQL table by using Ajax with PHP we have already made video tutorial on add or remove input field dynamically by using jQuery AJAX with PHP but there are some viewer has requesters to made video tutorial on add or remove dynamics select box data so here we have developed simple application in which we will store simple order data with multiple item details like name quantity and unit here unit value we will get from dynamic select box k2 and after this we will store into MySQL table now let's start learning this topic this is our testing for database in which we have two table like unit table and order items table in unit table has two table column like United and unit name in this table we have already inserted some unit data into this table we will fetch data from table and fill into drop down list box we have one another table order items with five table column like order items it orderid item name item quantity and item unit we will insert data into this table this is our index page and on this page we have already included javascript libraries query link and bootstrap library link on this page now we have moved to write HTML code so first we have make one form so we have type form tag with attribute method is equal to post and it is equal to insert form under this form we want to include multiple item so we have defined one HTML table with attribute it is equal to item table we will a dynamic item data into this table under this form we have four table heading like enter item name enter quantity select unit and in last column we have defined one button Fred blank row for enter item details so here we have right button tag with attribute type is equal to button name is equal to ad plus is equal to ad by click on this button we can add new blank row for enter item detail dynamically lastly informed define input type is equal to submit button with attribute name is equal to submit and value is equal to insert by clicking on this button we can save item data into table now we have moved to write PHP code for fill select box with unit data so here first we have make database connection by writing dollar connect variable is equal to nucleo object with MySQL host is equal to localist and database name is equal to testing for username set to root and password set to blank after making database connection now we have defined one function fill Unit select box with object dollar Connect variable this function will fill unit select box with unit table data under this function we have defined dollar output variable is equal to blank value under this value we will store unit table data in HTML format after this we have write dollar query variable is equal to select star from unit table and order by unit name in ascending order this simple select query for fetch unit table data below this we have right dollar statement variable is equal to dollar Connect variable with preparer statement and under this we have right dollar query variable this statement will prepare query for execution now we want to execute query so we have right dollar statement variable with execute method this method will execute select query after executing query now we want to get result of query execution so we have write dollar result variable is equal to dollar statement variable with fetch all method this method will return query execution result which we have store into dollar result variable now we have write for each loop with condition like dollar result variable as dollar bro variable by using for each loop we can fetch data from dollar result variable under this loop we have right dollar output variable and in this we have a penned a CH tml code like option tag with attribute value is equal to dollar row unit name variable and in option text also we have write dollar row unit name variable this code will make select box data from unit table and store into dollar output variable now we want to return output of this function so we have write returns statement with dollar output variable now we have moved to write query code for add blank table row into item table when we have click on add button so here we have write dollar document selector with own method and under this we have right click event with button class add so when we have click on that button this code will execute under this we have define one HTML variable is equal to blank value under this variable we will store HTML code for append blank table row for enter item details after this we have write HTML variable and in this we have a pen de CH tml code like open table row tag then after we have again write HTML variable and in this we have a pen de CH tml code like open and close table data tag and between this we have write input type is equal to text with attribute name is equal to item name class is equal to item name here user can enter item name below this we have write HTML variable and in this we have a pen de CH tml code like open and close table data tag and between this we have write input type is equal to text with attribute name is equal to item quantity and class is equal to item quantity here user can enter item quantity details for select unit we have write HTML variable and in this we have app and a CH T ml code like open and closed table data tag and between this we have write select tag with attribute name is equal to item unit and class is equal to item unit from here user can select item unit data fulfill this select box with value so we have right echo statement and called fill unit select box function with dollar connect variable argument this function will fill unit select box with data lastly we want to define remove button in table row so we have write HTML variable and in this we have a pend a CH tml code like open and close table data tag and between this we have right button type is equal to button name is equal to remove and class is equal to remove by clicking on this button we can remove particular table row with data from item table and lastly we have right close table row tank so our HTML code is ready for append blank table row which we have store into HTML variable now we want to append into item table so we have write dollar with table add item table with append methods and in this we have write HTML table variable this code will append blank table row into item table now we have moved to write remove table row code so here we have write dollar with document selector with own method and under this we have right click event with button class remove so when we have click on remove button this code will execute under this we have right dollar this with closest method and under this we have right table row tag with remove method this code will remove particular table row when we have click on that row remove button now we have check output in browser friends we can see went page has been loaded into browser so we can see simple table heading with one add button and one submit button so when we have click on that button then one blank row has been appending to table with form field like text box select box and one remove button now we want to remove this row so we have click on remove button after click on remove button table row has been removed from table that means our code is working so now we have moved to proceed for submit form data we have right dollar with four mid insert form with on method and under this we have right submit event so when we have click on submit button then code will execute under this first we have right event argument with preventdefault method this method will prevent to submit form data below this we have defined one air variable is equal to blank value under this variable we will store error messages first we want to validate all item name text box has been filled or not so we have write dollar with text box class item name with each method this method will check all text box with class item name under this we have defined one count variable is equal to 1 we will increment value of this variable and we will use this variable value to this player on particular row after this we have write if statement and under condition we have write dollar this with value method is equal to blank value this code will check particular text box has some value or not if text box has no value then it will execute if block of code suppose text box has no value then it will execute if block of code and under this we have write our variable and in this we have a pend error message like enter item name at particular row and row value get from count variable and lastly in this block we have right count variable is equal to count variable plus 1 here we have increased count variable by one on every interval above code will check item name text box has some day two or not now we want to check item quantity textbox as some value or not so we have right dollar with textbox class item quantity with each method this method will check all textbox with class item quantity under this we have defined 1 count variable is equal to 1 we will increment value of this variable and we will use this variable value to this player on particular row after this we have write if statement and under condition we have write dollar this with value method is equal to blank value this code will check particular item quantity textbox has some value or not if textbox has no value then it will execute if block of code suppose item quantity textbox has no value then it will execute if block of code and under this we have write error variable and in this we have a penned error message like enter item quantity at particular row and row value get from count variable and lastly in this block we have write count variable is equal to count variable plus 1 here we have increased count variable by one on every interval lastly we want to validate we have select any unit from item unit select box so we have write dollar with textbox class item unit with each method this method will check all textbox with class item unit under this we have defined one count variable is equal to 1 we will increment value of this variable and we will use this variable value to this player on particular row after this we have write if statement and under condition we have write dollar this with value method is equal to blank value this code will check particular item unit select box has some value or not if select box has no value then it will execute if block of code suppose item unit select box has no value then it will execute if block of code and under this we have write our variable and in this we have a pend error message like select item unit at particular row and row value get from count variable and lastly in this block we have write count variable is equal to count variable plus 1 here we have increased count variable by 1 every interval laughter validate formfield so now we have defined one form data variable is equal to dollar this with serialized method this method will convert form data into URL encode its string and store into form data variable now we have write if statement and under condition we have write error variable is equal to blank value this condition will check if this variable has no value then it will execute if block of code otherwise it will execute else block of code suppose our variable has some value that means there is some field has no value so we want stop to submit form and display error message so for display error message here we have defined one span tag with attribute it is equal to error for display our variable value under this span tag so we have right dollar with span tag adara with HTML method and under this method we have right our variable value this code will display error under this span tag it error but suppose our variable value is blank then it will execute if block of code and under this block we have write Ajax request for submit form data to server so in Ajax request we have write first option URL set to inserts dot PHP here we have send request to this page in second option we have right method and in this we have write post so here we have used post method for send form data to server in third option we have write data option in this option we can define which data we want send to server so here we have write form data variable in which we have store form data in URL encoded form lastly we have write success callback function this function has been called if request completed successfully and this function will receive data from server which we can access from this state of argument under this function we have right if statement and under condition we have right tit a variable value is equal to okay this condition will check if this debt a variable value is equal to okay then it will execute if block of code under this block first we want to remove all table row except table header row so we have right dollar with table add item table with find methods and under this we have write table row tax zero index with remove method this code will remove all table row from item table except table row lastly we want to display success message under span tag with Adara so here we have right dollar with span tag Ghaderi with HTML method and under this we have right item details saved method this message will be display after successfully item details insert into table now we have moved to write PHP code for insert data into order items table so here we have write if statement and under condition we have write isset function with dollar post item name variable this condition will check it this variable value is set or not if this variable value is set then it will execute if block of code and under this block first we have make database connection database connection now here we have defined dollar orderid variable is equal to unique hid function this function generates a unique ID based on a micro time after this we have write for loop with dollar count variable value is equal to zero dollar count variable value must be less than value of count dollar post item name variable and dollar count variable value must be increased by one by using for loop we can access all array of item data like item name quantity and unit under this loop we have right dollar query variable is equal to insert into order items table with column like order it item name item quantity and item unit with values like double : order it item name item quantity and item unit this is insert query for insert into table now we have right dollar statement variable is equal to dollar Connect variable with prepare statement and under this we have right dollar query variable this statement will prepare query for execution now we want to execute query with data so we have write dollar statement variable with execute method this method will execute insert query under this method we have get double colon order if value has been get from dollar order it variable in all items we have store same order it for finding items a particular order it double colon item name key value has been get from Dollar post item name variable with dollar count variable value index same way double : night and quantity key value has been get from dollar post item quantity variable with dollar count variable value index and lastly double : item unit key value has been get from dollar post - unit variable with dollar count variable value index after execute insert query now we want to get result of query execution so we have write dollar result variable is equal to dollar statement variable with fetch all method this method will return query execution result now we want to check data properly inserted or not so we have write if statement and under condition we have rightists it function with dollar result variable this condition will check if this dollar result variable value set or not if dollar result variable value is set that means data properly inserted into table and it will execute if block of code and under this block we have write echos statement with okay this output has been sent to Ajax request now our code is ready so we have saved this code in check output in browser friends on browser we have already seen simple table with that new row button and remove button now we want to insert item details and save into MySQL table so we have a fresh browser and click on add row button after click on add row button new row has been appended into table with textbox for enter item name quantity and dynamic select box for select item unit so an item name we have enter Mouse item quantity we have enter 5 and from Unit select box we have select number from unit now we want to add one more row file new item so click on add row button and after then in item name we have enter keyboard in item quantity we have enter 5 and from item unit select box we have select number so this way we can enter details of multiple item same way we have had one more owned and enter details in item name we have enter mineral water in item quantity we have enter 10 and from item unit select box we have select number but now we want to remove last row sir we have simply click on that row remove button and after click on remove button the Dro has been removed from table now we want to save this item details into my SQL table so we have click on insert button and after clicking on insert button all item details has been saved into table and we have received item data saved message on webpage so here our code on how to add or remove multiple dynamics select Box data into my SQL table by using Ajax query with PHP this type of feature mainly used when in our web application there are more than one data saved into table then at that time we can use this type of code to insert multiple data with dynamic select box by using ajax query with PHP if you have any query regarding this video-tutorial part please comment you query in comment box and if you liked this video tutorial please share 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 youtube channel forget more update regarding release of future video lastly keep watching our youtube channel thanks for watching this video tutorial you

Channel: Webslesson

Views: 103,960

Keywords: add more fields, add more select box, jquery dynamically add form fields, add more jquery, add more drop down list box jquery, insert multiple form data using ajax php, insert multiple data into mysql, dynamically add input fields to form, add more select box in php, add more drop down list box in jquery, add more row in jquery, add more select box fields jquery, add remove fields jquery, add remove input fields jquery, dynamic form fields - add & remove bootstrap

Id: xzLclwZOZ-g

Length: 25min 2sec (1502 seconds)

Published: Wed Oct 25 2017