Dynamically Add/Remove Form Inputs & Insert Data Into Database Using Bootstrap 5, jQuery & PHP

[Music] hello welcome to my channel i am sahil and today in this video i am going to show you how to create add more fields and then insert into database using bootstrap jquery and php okay so let's start but before starting let's look at demo okay so here you can see there is a card and inside this card there is a form with three input field item name item price item quantity okay and there is a button add more so when we click on add more then all the input fields are added in to the card again okay and if we click again then again all the input fields are added into the dom okay we can add as many as we want okay and we can also remove any uh form inputs okay by clicking the remove button okay now let's try to add some items okay so here i will write and item price item quantity now i want to add more items so i will click on add more and here i will write i will add one more and here i will write i'm quantity 1 now click on add so you can see successfully inserted now if you go to the table and refresh this table then you can see all the items are added into this database okay so now let's start creating this okay so i will just close this and i will use the same data base and table okay so i will just going to select all the records and delete okay uh if i click on a structure then you can see i have created a database with name add underscore more and inside this database i have created a table items okay and in item tables i have four columns id name price and quantity okay now next what i will do is just just i will open htdoc folder okay and inside this i will create a new folder add more okay add more and i will open this folder inside visual studio code okay close this folder now first i will create a new file index.index.php okay and just close this okay here i will just write the html5 boilerplate code okay and here i will add more fill using bootstrap file jquery and php okay now next i will use bootstrap to design this uh okay so here i will add bootstrap cdn link so here i will use cdn cdn link okay so from here i will search mean dot css i will insert this one and remove this now here i will design the form okay so first in body i will give a class bg dot okay and then inside body i will create a container now inside container i'll create a row okay and i will also give margin top and bottom four to this row okay and then i will create a column inside this row call lg 10 and also mx auto for centering this column okay now next inside this i will create a card with shadow and inside this card i will create a card header okay and here i will write add items okay add items if i save this and if i come here and write localhost add more then you can see the card with the card header add items okay now let's design the body of the card so here i will write card body okay card body and inside this card body i will use padding 4 and inside this body first i will create a form and then i will use method post and i will also use an id attribute inside this form tag that is add on this form and inside this form first i will create a div with the id okay id so item okay so item or i can also write so a row so let's keep it item so item okay and then here inside this i will create a row and then inside this row i will create a column call md 4 and i will also give margin bottom 3 okay now inside this i will use input type will be text name will be a product product name and i will use this square bracket okay to store multiple data in the same name attribute okay and then i will also write class form sorry home control and placeholder will be item name and this will be required okay if i save this and go to the browser refresh then here you can see item name similarly we will design the item uh sorry product price so i will just simply copy this one and paste here and here i will keep the call md3 okay here i will keep the call md3 and here i will change it to number and instead of product name i will change to product price and in placeholder i will write item price save if i refresh then you can see the item price now next i will copy again and here i will use call md to not to actually call md3 and here i will write product quantity so here i will write qty okay and here item quantity now you can see the item quantity input field also now we will design a button so here i will use call md to call md2 and margin bottom three so inside this i will create a button so just use button tag and here i'll write add more and inside this i will use some class okay button button success and i'll also assign a class add item button okay add item button and here i will use display grid to make the button block okay save this now if i go to and refresh then you can see this these input fields and a button okay now next i will also create a uh submit button okay so just after this i will create another div and here i will write input type submit and value will be add class button button primary okay and width will be 25 okay and i will also use an id and underscore button okay now if i save this go to the browser and refresh then you can see add button now next what i will do is when i click this add more button then we will append one more uh one more form containing these input field into this card okay so for this uh so for this we will use jquery okay so here at the bottom what i will do is just come here and first include the jquery cdn so here i'll use cdn uh recent libraries jquery cdn and here i'll use this one and remove the cross origin and integrity say now just below this i will use another script tag and then here i will write document sorry document dot ready function okay and inside this we will first we will check that jquery is working or not so here i will write alert hello and if i refresh here then you can see the alert then this is working now next now next what i will do is i will first select add this button add item button so here i will select using class selector so here i will write add item button then here i will use event click function always function and then pass a parameter e then first we will use e dot prevent default to stop the page refresh okay and then uh what i will do in this case i will select uh sorry i will select the d with the id so item so item i am selecting this div actually uh this div using this id so item okay so here show item and then here i will use prepend uh prepend method and inside this we have to use the html so i will just copy the same thing of this row okay so just copy same thing and paste here okay test now i will not change anything i will only change in this button so here just write remove instead of add more and here i will write change the class to remove item button remove item button and button success to danger okay save this now if i just rephrase and click on add more then you can see a another form with input fields are rendered in the dom and a button with a remove okay now if i click one more time then you can see the form input fields are added but when i click on remove then the fill is not removing so for this also we have to write jquery code okay so here uh what i will write is here i will select the document first so just write document dot on then i will use click event then here i will write remove item button then function then parameter e and first i will use e dot prevent default okay and then i will create a variable lit row underscore item and then i will select this dot parent dot parent okay actually i will uh when we click this remove button then we will first select the parent of this button so the parent of this button is this div okay and the parent of this div is this row okay this row so we will completely remove this row from the dome okay that's why i have selected this row item now next uh what i will do is i will just write row item and then remove method okay now if i come here and refresh if i click on add more add more now if i just click on remove then you can see that particular form is removing only okay if i click here then you can see the input fields are removed from the dom okay so this is okay now next what i will do is i will send an ajax request with all the form data to the server okay so here what i will write i will write ajax request hf request to insert all form data okay so here i will write sorry here i will select the form so here you can see inside this form i have id and the value of the ids add underscore form so i will select the form using the id add underscore form so here i will paste it and then i will use submit event so just write submit function then pass parameter e okay now first we will just use e dot prevent default to stop the page refresh and then first then we will select the add button that is this button this add button okay so i will use add underscore button that is already provided the value in the id attribute okay and then i will change the value to adding and then i will use ajax okay so here in url i will write action dot php and method will be post and data will be this dot serialize sorry serialize method and for now i'm just using console.log to display the response so next we have to create this action.php file so just copy and create this file now here i will use the php tag and here what i will do is i will create a connection variable first okay but before creating connection variable let's check that data are coming to the server or not using post super global variable post so just print our post and just open the console now if i just create three forms and fill all the input fields and click on add then you can see all the data are sent to the server okay product name product price and product quantity so next what i will do is here first i will create a connection variable using con equal to new video i will use video so here we have to just write mysql then host equal to localhost db name so our db name is add underscore more if you go to the phpmyadmin then here you can see this is the database add underscore more okay and then here i will write the username that is root and password is blank okay now next what i will do is so next we will write uh create sorry for each loop okay for each loop and here first we will check if dollar under post okay and here i will write product name as value okay product name as value and but here i will also use key okay product name as key arrow value and inside this what i will do is here uh what i will do is i will create a variable sql and i will write insert into items the name of the table and here we have to write the column name name price quantity okay [Music] small and here just write values okay here i will write the placeholder values name and rise and uh qty okay now next i will create the statement variable and using con we will call the prepare method and pass the sql variable here and then we will execute the query using statement arrow execute and we will also bind all the placeholder with the value okay so first i will write name and for name i will just use value and then price for price we can access the price by just dollar underscore post and here just write the product sorry product price and here just pass the key okay key similarly for the quantity qty here we have to use in dollar underscore post and then product quantity and here also just pass the key okay actually here just use the comma not semicolon and next what i will do is just uh outside of this for each loop i will use echo items inserted success fully okay item inserted successfully now next go to the um go to this index.pc file and here we will just write uh add btn.val and we will change the button value again to add and then i will also reset the form so we have to select the form again using add score form and then zero dot reset and i will also uh display a success message okay so for this uh actually before displaying success messages we will also remove all the appended uh forms input field uh i will also remove all the appended uh form input fields from this dom okay so for this uh here what i will do is i will give another class to this row okay appended append items append item okay and here what i will do is i will select using class selector append append item then i will use just remove okay and next i will display the success message so for this i will use so a lot so we have to create a div somewhere inside the card so i will create here the id so underscore alert okay and using this id we will display the response there so inside this i will use html and inside html i will create a div and here i will design a bootstrap alert okay so here i will use class alert okay alert success alert success and roll alert okay and here just use this dollar and then pass response okay save this now if you go to the browser and rephrase now let's try to add items so i will add title item press 20 i will use three quantity three okay and click on add more then i will write tomato item price 40 2 and i will click add more then ninjal 25 4 i will add one more cauliflower okay and item pass 61 and then if i click on add then you can see items inserted successfully now if you go to the phpmyadmin and replace this database then you can see all the records has been inserted okay successfully and and if we just want to remove any field suppose i have three input three forms with all the input fields and i don't want this so if i click on remove then this will be removed from the dome okay so that's it for this video uh thanks for watching this video please like and share this video and also subscribe my channel see you soon in the next video [Music] you

Channel: DCodeMania

Views: 1,243

Keywords: wolfmania, dcodemania, dynamically add remove input jquery, jquery add remove dynamic form, add more dynamic form inuts field jquery, bootstrap 5 and jquery, bootstrap 5, jquery, add remove dynamic form inputs using bootstrap 5 and jquery, insert array into database using php, php mysql pdo, insert record using php mysql pdo, php pdo tutorial, jquery append div, jquery prepend div, jquery dom manipulation, jquery dom manipulation methods

Id: HZarmNqfL7s

Length: 25min 3sec (1503 seconds)

Published: Thu Sep 23 2021