Dirk Harriman Banner Image

 

Notes Javascript - Form Input

  • Quick Reference

    Flow control, Iteration, Functions, Errors, Events, Data Structures, Classes

  • Javascript Overview

    Language Details, Variables, Hoisting, Scope, Data Structures, Literals, Special Characters

  • Control Flow

    If Else, Switch, For Next, Do While, While Do, For In, For Of with Arrays, Break, Continue

  • Error Handling

    Throw Esception, Error Object, Custom Errors, DOMEsception, Try Catch

  • Functions

    Declaration, Function Expression, Scope, Recursion, Anonymous, Closures, Immediately Invoked Function Expression, Namespace, Nesting, Arguments, Parameters, Arrow Functions, Predefined Functions

  • Expressions & Operators

    Assignment, Destructuring, Evaluation & Nesting, Comparison, Arithmetic, Bitwise, Binary Switches, Bitwise Logical, Bitwise Shift, Logical Operators, Short-Circuit Evaluation, BigInt, String, Ternary, Comma, Unary, Relational, Spread Syntax, Short Circuiting

  • Numbers & Dates

    Number Object, Math Object, Date Object

  • Text Formatting

    String Literals, Extended Characters, EC Table, String Object, String Functions, Template Literals

  • Regular Expressions

    RE Methods, String RE Methods, Building REs, Character Classes, Groups & Backreferences, Sample Code

  • Collections - Indexed & Keyed

    Arrays, Array Methods, Multi-Dimensional Array, Keyed Collections, Map, WeakMap, Set, WeakSet

  • Keyed Collections

    Map Object, WeakMap Object, Set Object

  • Objects

    Objects vs. JSON, Creating, Enumerating Properties, Inheritance, Getters and Setters, Examples

  • Classes

    Declaration, Constructors, Private Fields, Getters and Setters, Static Properties, Inheritance, This and Super

  • Promises

    Defined and Illustrated, Usage, Chaining, Arrow Functions, Nesting, Examples

  • Iterators & Generators

    Iterators, Generators, Generator Functions, Examples

  • Meta Programming

    Proxy Object

  • Javascript Modules

    Structure, Importing, Exporting, Import Maps, Remapping Module Paths, Scoped Modules For Version Management, Applying, Difference Between Modules & Standard Scripts, Name Conflict Avoidance, Creating Module Object, Modules & Classes, Aggregating

  • Client-Side Web APIs

    Defined, Usage, DOM, DOM Manipulation, Shopping List App

  • Closures

    IIFE, Closure Examples

  • DOM

    Document Object Model, Create Element, Remote HTML Doc Frag, Dynamic HTML, Web Component, DOM Methods

  • JSON

    JavaScript Object Notation, Examples

  • AJAX & JSON &XML

    Using JSON to pass data between client and server, Standard JS, jQuery, XML, Parsing, CDATA, GET, POST, Parameters, JSON Response, XML Response

  • AJAX & JSON Samples

    Examples: Standard and jQuery examples of AJAX GET and POST using JSON and XML.

  • AJAX & XML Samples

    Examples: AJAX and XML, both Standard and jQuery

  • Forms, Events, Data & AJAX

    Event Target, Add Event Listener, Remove Event Listener, Dispatch Event, Event Types, Button Click, Focus, Mouse Event

  • Form Input

    Button, Text Box, Data List, Text Area, Drop Down Lists, List Boxes, Dual List Boxes, Check Boxes, Radio Buttons

  • Custom Controls

    Building, Custom Drop Down List, Masked Input, Custom Check Boxes

  • Built In Functions & Events

    DOM (Document Object Model), DOM Constructor, DOM Instance Properties, DOM Instance Methods, DOM Events, DOM Inheritance

  • Await & Async

    Asynchronous Functionality, Async

  • Client-Side Frameworks

    React, Ember, Vue, Svelte, Angular

  • Data Structures

    Dynamic & Weak Typing, Primatives, Null, Undefined, Boolean, Number, BigInt, String, Symbol, Objects, Dates, Indexed Collections, Keyed Collections, JSON, Type Coersion, Primative Coersion, Number Coersion

  • Equality Comparisons & Sameness

    Strict Equality, Loose Equality, Same-Value-Zero Equality, Comparing Equality Methods, Truthyness & Falsyness

  • Enumerability & Ownership Of Properties

    Enumerable Properties & Non-enumerable Properties, Traversing Object Properties

  • Inheritance & The Prototype Chain

    Inheriting Properties, Inheriting Methods, Constructors, Prototype Chains

  • Typed Arrays

    Typed Array Architecture, ArrayBuffer, Web APIs Using Typed Arrays

  • Concurrency Model & Event Loop

    The Event Loop, Runtime Concepts, Stack, Queue, Heap

  • Graphics

    Using Canvas, List of Methods, Examples

  • Music Tabs App

    Smart Tab Files with quantative chords that can be transposed into other keys by half steps. Simple parser to convert tabs in a specified format into a smart tab that can be transposed.

  • Social Media Threader App

    A threader app that breaks up text into pieces that can be uploaded to certain social media where character limit contraints are a foactor.


 

 

