Dynamically Add / Remove input fields in PHP with Jquery Ajax

dynamically add or remove input fields in PHP with query this post explains you about how to dynamically add or remove input fields in PHP with query with add more button we are added input box and with remove button we delete it all the input box represent two array called name on click to submit button Ajax request goes to add name dot PHP here first of all we remove all the empty value from the name array and add value into database I am using one database table here called TBL name there is two field one is it and second is name this is my simple HTML page in this first I create one form with name add name and did is add name in this forum I define one table with a dynamic field you in table I define one table row in this table row there is two column in first column I define one text box with name is name with array for insert more than one name I also define placeholder and class name form control and name list you in second column I define button with name added his name and button text is add more you after table I define one button for submit with name submit it is submit and value is submit you now I started writing to query code in this first I define I is equal to one first I want to add dynamically text box with Remove button HTML code for this I write query code one button with it is add on click event in this function first high increment value of i-4 dynamic HTML feel dead I want to append HTML code in table with a dynamic field for dynamic HTML code I simply copy upper table row HTML code and past here in this code I defined table row with it with name row with dynamic 1 & 1 also defined button it with this dynamic high value and change remove button class name with BTN remove frige query purpose you now I want to remove dynamic text box for this I want to write query code on button with class BTN remove on click event you in this code first we want to get it a button because it a button is same as the eared of table row but only difference is table row it is start with row textbook number of both it is same so we can easily remove that row from table now I simply remove table row on the basis of this it'd by using removed query method you now I write query code for insert data into database I write query code on button with its submit on click event you in this I use Ajax function call for insert data without page refresh in this function first parameter is URL with name name dot PHP second parameter is method with post method third is data in this parameter is serialized method for all form data into array you and last is success for display output and reset form you now I create one PHP page with no PHP first I make database connection you after making database connection first I count number of value in array if number is less than zero then it displaymessage please enter name you if number is greater than zero I make one for loop for fetching all array values and it check it has some value then it enter that data otherwise blank data will not be entered into database you now I make SQL query for insert data you after I execute this query by using Miss Glee query function you now see the output you it inserted data without any error undated store into database also thank you for watching this video you can also subscribe my youtube channel or you can also like my Facebook page or you can also follow me on Twitter

Channel: Webslesson

Views: 297,110

Keywords: dynamically add form field php, add more fields, add more jquery, add more fields jquery, add more textbox in php, add more textbox in jquery, add more row in jquery, a dd more input fields jquery, add remove fields jquery, dynamic form fields, dynamic input, add form fields, add/remove input fields dynamically with jquery, dynamic form fields add & remove bootstrap, javascript add input fields dynamically, add field dynamically to form in jquery and php

Id: rVmZXJj5lH0

Length: 11min 10sec (670 seconds)

Published: Fri Feb 26 2016