ADD DYNAMIC FIELDS TO FORMS WITH JQUERY AND PHP - PART 1

hey everyone welcome to PHP basics my name is Shaun today we're going to be looking at something a little bit different so obviously I have a form with a make model and serial number and whenever I hit submit that's going to be inserted into my test database to a table called inventory where I have three columns a make model and serial number currently I've only got one record inserted in here now this form is designed to where I can add multiple instances of that form not necessarily instances more like copies and I can add those and I can also take those away the purpose that I built this was because oftentimes I'm inserting multiple inventory items of the same product type or if you ever have to enter multiple instances or multiple fields into a database and you don't want to go one page at a time or you don't know how many you're actually going to have to input this gives you the ability and the functionality to add as many or as little as you want now what I've also done is set the software if I make the type an HP and the model and 8,300 I can now double click on one of these other fields and it's going to populate that field ok whenever I hit submit and all the forms are filled out correctly it's going to insert all of those into the database simultaneously checking for how many there are for errors for each for each set these get passed through as an array and it will parse that out through PHP so this video is going to be broken down into two parts the first part is just building the form doing the jQuery making it look pretty right the second video is going to be working with the PHP portion of it getting it into the database and that's a little bit different as well so let's jump right in and I'll show you how I did this so let me wipe out what I've got and go ahead and build the initial structure of the of the page right so we'll have some PHP we're going to have our HTML tag and will have head closed the head and then will have the body tag and will close the body tag as well okay now the first thing that we want to do is reference jQuery and to do that what I'm going to do is borrow this from Google if you go to Google and you just search Google jQuery API it should be the first link hosted libraries and we're just going to grab this little snippet of code right here now we can do is just plug that into the head and we'll go ahead and start on our form so the form is pretty typical method is equal to post now I want all this to be contained in a linear format so I'm just going to throw it inside of a div tag this is going to be our wrapper or our container will say ID equals container and we'll have a make and this input type will be a text and the name is just going to be make and then we'll do that for the other two the model and cereal now below the div tag I'm just going to go ahead and throw in my input for the submit button type will be submit and the name is just going to equal submit as well let's go ahead and do a paragraph break on that just to drop it down alright so if I take a look at this as it is it just looks like that which is fine it's what it's supposed to look like and now let's go ahead and add that link to add more this is just a standard HTML link and we're just going to give it the anchor tag there and we'll give this an ID call add and we'll just say add more okay so now we have our completed form we've got our make model serial number our add more link and our submit submit button which currently both do absolutely nothing so that's where jQuery comes in underneath our referenced script let's create a new one the first thing that we always do whenever it comes to jQuery is check to see if the form is right or the page itself is ready right so to do that we'll do a dollar sign in the open parenthesis document dot ready and then inside of this we're going to do a function we're going to be sending this to the event handler so we'll reference that there and that's it okay so typically what I do is I try to establish the structure of how my code is going to go I want to place four variables we need a spot to add rows to the form a spot to remove rows from the form and then also to populate will save values from the first row that double click thing that I showed you earlier okay the variables this is going to be like if we want to establish a max rose if there is any HTML that we need to throw into a variable things of that nature okay but for now what I'll do is we'll just say based off the ID of AD which is this little guy right here whenever you're referencing an ID in jQuery you use it using the hash tag or the pound symbol function is going to be click and we're going to create a function in here the same way that we did before meaning we're going to send this to the event handler it will just say alerts just to kind of show the functionality of it so if I go back and I reload my page and I click on the add more button I'm going to get an alert box okay so that shows that the functionality is actually there so let's get rid of this now if I was to say and we're going to what we're going to do is a jquery function called append we're going to append more of these fields to the bottom of this div tag which is currently called container right so let's reference container and we're going to use the append function and if i was just to say hello then each time that i click this it's going to show hello alright multiple instances of hello so essentially this is where all the HTML for the next for the child rows are going to go however I really don't want to put it in here because it's going to look sloppy all right so what I'll do is up here my variables I'll just create a variable and I'll call it HTML right now I could just clone this element here but then I'm going to get the add more link and I also need to change some of these fields around in fact what I think I'll do is I'll go ahead and give these IDs now call this make call this ID equals model and then ID equals serial and these are going to change whenever I insert the next rows so what I'll do is I will just copy and paste that into here and then make my changes accordingly for one this has to be on a single line right so I'm just going to backspace up to make sure that these are all on a single line and then I'm also going to say we'll say child make the ID will be child model and then child serial and then instead of ad we're going to have remove and I'll just symbolize that with an X okay to clean this up a little bit I will add a paragraph break and I'll encapsulate this inside of a div tag and now all I have to do is reference the HTML variable okay so let's refresh the page and see what that looks like great so now we can add as many of these things as we want but we're still not able to remove them yet okay so let's do that next now with the click function it's adding a function to the page once it's already loaded which means we're just adding content to the page however you can't do that if you want to take things away from the page you have to use what used to be known as the live function but has been turned into the on function which means whenever you perform a certain action some other action happens in real time okay to do that we're going to have to reference the container itself because that's where the element lives so we'll say container dot on and this is where we actually reference the action first which they actually click the element is going to be the remove element which is the ID here and then whatever our function is going to be so we'll say function and likewise this is going to the event handler and all we'll really have to do is reference the the remove or will just say this dot parent because we're going to be removing the entire div tag so we'll just reference div dot remove okay stare at this for just a second and think about what this means okay our master element is the container element right everything is contained inside of this div tag okay inside of this div tag we have another div tag with this information okay whenever we click on the Remove element which is this X then it's going to perform this function referencing this which is removed and then we're going to reference the parent object to that which is the div tag and we're going to remove the whole thing okay that may not make sense but just study it just a little bit and you'll understand it alright so now let's go ahead and add and then remove okay so now we can add remove as many as we want however you may not want to be able to add a hundred of these things you may want to simplify and only allow the user to add so many right so to do that we're just going to use simple if statements okay so what I'll do is inside my variables I'll have a variable and we'll just call it max rows and we'll give it a value of five for now right and then the first row number we'll just say their x equals one okay so now inside the click function we can say if X is less than or equal to max rows then I then append the next row all right and then we can just say X plus plus and then close that if statement okay let's give this a try 1 2 3 4 5 and that's all I can click so now I have a maximum of okay I broke something let's see I can add but I can't add after I take them away and that's because once I remove that field I'm not adding back to the number of available rows to add I'm just using them all up right so that's simple whenever I come to remove the row all I have to do is do X minus minus which will subtract 1 all right so that should one two three four five let's remove a couple and then we can add them back all right simple as that so the only thing left to do for this section is to show how I'm duplicating the data and that's pretty simple as well notice how I have ID make model and serial number this is the to this particular field all I have to do is grab the value of this field and add it to the child field okay to do that once again I'm referencing the container where we're going to be using the on function as well and this time the action is going to be double click all right and we're going to be instancing the the make first so we'll say hashtag child make and then we'll do a function all we have to do is this dot Val is going to equal the value of whatever the original field said so what we can do is we'll say make dot value now I know there are a lot of parentheses in here and it's starting to get a little convoluted but essentially the value of this is going to equal the value of that which should be fairly simple to understand so let me go back in refresh my page I just say HP then I should be able to double click and it's going to do that there so for the model all I really have to do is copy and paste the same code and change the make to the model okay and then of course I could turn autocomplete off and required and things of that nature here as well but let's give it a shot and see what happens so I bet my max number of rows how I put in elite 8300 well now I can come in and double click that or I can do del and double click and it's going to populate that as well as some that's pretty much it for this part of the video on the next video we're going to show how to get this data and actually submit it to the database so I'll see you there

Channel: phpBasics

Views: 48,326

Keywords: php, php basics, php lesson, php tutorial, dynamic form, dynamic table, dynamic php, jquery, jquery tutorial

Id: kBAPbCDGCuY

Length: 17min 2sec (1022 seconds)

Published: Tue Dec 27 2016