Button

A clickable rendering of a button. There is more than one way to create a button.
A button's action can be defined by the onclick attribute in the HTML code or via javascript or jQuery by defining a click event callback.

<input type="button" value="Button Text"... /> <button ... >Button Text</button> <a class="btn btn-bs-primary" ... >Button Text</a>

  Button Text
 

The following three buttons are the same as the buttons above, but with the following custom CSS applied.

.customButton1 { margin:0rem 0.25rem; border:3px solid transparent; border-radius:8px; padding:0.5rem 1rem; color:#fff; background-color:#59f; font-size:1.2rem; font-weight:900; text-align:center; text-decoration:none; display:inline-block; cursor:pointer; } .customButton1:hover { border:3px solid #59f; color:#59f; background-color:#fff; }

Button Text
 
Button Click Event Action

document.addEventListener('DOMContentLoaded', () => { function jsClickResponse(){ alert("Button Clicked"); }; document.getElementById("btnJavascript1").addEventListener("click", jsClickResponse); });

$(document).ready(function(){ function jqClickResponse(){ alert("Button Clicked"); }; $("#btnJquery1").click(jqClickResponse); });


 

Text Box

A single line entry box for text.

Additional Attributes
list

The values of the list attribute is the id of a <datalist> element located in the same document. The <datalist> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.


maxlength

The maximum number of characters (as UTF-16 code units) the user can enter into the text input. This must be an integer value 0 or higher. If no maxlength is specified, or an invalid value is specified, the text input has no maximum length. This value must also be greater than or equal to the value of minlength.
The input will fail constraint validation if the length of the text value of the field is greater than maxlength UTF-16 code units long. Constraint validation is only applied when the value is changed by the user.

minlength

The minimum number of characters (as UTF-16 code units) the user can enter into the text input. This must be a non-negative integer value smaller than or equal to the value specified by maxlength. If no minlength is specified, or an invalid value is specified, the text input has no minimum length.
The input will fail constraint validation if the length of the text entered into the field is fewer than minlength UTF-16 code units long. Constraint validation is only applied when the value is changed by the user.

pattern

The pattern attribute, when specified, is a regular expression that the input's value must match for the value to pass constraint validation. It must be a valid JavaScript regular expression, as used by the RegExp type, and as documented; the 'u' flag is specified when compiling the regular expression so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.
If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely.

Note: Use the title attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You should also include other explanatory text nearby.

placeholder

The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text must not include carriage returns or line feeds.

size

The size attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use).
This does not set a limit on how many characters the user can enter into the field. It only specifies approximately how many can be seen at a time. To set an upper limit on the length of the input data, use the maxlength attribute.

spellcheck

spellcheck is a global attribute which is used to indicate whether to enable spell checking for an element. It can be used on any editable content. The permitted values for spellcheck are:

<input type="text" id="txtField1" name="txtField1" required minlength="4" maxlength="8" size="10" />

