Save Initials Placeholder with airSlate SignNow

Save initials placeholder

hey devs welcome to web style press if you are new here consider subscribing and hit bell icon domains document object model dom treats html as a tree structure where each node is an object representing a part of document when you request a web page via web browser web browser loads its dom in the dom there are nodes or objects that can be manipulated and changed via javascript or javascript libraries by changing dom you make website interactive for users users can interact with websites website takes input from user and reflects changes in this video we are manipulating dom to change placeholder for input field this technique is helpful in case where you use any plugin or external library that throws a dynamic form with input fields in your website now you don't have access to the input field to change it in your html structure you can still target the element and apply required changes let's say that external resource loaded an external form with fields after it is loaded in dom you can target it by class id or tag to change its attributes placeholder is an attribute of input here is how we will change it via jquery i have got this html document and i have linked bootstrap via cdn.js and then i have linked jquery at the bottom and after that at the end i have got custom.js linked to it this is my custom.js file we will write scripts in this file and for this and index.html this is our output so we are creating two input fields here we will use bootstrap for these two input fields let's use container and then we will have form group and inside form group we will have our input field we need two input fields one will be for the text and it will be the name and second will be the email field so let's use class so it will be form control and form control lg we will use bigger input field and then its type is text and its name is name and let's use placeholder and the value for placeholder will be enter your name let's copy this input field and here the type will be email and the name will be email and the placeholder will be enter your email so this is our simple html and the output for this will be like this enter your name and enter your email now you have got these two input fields with placeholders of enter your name and enter your email what if this form is loaded via external library and you don't have access to the html but you want to change these placeholders value of these placeholder enter your name and enter your email instead enter your name let's say you want to use full name and for the email field instead of enter your email you want to use email address as a placeholder value here what would you do we will use jquery to manipulate the dom when this document is loaded we will change these placeholders via jquery and for our script we will write our script in custom.js so this is our custom.js file and here this is the jquery sign and that will initialize jquery so document dot ready so when dom will be ready then function and then inside this function we will manipulate the dom to change those placeholders so we will need a selector a selector for this field and selector for this field we will need to select these fields to target these placeholder values so first is the first lecture will be jquery and input dot attribute an attribute is placeholder and we want to change it to this value full name save refresh the page and as you can see the placeholder for both these inputs has changed and it is reflecting full name in both fields we don't want that we want to target these individually so right click inspect element so let's inspect these this field and its name is name and the name for the second input is email so let's target these so input name is equal to name and then let's copy this line and here let's select input name email so here for the input email we want its placeholders value to be email address save refresh so here is full name and email address and if we refresh the page you can see the placeholder values were different and then the dom was loaded and this change was applied for these two fields so this is not the dom this is also not the dom inspect element this is the dom when you call a web page its code is translated and the dom for that is loaded this is the dom so as you can see this is the input now it is reflecting full name and this is the second input and its name is email that we targeted and in its placeholder it is showing that it is email address and if we refresh the page you can't notice the changes because it is very lightweight basic page and it has a relatively small content so it loads quickly but if i comment these two save reload the page and these were our initial placeholders enter your name enter your email so when we applied this script for the page and save refresh and then these placeholders changed so this is how you can manipulate dom even if there is some html that you don't have control over and let's say it is loaded from somewhere else it is loaded dynamically you can still change attributes for the tags and anything in it according to your need so that's it for this video guys i hope you like this video if i missed anything or you have something to add you can comment down below ask questions related to this topic if you haven't already subscribed subscribe to the channel and hit bell icon to receive updates join us on social media links are in the description below stay tuned for more updates i will see you in the next video