Save Consignee Checkbox with airSlate SignNow

Save countersign checkbox

all right let's take a look at this local storage webpage it's got an mp4 video file playing in the background muted and we've got three field sets here and instead of the legend just being a caption we have a button inside of the legend tags and then inside of the fields that we've got a table and each of these tables have table rows and each table row has a table header a single table header that goes from left to right I have a checkbox inside the table header as well as a label for the check check box next to it and a text input finally three things in the table header and then I just copy and paste the duplicates until I have seven different things here that I want to keep track of my check box will highlight and strike out the label for the check box and you can type beyond the width of this text input if you so desire when you click the Save button for two seconds it's red and then it jumps from the save function to the load function and at the end of the load function it actually turns the text blue so we see this information being saved and loaded if you want to read all of this if you happen to type in too far you just have to hit your you've got it up down left and right arrow on your keyboard you could just do that to reach the end of that if you want to you probably will never need that much of a note for something like this simple little project you basically just put you know how much you paid and what date you paid it it's probably all you really want to do for that all right what that being said another thing I'd like to mention is every single one of these buttons calls the same save function so if you save something here you can come all the way down here and hit this button it doesn't matter it's going cause the same save function to fire and then again at the end of the save function it fires the load function let's take a look at the code here's my folder I have the single HTML file and I've got the tiny fireworks taiko and fireworks type BMP which is just a little bit bigger and then my July 4th 2017 dot mp4 file that's all that I have I kept my CSS and my JavaScript inside of my HTML file for convenience so let's take a look at the code all right head HTML head title Bill check boxes here's the link to put a little image next to that title right there so here's the title bill check boxes and here's the little fireworks like on that I created and opening style tag I'm going to go over these Styles really quick I'm just gonna highlight the meat of the styles so for the body and the HTML everything in these curly braces style eise's the body in the HTML so there's three styles there for the div with the idea of wrapper there's two styles and here's some styles that I commented out because it doesn't seem that I like I needed them but I didn't want to erase them just in case in the future my page starts acting funky at least I'll be able to just take the comments off here and have this code again okay all of this is for input and in square brackets type equals checkbox you've got like four different statements that do the same thing and basically what that's doing is scaling our text box up by two so that they're fatter and then there's also a padding and a margin left set as well here is for input in square brackets type equals check box plus label so we have a padding left at a padding right side this is for the class strikethrough : checked plus label we have a text text decoration set to line through and background color set to lime so that kind of lets you know that when you click this and you see the lime and the strikethrough this is the style that has something to do with that the field set has four different styles set to it and the field set again is basically the the square itself and the legend of the field set is so where the button is inside of for the th which is a table header I told you for every table row I have nested inside of the table row a table header and nested inside of the table header if we've got our check box our label in our text input area so these are the styles for the table header we've got three buttons there's the styles for the buttons the background has a linear gradient from light green to green and you can kind of see how the top of the button is lighter than the bottom of the button linear gradients do that for you and then we've got the label and the label again is these labels all in the middle here the coincide with the check boxes now if you want to have all of your labels the same width you need to set the display to inline block and then you can set your width to whatever pixels that you want all right so that is everything that we have for the styles so I'm going to come up here and close the style tags up to condense my code there's the end of the head tag so I can close my head tag as well the opening body tag has the onload event set to the load function so there's two times that the load function gets called one when we close out of the page and we go away and then we come back another day as long as you're coming back in the same browser that you saved your information you'll still have that the onload event calls the load function that we'll get into toward the end of this video but also when I click my buttons here it calls the save sum function and at the end of the save function we have a little timer that in two seconds it calls the load function there's two different things that call the load function all right div class equals full screen - BG inside of that div we've got our video so here's our opening video tag and here's our closing video tag in our opening video tag you see that we have the words loop muted autoplay and post or equals and there's nothing inside of the double quotes I don't have posters set to anything but if I do want to make an image to show in case my video doesn't work I want to have a post or show in the background that's where I would put the Earl to that poster to that image I would put the path of the image right in there class equals full screen - PG underscore video then we have our source inside source this is if you had a WebM file I don't I'm only using this line that July 4th to a 17 dot mp4 the that's what you see playing in the background right here but if you want to try three different file types for different purposes that's how you would do it this is this is how you would source your WebM this is how you would source your mp4 and this is how you would sorcerer OGG file there's the ending video tag and the ending div so we're done with that class and I mean I'm sorry that div now let's check out our give with the idea of rapper the rapper holds all three of these field sets but basically are the meat of this project so here's the opening fieldset tag that goes from line 127 to line 182 all right after the fieldset tag we have the legend tag tags and inside of that instead of having just words to be a caption to this whole field set we have a button button on click equals save so we're calling the save function so when you click this button or this button or this one down here you are going to call the save function we'll look at that when we're done with all this on the button it says say February 2019 as you can see there's the ending button tag ending legend opening table so the table goes from line 1 31 all the way to find 181 alright from line 132 to line 138 is our first table row that's this first row up here inside of the table row tags we have table header tags inside of the table header tags we have three things the first thing is our check box and this is the code to make my check box input name equals Feb Brent value equals vibrant class equals strikethrough type equals check box I have my name and my value set to the exact same variable called Feb rent and also when I create my label for that it also says for is set to fabric as well and that's my label label for vibrant the name read the word rent on the label and the ending label tag and then lastly we have the text input input type equals text ID equals 1 ending th which is a table header ending table row so you just take this and copy and paste it for as many rows as you need for your table maybe you only want three rows for your table maybe you want fifty two rows for your table whatever the case may be you just copy and paste this and make sure that your name and value and label for make sure that all of these match this this and this and they can't be the same as this they have to be unique to your next row of information and then when you get to your next text input make sure that you don't say ID equals one again you need to say ID equals two so this was our first table row and here's our second table row it's a lot of repetition really just change the names of things alright with that being said I will take you all the way to the very last table row of this table which is my savings table row table header check box label for the check box text input ending table header anding table row ending table tag ending field set now that you have your whole field set with all of your table rows with your check boxes labels and text inputs you can just take that whole thing from the opening fieldset tag all the way down to the closing fieldset tag and copy it paste that for your next field set and then just sit there and meticulously go through all your naming conventions then do it again for your third I only have three field sets of information here you can have more mine takes up bills for three months that's good enough for me at this at this time I've made entire calendars that went for the whole year I didn't want this to be that cumbersome alright so after your less field set there's the ending div this ending div is for that whole wrapper that wraps everything see div ID equals wrapper it's highlighted so we can close the wrapper now we are going to look at the JavaScript and in the JavaScript we're only going to look at two functions the save function and the load function I don't care about the remove my stuff function because I'm not using that function here but see our script tag ends at line 382 after which the ending body tag and the ending HTML and then the whole project is over at that point what did I do okay so before we look at the functions we create three variables the first variable var I semicolon we're not setting it to anything we're just creating it the second statement is here var checkboxes equals document dot query selector all parentheses and single quotes input and in square brackets type equals check box and close that whole thing up with your semicolon so this variable check boxes will be identifying all the check boxes on the page we're going to do the same thing for our text inputs but we're calling them text boxes even though they're not really boxes our text boxes equals document a query selector all parentheses and single quotes input type equals text and square brackets and then semicolon and this has commented out so you don't need to worry about that I'm not using that variable all right so let's look at the save function this function gets called only when we click one of these green buttons the first part right here is when we're saving our text input that's all these different text inputs right here like right now these blue items have already been saved but if I were to go oh I want to put some stuff there there you see it's currently black it's default black right now but there's a value in there it's not saved yet but there's a value in there so let's look at the for loop for this for I equals one semicolon I less than text boxes dot length semicolon I plus plus so the next thing we're going to do is look inside of our curly braces the first statement is this VAR value equals document decade element by ID parentheses I dot value semicolon the next statement is this one local storage set item and in parentheses key which is in quotes plus I comma value semicolon now when you use local storage set item and the parenthesis you are creating a key comma value pair when we go to retrieve this information when we load it we're going to use local storage get item and we're going to provide the key when you set it you give the key and the value when you retrieve it you just use the key now the next line we have is an if condition if value now here we have values that have already been saved they're blue we have values that I just now typed in here they are the default black so if value well it's true that we have some values in here and what's going to happen is this statement right here document dot get element by ID parentheses I dot style dot color equals right because there's values and all these different text inputs they're going to turn red the ending if block the ending for loop and now that's all that we have to say about our text inputs let's also do what we need to do for our check boxes so for our check box inputs we have a for loop as well for I equals 0 colon I less than check box at length colon and I plus plus the state this one single statement for the for loop that deals with saving check boxes and this is a local storage dot set item and in parentheses check boxes square brackets I dot value comma check boxes square brackets i dot checked so when we were dealing with the text areas we were using parentheses i when we're dealing with the check boxes we're using square brackets a slightly different but not that different all right so that's everything for the for loop for the for the saving of the state of each of these you know let's let's add a couple more while we're at it and then this part right here if our timer equals set timeout parentheses load underscore empty parentheses in single quotes comma 2000 what this does is once the code gets to this point in two more seconds it's going to call the load function now as you can see in the save function we seen something that talked about the color red but we didn't see anything that talked about the color blue that's because the color blue happens in the load function but this right here is calling the load function so we bounce we get to the end of the save and we bounce to the load so with that being said and there's the end of the whole function the curly brace to end the whole function block so that being said I'm going to close the save function and let's take a look at that load function we did a couple of things for the check boxes and we also did things for the text inputs we did a loop for the check boxes and a loop for the text inputs for the save function we'll go do the same thing for the load function so function load underscore empty parentheses let's look at the check boxes first this time I'm doing the check boxes loop for and in parentheses I equals 0 colon I less than check box at length at colon I plus plus we're going to do this single statement and it looks like it's more than one statement but there's only one semicolon here this is only one statement it's just taking up three lines check boxes square brackets I checked equals local storage target item parentheses check boxes square brackets I dot value triple equals true in single quotes question mark true : false semicolon so it's going to go through all these check boxes and see what it needs to load now that now we're done with all that information that we needed to do for the check boxes let's check out what we need to do to load the anything that's been saved in the text inputs of course we've got the same for loop for I equals 1 : I'm in semicolon I less than text boxes thick dot length semicolon I plus plus everything is going to happen between this curly and this one the first statement is this 1 bar stored value equals local storage target item parentheses key in quotes plus I so here we're using local storage target item and we're retrieving it by retrieving the key then if there's a stored value which there are stored values here and I haven't hit the Save button yet but once I hit the Save button these items that are in black font they will also be saved items so I might as well hit that so now they're all read for a couple of seconds and then when you see them turn blue that means that we have finished the load function as well so now there are stored values in here all those blues are stored values if stored value then this happens document dot get element by ID parentheses I dot value equals stored value and then here's that blue coloration right at the end of the load function document dot get element by ID parentheses I dot style to color equals blue and blue is and double quotes there is the closing curly brace for the if block here's the ending curly brace for the for loop block and here's the ending curly brace for the whole load function so let's lit red there and it's lit red there so I can close up load function I'm not using the remove my stuff function at all the ending script tag ending body tag at ending HTML tag so with that being said we've finished up all the code here and again I can add something here and here and you and hit any of these buttons to make it happen because they all call the same load function