.customTextbox1 { margin:0rem 0.25rem; border:2px solid #555; border-radius:4px; color:#59f; background-color:#eee; font-weight:700; } .customTextbox1:hover { border:2px solid #000; background-color:#ccc; } .customTextbox1:focus { border:2px solid #459; background-color:#fff; } .customTextbox1::placeholder { color:#59f; font-weight:700; font-style:italic; } input:invalid + span::after { position: absolute; content: "✖"; padding-left: 5px; } input:valid + span::after { position: absolute; content: "✓"; padding-left: 5px; }

Basic Textbox

<input type="text" id="txtField1" name="txtField1" required minlength="4" maxlength="8" size="10" />


 
Custom Class Textbox

<input type="text" required minlength="4" maxlength="30" class="customTextbox1" />


 
Placeholder Textbox

<input type="text" required minlength="4" maxlength="30" placeholder="Placeholder Text" class="customTextbox1" />


 
Required Format Textbox

<input type="text" required minlength="4" maxlength="30" class="customTextbox1" required /><span class="validity"></span>


 
Required Format Textbox

<input type="text" required minlength="2" maxlength="4"" pattern="[0-9A-F]+" required /><span class="validity"></span>


 
date Textbox

<input type="date" id="start" name="trip-start" value="2024-07-06" min="2024-07-06" max="2024-07-27" />


 
time Textbox

<input type="time" id="appt" name="appt" min="09:00" max="18:00" required class="customTextbox1" />


 
datetime-local Textbox

<input type="datetime-local" id="meeting-time" name="meeting-time" value="2024-06-12T19:30" min="2024-06-07T00:00" max="2024-06-14T00:00" class="customTextbox1" />


 
month Textbox

<input type="month" id="start" name="start" min="2024-03" value="2024-05" />


 
week Textbox

<input type="week" />


 
number Integer Textbox

<input type="number" min="10" max="200" step="10" value="20" class="customTextbox1" />


 
number Decimal Textbox

<input type="number" min="0" max="2" step="0.1" value="0" class="customTextbox1" />


 
Using A Data List

<input type="text" id="txtField6" name="txtField6" list="listOfChoices1" class="customTextbox1" /> <datalist id="listOfChoices1"> <option value="Arizona"></option> <option value="California"></option> <option value="Colorado"></option> <option value="Nevada"></option> <option value="New York"></option> </datalist>


 
Date Input

<label for="apptDate1">Appointment Date:</label> <input id="apptDate1" type="date" list="popularDates" /> <datalist id="popularDates"> <option value="2023-02-20"></option> <option value="2023-03-21"></option> <option value="2023-04-22"></option> <option value="2023-05-23"></option> <option value="2023-06-24"></option> <option value="2023-07-25"></option> </datalist>


 
Date Input With Labels

<label for="apptDate2">Special Date:</label> <input id="apptDate2" type="date" list="specialDates" /> <datalist id="specialDates"> <option value="2023-02-20" label="Lance's Birthday"></option> <option value="2023-03-21" label="Jerry's Birthday"></option> <option value="2023-04-22" label="Susan's Wedding"></option> <option value="2023-05-23" label="Laura's Birthday"></option> <option value="2023-06-24" label="Doctor Appointment"></option> <option value="2023-07-25" label="Final Exams"></option> </datalist>


 
Time Input

<label for="apptTime1">Appointment Time:</label> <input id="apptTime1" type="time" list="popularHours" /> <datalist id="popularHours"> <option value="12:00"></option> <option value="13:00"></option> <option value="14:00"></option> </datalist>


 
Range With Tick Marks

<label for="tick">Tip amount:</label> <input type="range" list="tickmarks" min="0" max="100" id="tick" name="tick" /> <datalist id="tickmarks"> <option value="0"></option> <option value="25"></option> <option value="50"></option> <option value="75"></option> <option value="100"></option> </datalist>


 
One Data List For Multiple Ranges

fieldset, legend { all: revert; } fieldset.fsStyle1 { border: 4px solid #59f; border-radius:8px; background-color:#fff; padding:1rem; display:inline-block; } fieldset.fsStyle1 legend { background-color: #59f; color: #fff; padding:0.25rem 1rem; font-size:1.2rem; border-radius:8px; /*box-shadow: 0 0 0 5px #ddd;*/ } input[type="range"] { width:500px; }

<fieldset class="fsStyle1"> <legend>Set The Boiler Temperature</legend> <label for="temp1">Temp Boiler 1:</label> <input type="range" list="temps1" min="0" max="300" value="50" id="temp1" name="temp1" /><br/> <label for="temp2">Temp Boiler 2:</label> <input type="range" list="temps1" min="0" max="300" value="150" id="temp2" name="temp2" /><br/> <label for="temp3">Temp Boiler 3:</label> <input type="range" list="temps1" min="0" max="300" value="250" id="temp3" name="temp3" /><br/> <datalist id="temps1"> <option label="0" value="0"></option> <option label="50" value="50"></option> <option label="100" value="100"></option> <option label="150" value="150"></option> <option label="200" value="200"></option> <option label="250" value="250"></option> <option label="300" value="300"></option> </datalist> </fieldset>

Set The Boiler Temperature



 
Color Picker

<label for="colors">Pick a color (preferably a red tone):</label> <input type="color" list="redColors" id="colors" /> <datalist id="redColors"> <option value="#800000"></option> <option value="#8B0000"></option> <option value="#A52A2A"></option> <option value="#DC143C"></option> </datalist>


 

Text Area

A multi-line text input form field.

<textarea id="txtTaInput1" rows="10" cols="50" minlength="10" maxlength="64" placeholder="Write notes here..." ></textarea>


 

<textarea id="txtTaInput1" class="taStyle1" minlength="10" maxlength="64" placeholder="Write notes here..." ></textarea>

textarea.taStyle1 { margin:1rem; border:3px solid #59f; border-radius:8px; padding:1rem; width:100%; height:10rem; background-color:#eee; color:#59f; } textarea.taStyle1:hover { border:3px solid #59f; background-color:#ddd; color:#666; } textarea.taStyle1:focus { border:3px solid #59f; background-color:#fff; color:#59f; } textarea.taStyle1::placeholder { color:#59f; font-weight:700; font-size:0.75rem; font-style:italic; }


 

Drop Down List

The drop-down-list control is a selectable list where there is a separation between the text and value shown. has the following properties

select.ddlStyle1 { margin:0rem 0.5rem; border:3px solid #59f; border-radius:8px; padding:0.25rem; background-color:#eee; color:#59f; } select.ddlStyle1:hover { border:3px solid #000; background-color:#ddd; color:#666; } select.ddlStyle1:active, select.ddlStyle1:focus { border:3px solid #59f; background-color:#fff; color:#59f; }

<label for="drink-select">Choose Your Poison:</label> <select name="drink-select" id="drink-select" class="ddlStyle1"> <option value="">Choose An Option</option> <option value="101">Old Fashioned</option> <option value="102">Negroni</option> <option value="103">Tom Collins</option> <option value="104">Margarita</option> <option value="105">Pina Colada</option> <option value="106">Aperol Spritz</option> </select> <input type="button" id="ddList1" class="btn btn-bs-primary" value="Show Selection" /> <h4>Response</h4> <div class="response" id="drink_results1"></div>

/* * DROP DOWN LIST CHANGE */ function ddlDrinkChange() { let ddDrinkList = document.getElementById("drink-select"); let drink_results = document.getElementById("drink_results1"); let returnStr = ""; returnStr = "Number of List Items: "+ ddDrinkList.options.length +"<br/>"; returnStr += "Selected Index: "+ ddDrinkList.options.selectedIndex +"<br/>"; returnStr += "Selected Text: "+ ddDrinkList.options[ddDrinkList.options.selectedIndex].text +"<br/>"; returnStr += "Selected Value: "+ ddDrinkList.options[ddDrinkList.options.selectedIndex].value +"<br/>"; drink_results.innerHTML = returnStr; } /* * DROP DOWN LIST GET SELECTION */ function btnGetSelection() { let ddDrinkList = document.getElementById("drink-select"); let drink_results = document.getElementById("drink_results1"); let strDrink = ""; let idDrink = ""; if (ddDrinkList.selectedIndex == 0) { alert("Nothing Selected"); } else { strDrink = ddDrinkList.options[ddDrinkList.selectedIndex].text; idDrink = ddDrinkList.options[ddDrinkList.selectedIndex].value; drink_results.innerHTML = idDrink +' - '+ strDrink; } }; /* * DROP DOWN LIST CLEAR SELECTION */ function btnClrSelection() { let ddDrinkList = document.getElementById("drink-select"); let drink_results = document.getElementById("drink_results1"); ddDrinkList.options.selectedIndex = 0; // ZERO HERE BECAUSE FIRST ITEM IS INSTRUCTION // SET TO -1 TO DESELECT ALL drink_results.innerHTML = "Selection Cleared"; } /* * CLEAR LIST ITEMS FROM LIST. * NOTE THAT THIS IS DONE IN REVERSE */ function btnClrEnt() { let ddDrinkList = document.getElementById("drink-select"); let drink_results = document.getElementById("drink_results1"); // list.option[index]=null; for(let i=ddDrinkList.options.length; i>-1; i--) { ddDrinkList.options[i] = null; } } /* * ADD LIST ITEMS */ function btnAddEnt() { let ddDrinkList = document.getElementById("drink-select"); let drink_results = document.getElementById("drink_results1"); let option1 = document.createElement('option'); let option2 = document.createElement('option'); let option3 = document.createElement('option'); option1.value = "107"; option1.text = "Mai Tai"; option2.value = "108"; option2.text = "Screwdriver"; option3.value = "109"; option3.text = "Madras"; ddDrinkList.appendChild(option1); ddDrinkList.appendChild(option2); ddDrinkList.appendChild(option3); }

       
 

Response


 

 

Drop Down List - On Select

This looks at firing on a drop down list select.

<label for="cocktail_select">Choose Your Poison:</label> <select name="cocktail_select" id="cocktail_select" class="ddlStyle1"> <option value="">Choose An Option</option> <option value="1">Old Fashioned</option> <option value="2">Negroni</option> <option value="3">Tom Collins</option> <option value="4">Margarita</option> <option value="5">Pina Colada</option> <option value="6">Aperol Spritz</option> </select>

document.getElementById("cocktail_select").addEventListener("change", show_drink_selected, true); function show_drink_selected() { let strResult = ""; const cocktail_select = document.getElementById("cocktail_select"); const results = document.getElementById("cocktail_results"); if (cocktail_select.selectedIndex == 0) { alert("Nothing Selected"); } else { strResult = cocktail_select.options[cocktail_select.selectedIndex].text; strResult += " - "+ cocktail_select.options[cocktail_select.selectedIndex].value; } results.innerHTML = strResult; }


 

Response


 

 

List Box

A list box is a drop down list with different settings.

select.ddlStyle1 { margin:0rem 0.5rem; border:3px solid #59f; border-radius:8px; padding:0.25rem; background-color:#eee; color:#59f; } select.ddlStyle1:hover { border:3px solid #000; background-color:#ddd; color:#666; } select.ddlStyle1:active, select.ddlStyle1:focus { border:3px solid #59f; background-color:#fff; color:#59f; }

<h6>Choose All Your Poisons:</h6> <select name="drink-select2" id="drink-select2" class="ddlStyle1" multiple size="10"> <option value="1">Old Fashioned</option> <option value="2">Negroni</option> <option value="3">Tom Collins</option> <option value="4">Margarita</option> <option value="5">Pina Colada</option> <option value="6">Aperol Spritz</option> <option value="7">Mai Tai</option> <option value="8">Navy Grog</option> <option value="9">Planters Punch</option> <option value="10">Harvey Wallbanger</option> <option value="11">Manhattan</option> <option value="12">Martini</option> </select><br/> <input type="button" id="mlList1" class="btn btn-bs-primary" value="Show Selection" /> <h4>Response</h4> <div class="response" id="drink_results2"></div>

document.addEventListener('DOMContentLoaded', () => { function mllSelectResponse() { let mlDrinkList = document.getElementById("drink-select2"); let drink_results = document.getElementById("drink_results2"); let strDrink = ""; if (mlDrinkList.selectedIndex == -1) { alert("Nothing Selected"); } else { for (var i=0; i<mlDrinkList.options.length; i++) { if (mlDrinkList.options[i].selected) { strDrink += mlDrinkList.options[i].value +" - "+ mlDrinkList.options[i].text +"<br/>"; } } drink_results.innerHTML = strDrink; } }; document.getElementById("mlList1").addEventListener("click", mllSelectResponse); });

Choose All Your Poisons:

 
 
 

Response


 

Multiple List Boxes

In this case, there are two list boxes. Selecting items in the left list box (list 1) and clicking on the Move To button will remove those items from list 1 and put them in list 2. Selecting items in the right list box (lsit 2) and clicking on the Move Back button will remove those items from list 2 and put them in list 1.

select.ddlStyle2 { min-width:300px; margin:0rem 0.5rem; border:3px solid #59f; border-radius:8px; padding:0.25rem; background-color:#eee; color:#59f; } select.ddlStyle2:hover { border:3px solid #000; background-color:#ddd; color:#666; } select.ddlStyle2:active, select.ddlStyle2:focus { border:3px solid #59f; background-color:#fff; color:#59f; }

<h6>Choose All Your Poisons:</h6> <select name="drink-select3" id="drink-select3" class="ddlStyle2" multiple size="10"> <option value="1">Old Fashioned</option> <option value="2">Negroni</option> <option value="3">Tom Collins</option> <option value="4">Margarita</option> <option value="5">Pina Colada</option> <option value="6">Aperol Spritz</option> <option value="7">Mai Tai</option> <option value="8">Navy Grog</option> <option value="9">Planters Punch</option> <option value="10">Harvey Wallbanger</option> <option value="11">Manhattan</option> <option value="12">Martini</option> </select> <select name="drink-select4" id="drink-select4" class="ddlStyle2" multiple size="10"> </select> <input type="button" id="mlList2" class="btn btn-bs-primary" value="Move To >" />  <input type="button" id="mlList3" class="btn btn-bs-primary" value="Move Back <" /> <h4>Response</h4> <div class="response" id="drink_results3"></div>

document.addEventListener('DOMContentLoaded', () => { function mllMoveItemsTo() { let ddDrinkList1 = document.getElementById("drink-select3"); let ddDrinkList2 = document.getElementById("drink-select4"); let drink_results = document.getElementById("drink_results3"); moveSelectedOptions(ddDrinkList1,ddDrinkList2); }; function mllMoveItemsBack() { let ddDrinkList1 = document.getElementById("drink-select3"); let ddDrinkList2 = document.getElementById("drink-select4"); let drink_results = document.getElementById("drink_results3"); moveSelectedOptions(ddDrinkList2,ddDrinkList1); }; /****************************************************************************/ /* MOVES OPTIONS BETWEEN SELECT BOXES. * PASSES SELECTED OPTIONS FROM from TO to AND RE-SORTS EACH. * IF 3RD ARG 'false' IS PASSED, THEN THE LISTS ARE NOT SORTED AFTER THE MOVE. * IF 4TH REG-EXP IS PASSED, THIS WILL FUNCTION TO MATCH AGAINST THE TEXT. * IF THE TEXT OF AN OPTION MATCHES THE PATTERN, IT WILL NOT BE MOVED. * IT WILL BE TREATED AS AN UNMOVEABLE OPTION. * * moveSelectedOptions( from, * to, * * autosort, * * regex ) * * PARAMETERS: * * from........SOURCE LIST * to..........DESTINATION LIST * autosort....BOOLEAN (OPTIONAL) * regex.......A REGULAR EXPRESSION (OPTIONAL) */ function moveSelectedOptions(from,to) { // UN-SELECT MATCHING OPTIONS, IF REQUIRED if (arguments.length>3) { var regex = arguments[3]; if (regex != "") { unSelectMatchingOptions(from,regex); } } // MOVE THEM OVER if (!hasOptions(from)) { return; } for (var i=0; i<from.options.length; i++) { var o = from.options[i]; if (o.selected) { if (!hasOptions(to)) { var index = 0; } else { var index=to.options.length; } to.options[index] = new Option( o.text, o.value, false, false); } } // DELETE THEM FROM ORIGINAL for (var i=(from.options.length-1); i>=0; i--) { var o = from.options[i]; if (o.selected) { from.options[i] = null; } } if ((arguments.length<3) || (arguments[2]==true)) { sortSelect(from); sortSelect(to); } from.selectedIndex = -1; to.selectedIndex = -1; } /****************************************************************************/ /* UNSELECTS ALL OPTIONS THAT MATCH THE REGULAR EXPRESSION * * unSelectMatchingOptions( select_object, * regex ) * PARAMETERS: * * select_object....SELECT LIST * regex............A REGULAR EXPRESSION */ function unSelectMatchingOptions(obj,regex) { selectUnselectMatchingOptions(obj,regex,"unselect",false); } /* SELECTS ALL OPTIONS THAT MATCH THE REGULAR EXPRESSION * DOES NOT AFFECT CURRENT SELECTED OPTIONS * * selectMatchingOptions( select_object, * regex ) * PARAMETERS: * * select_object....SELECT LIST * regex............A REGULAR EXPRESSION */ function selectMatchingOptions(obj,regex) { selectUnselectMatchingOptions(obj,regex,"select",false); } /* SELECTS OR UNSELECTS OPTIONS USING A REGULAR EXPRESSION * * SYNTAX: * * selectUnselectMatchingOptions( select_object, * regex, * select/unselect, * true/false ) * PARAMETERS: * obj.......A SELECT LIST BOX * regex.....A REGULAR EXPREESSION * which.....A DIRECTIVE TO SELECT OR UNSELECT * only......BOOLEAN */ function selectUnselectMatchingOptions(obj,regex,which,only) { if (window.RegExp) { if (which == "select") { var selected1=true; var selected2=false; } else if (which == "unselect") { var selected1=false; var selected2=true; } else { return; } var re = new RegExp(regex); if (!hasOptions(obj)) { return; } for (var i=0; i<obj.options.length; i++) { if (re.test(obj.options[i].text)) { obj.options[i].selected = selected1; } else { if (only == true) { obj.options[i].selected = selected2; } } } } } /****************************************************************************/ /* UTILITY FUNCTION: * TO DETERMINE IF A SELECT OBJECT HAS AN OPTIONS ARRAY * IN OTHER WORDS, TO DETERMINE IF IT IS EMPTY */ function hasOptions(obj) { if (obj!=null && obj.options!=null) { return true; } return false; } /****************************************************************************/ /* SORTS OPTIONS IN LIST ALPHABETICALLY * * sortSelect( select_object ) * * PARAMETER: select_object....SELECT LIST */ function sortSelect(obj) { var o = new Array(); if (!hasOptions(obj)) { return; } for (var i=0; i<obj.options.length; i++) { o[o.length] = new Option( obj.options[i].text, obj.options[i].value, obj.options[i].defaultSelected, obj.options[i].selected) ; } if (o.length==0) { return; } o = o.sort( function(a,b) { if ((a.text+"") < (b.text+"")) { return -1; } if ((a.text+"") > (b.text+"")) { return 1; } return 0; } ); for (var i=0; i<o.length; i++) { obj.options[i] = new Option(o[i].text, o[i].value, o[i].defaultSelected, o[i].selected); } } document.getElementById("mlList2").addEventListener("click", mllMoveItemsTo); document.getElementById("mlList3").addEventListener("click", mllMoveItemsBack); });

The Option Constructor

The Option() constructor creates a new HTMLOptionElement.

new Option() new Option(text) new Option(text, value) new Option(text, value, defaultSelected) new Option(text, value, defaultSelected, selected)

Option Parameters
Parameter Description
text A string representing the content of the element, i.e. the displayed text. If this is not specified, a default value of "" (empty string) is used.
value A string representing the value of the HTMLOptionElement, i.e. the value attribute of the equivalent <option>. If this is not specified, the value of text is used as the value, e.g. for the associated <select> element's value when the form is submitted to the server.
defaultSelected A value of either true or false that sets the selected attribute value, i.e. so that this <option> will be the default value selected in the <select> element when the page is first loaded. If this is not specified, a default value of false is used. Note that a value of true does not set the option to selected if it is not already selected.
selected A value of either true or false that sets the option's selected state; the default is false (not selected). If omitted, even if the defaultSelected argument is true, the option is not selected.
Choose All Your Poisons:

 
   
 
 

Check Box

A clickable rendering of a checkbox. Checkboxes are standalone controls. Unlike the similar radio button, they do not represent an OR option, but an AND option.

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> I have a boat</label><br><br> <a href="javascript:testScriptCb1()" class="btn btn-bs-primary">Show Checkbox Results</a> <input type="submit" value="Submit">

function testScriptCb1() { let vehiclesChecked = ""; const results = document.getElementById("resultsCb1"); if (document.getElementById("vehicle1").checked) { vehiclesChecked += document.getElementById("vehicle1").value +"<br/>"; } if (document.getElementById("vehicle2").checked) { vehiclesChecked += document.getElementById("vehicle2").value +"<br/>"; } if (document.getElementById("vehicle3").checked) { vehiclesChecked += document.getElementById("vehicle3").value +"<br/>"; } results.innerHTML = vehiclesChecked; }

 
 
 

Show Checkbox Results
 

Response


 

 

Radio Button