To auto-filling one field same as other, the JavaScript script is as follows −Example Live Demo    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    } JavaScript Auto-filling one field same as other Enter your primary address Address Pin Code Secondary Address same as primary Same Address Enter your secondary address Address Pin Code    let checkEle = document.querySelector(".check");    let addressEle = document.querySelectorAll(".address");    let pinCodeEle = document.querySelectorAll(".pincode");    checkEle.addEventListener("change", (event) => {       if (event.target.checked) {          console.log(addressEle[0].value);          addressEle[1].value = addressEle[0].value;          pinCodeEle[1].value = pinCodeEle[0].value;       }    }); OutputOn filling the primary address and clicking the “Same Address” checkbox −

The Symbol.hasInstance property is used to check if a constructor recognizes the object as its instance.Following is the code for Symbol.hasInstance property −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    div {       font-size: 20px;       font-weight: 500;    } JavaScript Symbol.hasInstance Property CLICK HERE Click on the above button to see if the above symbols are instance of array and custom() respectively    let fillEle = document.querySelector(".sample");    let ele = [1, 2, ... Read More

The Symbol.for() function searches runtime-wide symbol registery for a given symbol. If the symbol is found then it is returned otherwise a new symbol is created in the global symbol registery and simply returned.Following is the code for symbol.for() functionExample Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    div {       font-size: 20px;       font-weight: 500;    } JavaScript Symbol.for() function CLICK HERE Click on the above button to get the symbols.    let ... Read More

The symbol.@@toPrimitive() function converts a symbol object to a primitive value.SyntaxSymbol()[Symbol.toPrimitive](hint)The hint value specifies the type eg − number, string, etc and is an optional argument.Following is the code for symbol.@@toPrimitive() function −Example Live Demo Document    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    div {       font-size: 20px;       font-weight: 500;    } JavaScript symbol.@@toPrimitive() function CLICK HERE Click on the above button to add the object with a number.    let fillEle = document.querySelector(".sample");   ... Read More

To create a filter table with JavaScript, the code is as follows −Example Live Demo    * {       box-sizing: border-box;    }    .searchField {       width: 100%;       font-size: 16px;       padding: 12px 20px 12px 40px;       border: 1px solid #ddd;       margin-bottom: 12px;    }    .birthDayTable {       border-collapse: collapse;       width: 100%;       font-size: 18px;    }    .birthDayTable th, .birthDayTable td {       text-align: left;       padding: 12px;   ... Read More

To create a filter list with JavaScript, the code is as follows −Example Live Demo    * {       box-sizing: border-box;    }    .searchInput {       width: 100%;       font-size: 16px;       padding: 12px 20px 12px 40px;       border: 2px solid grey;       margin-bottom: 12px;    }    .animalUL {       list-style-type: none;       padding: 0;       margin: 0;    }    .animalUL li a {       border-top: 1px solid rgb(0, 0, 0);       ... Read More

To add form validation for empty input fields with JavaScript, the code is as follows −Example Live Demo JavaScript empty input field validation example Name: Submit the form empty to see the validation performed    function emptyValidation() {       var formField = document.forms["Form1"]["firstName"].value;       if (formField == "" || x == null) {          alert("Name must be filled out");          return false;       }    } OutputThe above code will produce the following output −On submitting the form empty −

To create autocompletion in a form, the code is as follows −Example Live Demo    * {       box-sizing: border-box;    }    body {       margin: 10px;       padding: 0px;       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .autocomplete {       position: relative;       display: inline-block;    }    input {       border: none;       background-color: #f1f1f1;       padding: 10px;       font-size: 16px;       border-radius: 4px;    }    input[type="text"] { ... Read More

To create a form with multiple steps, the code is as follows −Example Live Demo    * {       box-sizing: border-box;    }    body {       background-color: #f1f1f1;    }    #regForm {       margin: 100px auto;       font-family: Raleway;       padding: 40px;       width: 70%;       min-width: 300px;    }    h1 {       text-align: center;    }    input {       padding: 10px;       width: 100%;       font-size: 17px;       font-family:'Segoe ... Read More

To toggle between password visibility with JavaScript, the code is as follows −Example Live Demo Password visibility example Password: Show Password Click on the above checkbox to see your password as text    document.querySelector(".check").addEventListener("click", showPass);    function showPass() {       var inputPassEle = document.getElementById("inputPass");       if (inputPassEle.type === "password") {          inputPassEle.type = "text";       } else {          inputPassEle.type = "password";       }    } OutputThe above code will produce the following output −On checking the show password checkbox −