Add or Remove Selectpicker Dropdown Dynamically in PHP using Ajax jQuery

hi guys under this video tutorial we will learn how to add or remove bootstrap five select picker drop down select box dynamically by using jkuri and ajax with php script we have already made video tutorial on how to add or remove select box dynamically but with simple select box we can get simple select box so when we have click it will drop down list of option and from that option we can select data but here we will add or remove bootstrap 5 select picker drop down box with feature like live search select box option so if there are large number of option in select box then by using search feature we can easily filter select box option and select proper data so for this advantage here we have made this tutorial in which we will add multiple item with feature like bootstrap 5 select pickers select box with search feature so under this tutorial we can add or remove dynamic select picker drop down list box now let's start discussing this topic so this is our testing database and under this we have two table like unit table and order items table in unit table has two table column like unit id and unit name and under this table we have already inserted some unit data in this table and from this data we will item unit select box here we have one another table with name like order items with five table column like order items id order id item name item quantity and item unit we will insert data into this table this is our index page and under this page we have already included javascript library jury link bootstrap 5 library bootstrap 5 select library and font awesome library link now we have moved to write html code so first we want to make one form so we have type form tag with attribute method is equal to post and id is equal to insert form under this form we want to make dynamic input field for insert multiple item data in single click so for this we have create one html table with attribute id is equal to item table we will add dynamic item data into this table using jquery under this form we have add four table heading tag like enter item name enter quantity select unit and in last column we have defined one button for add blank row for enter item details so here for create add button we have right button tag with attribute type is equal to button name is equal to add class is equal to add by click on this button we can add new blank row for enter item detail dynamically lastly under this form for submit form data we have write input type is equal to submit button with attribute name is equal to submit id is equal to submit button and value is equal to insert by clicking on this button we can insert item data into table now we have moved to write php code for fill select box with unit data so we have go to database connection dot php file and here we have write dollar connect variable is equal to new do class with three argument in first argument we have write mysql host is equal to localhost database name set to testing user name set root and password set to blank value so this code will make database connection now we have go to index.php file and here we have write include statement with database connection dot php file so it will make database connection on index.php file after making database connection now we have create one function fill unit select box with an argument like dollar connect variable this function will fill item unit select box with dynamic unit table data under this function we have write dollar output variable is equal to blank value under this variable 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 will fetch unit table data below this select query we have write dollar result variable is equal to dollar connect variable with query method and under this we have write dollar query variable this method will execute query and return data in array format which store in dollar result variable now for fetch data from dollar result variable we have write for each loop with condition like dollar result variable as dollar row variable so by using for each loop it will fetch data from dollar result variable under this loop we have write dollar output variable and in this we have append html 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 with data fetch from unit table and store into dollar output variable now we want to return output of this function so we have write return statement with dollar output variable now we have moved to right curry code part and here we have create one count variable is equal to zero below this we have create at input field function with count variable as argument this function will create html code for add blank row for item table under this function we have write html variable is equal to blank value after this we have write html variable and in this we have append html code like open table row tag then after append html 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 details below this we have append html 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 create bootstrap 5 select pickers select box we have opened html code like open and close table data tag and between this we have write select tag with attribute name is equal to item unit and class is equal to form controller select picker and item unit here this select picker class will initialize bootstrap 5 select plugin on this select box now in select picker select box we want to add search feature so here we have write data live search attribute is equal to true so it will add search feature in select box so from this select picker select box user can select item unit data and now for fill this select box with value so we have write echo statement and here we have called fill unit select box function with dollar connect variable argument this function will fill unit select box with data lastly we want to make remove row button so here we have create one remove button variable with blank value and below this we have write if statement and under condition we have write count variable value is greater than zero if this condition true then it will execute if block of code under this block we have write remove button variable is equal to button tag with type is equal to button name is equal to remove class is equal to remove and for display minus icon we have put font or some minus icon code so when count variable value is greater than zero then only it will make remove button so it will not make remove button for first row lastly we want to define remove button so here we have append html code like open and close table data tag and between this we have write remove button variable lastly we have write return statement with html variable which is an output of this function now our function is ready so when page has been load then one blank row must be at in item table so here we have write dollar with table id item table with append method and under this we have called at input field with zero argument so when page load then it will add on blank row in item table now we have check output in browser so friends here we can see when page has been load then add item details like item name item quantity has been display but here cannot see item unit select picker select box so for this we have go to index page and here we have write dollar with select picker class with select picker method and under this we have write refresh as argument so this method will refresh content of select picker drop down now we have again check output in browser friends first here we have refresh webpage and after refresh of web page here we can see item unit select box has been appear on web page and in select pick a drop down select box we can see search feature so user can filter list of option and they can select option from select box now we want to add another blank row when we have click on this add button so for this we have go to index page and here we have write dollar document selector with on method and under this we have right click event with button class add so when we have click on add button then this code will execute under this block we have increment count variable value by 1. now we want to append blank into item table so we have write dollar with table id item table with append method and under this method we have called at input field function with count variable as argument so it will add blank row for add item details so here when it has add blank row then it will also add item unit select picker select box so again we have to reinitialize select picker plugin so here we have write dollar with select picker class with select picker method and under this we have write refresh so here our add blank row code is ready now we have moved to write remove table row code so here we have write dollar with document selector with on 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 write dollar this with closest method and under this we have write table row tag with remove method this code will remove particular table row when we have click on that raw remove button now we have check output in browser friends we can see when page has been load into browser so we can see simple table heading with one add button one blank row for add item details and one submit button now we have click on add button then one blank row has been opened into table with form field like text box select picker select box and one remove button so here we can see that in first table raw remove button is not display but from second draw remove button will be display now we want to remove this row so we have click on remove button so after click on remove button here we can see that table row has been removed from table that means our code is working so now we have moved to proceed for submit form data so we have go to index page and here we have write dollar with form id insert form with on method and under this we have write submit event so when we have click on submit button then this code will execute under this first we have write event dot prevent default method this method will prevent to submit form data below this we have defined one error variable is equal to blank value under this variable we will store error messages and below this we have reset count variable value by 1. now 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 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 blank value then it will execute if block of code suppose text box has blank value then it will execute if block of code and under this we have write error variable and in this we have append error message like enter item name 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 one here we have increment count variable value by one on every interval above code will check item name text box has some data or not now again we have reset count variable value by one and now we want to check item quantity text box has some value or not so here we have write dollar with text box class item quantity with each method so this method will check all text box with class item quantity under 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 text box has some value or not if text box has blank value then it will execute if block of code suppose item quantity text box has blank value then it will execute if block of code and here we have write error variable and in this we have append 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 one here we have increase count variable by 1 on every interval after completing this block now we have again reset count variable value by 1. lastly we want to validate we have select any unit from item unit select picker select box or not so we have write dollar with select box tag with name attribute is equal to item unit with each method so this method will check all select box with name is equal to item unit under 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 blank value then it will execute if block of code and under this we have write error variable and in this we have append error message like select item unit at particular row and row value get from count variable and lastly in this block we have increment count variable value by one after validate form field so now we have defined one form data variable is equal to dollar this with serialize method this method will convert form data into url encoded 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 blank value then it will execute if block of code otherwise it will execute else block of code suppose error variable has some value that means there is some field has blank value so we want stop to submit form data and display error message so for display error message here we have defined one span tag with attribute id is equal to error and for display error variable value under this span tag here we have write dollar with span tag id error with html method and under this method we have write error variable value so this code will display error under this span tag with id error but suppose error 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 first option we have write url which set to insert.php so here it will send request to this page in second option we have write method and in this we have write post so here it will use post method for send form data to server in third option we have write data option and 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 will be called if request completed successfully and this function will receive data from server under this function we have write if statement and under condition we have write data variable value is equal to ok this condition will check if this data variable value is equal to ok then it will execute if block of code under this block we want to reset form field so for remove all table row except table header row so we have write dollar with table id item table with find method and under this we have write table row tag with zero index with remove method this code will remove all table row from item table except table row after this we want to display success message so here we have write dollar with spam tag id error with html method and under this we have write item details saved message so this message will be display after successfully item details insert into table next we want to upend blank row in item table so here we have write dollar with table id item table with append method and under this we have called at input field function so it will add blank row in item table after add blank row now we want to refresh select picker plugin so here we have write dollar with select picker class with select picker method and under this we have write refresh now we have moved to write php code for insert data in insert.php so here we have write if statement and under condition we have write is set function with dollar post item name variable this condition will check if this variable value is set or not if this variable value is set then it will execute if block of code and here for make database connection we have write include statement with database connection dot php file after this here we have defined dollar order id variable is equal to unique id function this function generates a unique id based on the micro time below 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 value and dollar count variable value increment by 1. under this loop we have write dollar query variable is equal to insert into order items table with table column like order id item name item quantity and item unit with values like double colon order id item name item quantity and item unit this is insert query for insert into order table now we have write dollar statement variable is equal to dollar connect variable with prepares statement and under this we have write dollar query variable so 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 write array and array first key we have write double colon order and in value we have write dollar order id variable in second key we have write double colon item name and in value we have write dollar post item name with dollar count variable in third key we have right item quantity and in value we have write dollar post item quantity with dollar count variable and in last key we have write double colon item unit and in value we have write dollar post item unit with dollar count variable so this way we have store form data in array format and this method will execute query and one by one it will insert data in order items table 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 right if statement and under condition we have write is set 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 echo statement with ok this is the output has been sent to ajax request now our code is ready so we have saved this code and check output in browser friends on browser we have already seen simple table with add new row button and remove row by remove button now we want to insert item details and save into my sql table so we have refresh browser after refresh of page here already row has been appended into table with text box for enter item name quantity and dynamic select picker select box for select item unit with search feature so in item name we have enter laptop in item quantity we have enter one and from unit select box we have search and select unit now we want to add one more row for new item so click on add row button and after this in item name we have enter mobile in item quantity we have enter one and from item unit select box we have search number and we have select number so this way we can enter details of multiple item same way we have add one more row and here we have enter details like digital watch in item name field in item quantity we have enter 5 and from item unit select picker select box we have search packet and select packet but now we want to remove last row so we have simply click on that raw remove button and after click on remove button then that row has been removed from table now we want to save this item details into mysql 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 web page so here our code is working on how to add or remove multiple dynamic select picker select box data into my sql table by using ajax jury with php this type of feature mainly used when in our web application there are more than one data saved into table in single click and in form field there is select box then this type of select picker select box will increase the user interface so user can search unit from list of unit and then after it will insert multiple data in database using ajax jquery with php lastly if you have any query or inputs regarding this tutorial you can ask your query in comment box if you have liked this video please share with your friends or even you can also share on social media also and lastly don't forget to subscribe our channel for future video tutorial

Channel: Webslesson

Views: 5,772

Keywords: dynamically add / remove selectpicker select box in php, dynamically add / remove select picker dropdown box in php with jquery, dynamically add / remove select box in html, add / remove selectpicker dropdown box dynamically with jquery, add remove selectpicker select box dynamically with javascript, add remove fields jquery, dynamically add / remove selectpicker, dynamically add / remove select picker in php with jquery ajax, add more select box, jquery dynamically add form fields

Id: 7v9AyBPp2CA

Length: 31min 40sec (1900 seconds)

Published: Fri Jul 09 2021