Google Sheets Userform - Conditional Multi Input Boxes

okay so in this video I want to add two things in one so what we want we want a conditional question I want to add another checkbox here when checked it gives you an option to add one of these input boxes but I also want to give them the option to be able to add more of the same of this boxes if they need multiple boxes to type something so for example if you have a list of attendees and you don't know how many it's gonna be you may have to do five boxes for each attendee or something like that right in this particular case because I'm doing apparently shipping and receiving what I'm gonna do I'm just gonna do a box here that says either the condition of the product is good or it's gonna say it has some issues and if it has some issues I want a box below where they can type or the issue is and then they can click on add to get another box to type another issue and have multiple boxes so I'm gonna first add another one of these check boxes below that's gonna say good condition or has issues so let's go back find the checkbox so this was the first one I'm gonna just copy that whole thing and paste it right below the ID change what it says in the box so when it's off its going to say good condition and when it's on it's going to say has issues and if you wanted to change the color of instead of danger you could use a different color I'm probably gonna use this yellow which should be the warning and all these colors are connected to your bootstrap colors so you can look into how to change bootstrap default colors and that will change those as well but for me that's good enough I have the new box so if I reload this now I have the good condition if I click on this it says has issues and what I need to happen when it says has issues I need a box to appear here where I can type what the issue is for that I'm gonna go to bootstrap so here on their forms we have our regular input box but I want this to be a little different in a way you could just use a regular input box if it's just one field but for me I'm gonna do input group because I want something that looks more like this someplace to type something and then I want two buttons so if we scroll down it's basically this I'm gonna just copy all of that generally if it's just one you were just pasted right in here however I'm not gonna actually put it in here what I'm gonna do I'm gonna scroll down and put it inside of a template so right here all the way down I'm gonna create a template element and pasted right in there this is gonna be the input now I don't think I want this label and we need to make sure we give these some sort of identifier so we can get those but I'm not gonna be able to use ID on this because if I'm gonna be adding more of these later on I cannot have multiple with the same ID so instead I'm gonna remove this ID out of here so remove this and this one is gonna say add this one is gonna say remove and we're gonna give these class not ID this will be remove input now we're also going to give some sort of class to the actual input itself we do need an ID for this template though so that should be and this should not show up on a page at all because whatever's in template that's hidden so if I go back and reload this should look exactly the same as it was before and if I click on this nothing is gonna happen and that's what we're gonna take care of next so what we need to do when you click on this we need to add whatever is in that template in here below right before this button below this checkbox we're gonna add a div and we're gonna give it some sort of ID so we can work with it so what support happen is that when we click on this has issues it should populate this issues div with the content of that template that's all the way down there so let's create a function for this first alright so the first thing we need to do in this function we need to first find the elements we need to work with one is gonna be the template the other one is gonna be that issues button over here so check box so let's go find those so the template IDs input template now we need to make a copy of the contents of that template now this will allow us to get the contents of that template what's inside of that template copy all of that to an HTML element or node whatever you want to call it and we want to then place that inside of this issue's div so we're gonna paint child so now we need this whole thing to run when we click on this good condition checkbox now because this is not a regular checkbox I'm gonna have to go look up in there Docs and see how do we trigger that checkbox change so let's go check that out should be a fence there this so it says listen for events on the input type checkbox' directly and this is an example of that okay so they're using jQuery again I'm gonna try to do this without jQuery and if it doesn't work because of this plug-in we may have to use that let's just go and try to assign it with regular event listener to this checkbox well not this one but the one we have so I'm gonna go here and add an event listener and again that will be the change event which is what it said here and it's gonna be this function add input now the ID of that is this right here which is called condition so I'm going to save this and see if this works okay so let's click on this good condition ow that did it alright that's a bummer so I guess we're gonna have to use their method which I really don't want to do but I suppose I'm gonna have to if I don't want to spend way too much time on this so I'll just copy this go back to here and assign this over here now for us this is going to be that condition ID and because of this we're going to have to do the pound key and we want to run our function in here so I'll just go right in here instead of doing all of that I want to run this function add input just like this let's go test this and see if this one works you let's see you know what I think I made a mistake here this should be clone node not copy node so let's check this again so that works okay now the reason I needed this function here is because I don't want to add this box every single time we click on this we only want to add that see if I reload this we only want to add that when we click and it turns on so to do that let's do a conditional here we'll say if and in this I'm gonna do if this dot checked then we'd like to do this and this in this case will refer to that input box so let's save that and see what happens that adds this I turn it off it doesn't add another one but if I turn it back on that's on again so it's gonna turn it back again so it's gonna do this right now at least now you can see how we're now adding a new line when this is checked and in this case this refers to that element that was clicked on now what I also want to do if you turn this off I want to just clear all of this because then we don't need all of this boxes so let's just create a function for that and we'll add it as an else statement right in here so I'm going to go here create a function and all those inputs are within this issue's box I'm just gonna keep that simple I'm just gonna grab that and do inner HTML of that to be nothing so just clean what's inside of that box and then what we could do we could just run this function if that's not checked so now what should happen if I save this and go back and reload this thing see if I click on this that adds the line if I uncheck it the line is removed if I click back on it that comes back and now we have this conditional box that shows up right below this add and remove takes a lot of space maybe we'll do plus minus instead of doing that let's go check what we have for that okay so they're suggesting to use other libraries let's just find a CDM for that let's just grab a link copy that and this is the website that I'm getting this on so bootstrap CDN dot-com slash font awesome font awesome actually no fonts anyways we need to place this in our styles to make sure we could use those and that's our fonts awesome I'll put a link in the description for this too so once I have a copy of this I should be able to use those icons so all I need is plus and minus pretty much here it is there is the code I'm gonna copy that by clicking on that apparently go back to this and find that input ad instead I'm gonna paste that Fonz awesome thing and we also have to do this for the - icon copy that HTML go back and for remove I'm gonna put this I always thought this should be FA why is it FAS looks like they changed something but let's go check what happens so if I click on this that didn't load maybe I was right this should be FA copy that reload this yeah we have our plus and minus now so that now gives us a lot more space here to work so the way it is supposed to work well right now this works but I want to be able to click on this plus and add more lines in here so let's see what this plus is so if I go back and look at that Plus that Plus is what comes from our template again see we gave that button a class add input and the reason it's not ID because when we have multiple of them we cannot have multiple of them with the same ID so we have to scroll down and assign events to this however there's gonna be a little problem we cannot assign events to elements we don't have yet because when the page loads there is not gonna be this to assign an event to the plus button that plus button is gonna basically show up later so what we gonna have to do we're gonna have to assign it to the parent that holds this things that is available let me comment this out so what's the parent for all these input boxes well that's gonna be that div that we've created right here issues that holds all of those and we should be able to track clicks on this to handle this so this is the ID we need to track so when we click on that parent we want to run a function and again when we click on it we're gonna run a function and we're gonna call this function after input button clicked should probably have better names for this but that should be good enough so I'm gonna create that function now the thing with this function is that this is gonna be registering all the clicks on that parent and all the children inside of that parent that we put inside of it but we need to figure out which one was clicked because we have multiple of those at some point we need to know which one was clicked on so we're gonna do that by using this event that's being automatically passed to the thing that was clicked and this event let me actually move this on top here we're gonna need this class now this event is gonna have a target property and that target will refer to what element was clicked on I have a video that covers this in a lot better detail one of my HTML videos if this is not clear for you I would suggest watch that so you understand how this process works but that target is gonna have a class list and in that we can use this contains method that can check if it contains a particular class so we'll check if that element that was clicked loan contains this add input class then we're going to know that the button that was clicked is the plus button so we're gonna say if this is true which is what this is gonna return then we know that we need to add another one of those inputs which is that same function we've been using all along that add input function like this so let's go check what happens now I'm gonna save this go back and reload click on this click on the + Oh interestingly enough if I click on that actual little plus in the middle it doesn't do anything because that's that icon and if I get on this part it works so we need to handle that situation we can either also check for that plus thing as a class so we can say if it's this or it's this other one then let's do this we might also be able to just use matches instead of contains and use CSS so what if we try to do matches and then here it's gonna be CSS so anything that's inside of that class add input and with matches we also don't need a class list so it's just the element matches this CSS pattern so select a pattern let's save this and try this again and see what happens so I'm gonna scroll down click on this then click on that a little plus sign that worked now let's see if it works if I click on this outside now it's also not working on this - so that's basically anything that's inside of it not including the element itself so we might be able to just do something like this do this say the element or if it's inside of that element let's save this and go back and reload this ok click on this that opens click on this that runs click on this that runs click on this - or this it doesn't run clears that plus plus good so now we have a + button now the second thing we need to handle is the minus button because we also want to be able to remove these so if they click on this - we need to get rid of this line so the way we can do that is that again we can check if that element has that remove class so we'll do else if statement here and I'm just gonna copy this line and let's go check what the class is called so remove input so if they do click on that remove then we want to delete that particular element so the way we can do that is again e dot target is going to be well in our case that's going to be this minus sign now we don't want to delete just a minus sign because if I do that it will just delete the minus sign so let me just do this so you can see so right now if I do this hit save go back and reload this see if I click on this it adds this if I click on a plus sign that adds something now if I click on a little minus see that disappeared the actual - if I click on the box the box will disappear so I'm deleting the actual minus sign but I want to delete this whole line that line let's see how we're gonna ID the actual line that's in there if I go back to my template so we're going to be clicking on this or this the remove button so once we click on this we don't want to remove the actual button we want to remove this entire input group that's on top here that's holding this thing now I don't want to keep this input group I want to give this a better class name so we're sure that's one of those things so I'm gonna say input line so something unique what we're gonna do gonna have to find this parent with input line and get rid of it I'm gonna scroll down so I think we should be able to find that by using closest and give it that class and just remove the closest one so if I save this let's go check what happens so that doesn't work maybe I should just learn how to type let's save this and let's try this one more time good let's also make sure we're deleting the right box so if I just type some things here and delete this one that's good this one this one this one this one so now we have the option to delete all of our inputs I'm not sure what should happen if we delete all of them maybe we shouldn't allow to delete all of them maybe we should only allow to delete every single one other than the last one and the last one you would have to click don't have any issues so it removes all of them so maybe we should do that maybe we should check how many of these we have before we actually delete them so the way we can do that we can just find how many we have so again we gave it this input line class and we should be able to check how many of those we have available so let me just put this in an if statement like this and I'm gonna say let's count how many of these elements with this classes we have and we should be able to do that by doing something like document get elements by class name and notice elements not element so the class name is input line no dot because this is not a CSS selector in this case once we get that it should have a length property so we'll say if the length is greater than 1 then we want to actually run this otherwise we don't so let's save this and see what happens I'm gonna go back and reload this thing scroll down this hit plus hit minus - try to do another - doesn't let me so - - - - - the last one we cannot remove you can do that by turning this off so I think that's pretty good I don't like this text in here maybe we should change that and I also want to add a little spacing between all of these things so to do that let's just go take care of that really quickly here so this is that div I'm just gonna do a little margin so margin bottom I'll do one to see what that looks like what was the second thing I was trying to do yeah change the text says one issue per line okay so there is a little spacing there I think that's enough for these but I also want this button add to database lower than this so we need to make sure that this last one has more padding in the bottom so let's go find the last one we're gonna find the last one using this input line again and use a little bit of custom CSS which I think we've done already someplace in here so we're gonna find that input line and find the last child which means the last one only and for that we're gonna do margin bottom let's try this and see what this looks like that doesn't look right so it seems like bootstrap writing this I'm just gonna try to overwrite this so that's good enough so that will overwrite their class let's try to see what's a good size here hmmm I think that's good enough and if you remove this it looks good alright so we were able to finally add this whole UI thing so far all we did is just the user interface we just made this option for people to type multiple things now the last thing is gonna be to grab all of these and send it to our spreadsheet and that's what I'm gonna do here so the way I need this to work I want to basically just keep this blank when no issues are selected here but when somebody does do issues then we grab all of this information and maybe we'll just comma separate that and put that in the box so let's take a look in our template and see what we called those inputs so this input we called it issue input that's the input that has the text so what I need to do after the button is clicked here so we need to find all the elements that have this issue input class there is gonna be one issue though possible is that there might be none as well so first let's just go and try to find them so we're gonna do that class search again we're gonna do get elements by class name and this time we're going to use this class name to find those elements if the length of this is zero then there are no input boxes so I'm going to create a variable here and I'm gonna say if the length of this equals to zero then you could do whatever you want here so you could say no issues but for me I'm just gonna do a blank string like this : otherwise what I want to do I want to get all this issue input boxes and join them with a comma now this is gonna be a note list and I want to basically loop through that note list here so I'm gonna try to use the map method but because this is a note list we're gonna use a Rea prototype dot map and we're gonna use it over that note list and this is gonna accept a callback function so I'm gonna do the function right in here so what this function is going to do it's going to accept each node and for each node we want to return the value of that and then once we get all of those this should return us an array and since it's an array we should be able to just join that with comma as a separator so I think that should work I'm gonna have to test this to see if this works we may have to come back and address this but for now let's just assume I didn't make any mistakes there and take this and pass it as another argument to our data and accept it in our back end so that's this another column from raw data save this let's go back and check if this whole thing I did here works so now let's click Add to database and see what happens so we have a problem we have to go and fix that I forgot to do the call of course that's what we need to do here let's save this go back and try this again okay we have our common text in here that's good news we also probably need to clear these boxes now and by clearing that we probably have to just delete all of them and said this has issues back to nothing so what I'm curious about if we just set this back to nothing will it automatically trigger this change and remove that or not so first of all let's just check this back to good condition so we should be able to do that by simply using that same thing we did before with our checkbox so the checkbox is cold now I think condition this video is probably getting really long but we're almost there condition so let's save this go back and reload this and again types number type some date is what happens when I click on this button do I have a third box no so that seemed like it triggered the whole thing and removed all the options automatically for us which is good so we don't have to address removing them separately let me just test this one more time to make sure we don't have any issues you that works just fine let's also make sure those input boxes we're adding through here are required because I don't believe we did that so if I go here this is that input box I'm just gonna make that required and just because we make it required here it's not gonna require it when the box is not checked because there's not gonna be any input boxes in there so if I save this and reload this we should still be able to send this information without checking this box and click Add to database so that adds the line we're good now let's also try another one and do something with this so now we have two now if I click another plus click Add to database see I get the error we cannot add that because this is empty I'm gonna remove that one and click Add to database successfully added the row we have DS it's very long but comma separated in the same field see that works and that should be it thanks for watching please subscribe and I'll see you next video

Channel: Learn Google Spreadsheets

Views: 19,157

Keywords: Google Sheets, Userform, form, google, Conditional, input, web app

Id: UtOXKm5prQI

Length: 34min 17sec (2057 seconds)

Published: Fri May 29 2020