Web Development Articles - Page 533 of 1049

To sort an HTML list using JavaScript, the code is as follows −Example Live Demo Sorting list example Click to sort Giraffe Camel Dog Lion Cheetah Cat    document .getElementsByTagName("button")[0] .addEventListener("click", sortList);    function sortList() {       var list, i, sortFlag, LiEle, sorted;       list = document.querySelector(".animalList");       sortFlag = true;       while (sortFlag) {          sortFlag = false;          LiEle = list.getElementsByTagName("LI");          for (i = 0; i < LiEle.length - 1; i++) {         ... 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 a file on upload button with HTML, the code is as follows −Example File upload button example Click on the "Choose File" button to upload a file: OutputThe above code will produce the following output −On clicking the “Choose file” button −

To turn off spell check for form elements, the code is as follows −Example Live Demo Disabling Spellcheck Example Your Name: About Yourself Type wrong spelling in the above input field to see spellcheck in action OutputThe above code will produce the following output −On typing something in the input fields −

To disable autocomplete of an input field, the code is as follows −Example Live Demo    input{       font-size: 18px;       padding: 10px;       margin: 10px;       border:1px solid grey;    } Autocomplete on/off Example First name: Last name: Type in the above fields and refresh page to see autocomplete at work OutputThe above code will produce the following output −On typing something in the above fields after submitting the form one time −

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 −