JavaScript uses the DOM to set text boxes, radio buttons, check boxes, drop-down menus

Using the DOM to set up a text box

1. Control the number of characters entered by the user


For single-line text boxes and password entry boxes, you can use the MaxLength property to control the number of characters entered by the user.


For multiline text, MaxLength is a custom attribute with the maximum number of characters entered, and the onkeypress returns the LessThan () function return value when the event occurs, as follows





<textarea name= "Comments" id= "comments" cols= "" rows= "4" maxlength= "onekeypress =" return LessThan (this); " ></textarea>





Detailed code





<script language= "JavaScript" >


function LessThan (Otextarea) {


Returns whether the number of characters in a text box is a Boolean value of the symbol requirement


Return OTextArea.value.length < Otextarea.getattribute ("MaxLength");


}


</script>


<form method= "POST" name= "MyForm1" action= "addinfo.aspx" >


<p><label for= "Name" > Please enter your name:</label>


<input type= "text" name= "name" id= "name" class= "TXT" value= "name" Maxlength= "Ten" ></p>


<p><label for= "Comments" > I want to leave a message:</label><br>


<textarea name= "Comments" id= "comments" "cols=" rows= "4" maxlength= "onkeypress=" return LessThan (this); " ></textarea></p>


<p><input type= "Submit" Name= "Btnsubmit" id= "btnsubmit" value= "Submit" class= "BTN" >


<input type= "reset" name= "btnreset" id= "btnreset" value= "reset" class= "BTN" ></p>


</form>





2. Set the mouse to select text automatically





First, the mouse is automatically focused onmouseover = "This.focus"





Followed by onfocus = "This.select ()"


Code instance:





<form method= "Post" Name= "Form1" Id= "Form1" action= "addinfo.aspx" >


<input type= "text" name= "name" id= "name" class= "TXT" value= "name" onmouseover= "This.focus ()" onfocus= "This.select ()" >


</form>





For multiple code instances, you can use the following code to focus








<script type= "Text/javascript" >


function Myfocus () {


This.focus ();


}





function Myselect () {


This.select ();


}


Window.onload = function () {


var oform = document.forms["MyForm1"];


OForm.name.onmouseover = Myfocus;


OForm.name.onfocus = Myselect;


}


</script>


<form method= "POST" name= "MyForm1" action= "addinfo.aspx" >


<p>


<label for= "Name" > Please enter your name:</label>


<input type= "text" name= "name" id= "name" class= "TXT" value= "name" >


</p>


<p>


<label for= "passwd" > Please enter your password:</label>


<input type= "Password" name= "passwd" id= "passwd" class= "TXT" >


</p>


<p>


<input type= "Submit" Name= "Btnsubmit" id= "btnsubmit" value= "Submit" class= "BTN" >


<input type= "reset" name= "btnreset" id= "btnreset" value= "reset" class= "BTN" >


</p>


</form>

Use the DOM to set up radio buttons, check boxes, drop-down menus

1. Set radio button





The radio button in the form is <input type= "Radio"/> It is a set of objects for the user to select, but only one at a time. Each has a checked attribute, and when one selection is ture, the other changes to false.





One example of desertification first:








<script type= "Text/javascript" >


function Getchoice () {


var oform = document.forms["UForm1"];


var achoices = Oform.camera;


for (i = 0; i < achoices.length i++)//traverse the entire single option table


if (achoices[i].checked)//If the selected item is found, exit


Break


Alert ("Camera brand is:" + achoices[i].value);


}





function Setchoice (inum) {


var oform = document.forms["UForm1"];


Oform.camera[inum].checked = true;


}


</script>


<form method= "POST" name= "UForm1" action= "addinfo.aspx" >


Camera Brand:


<p>


<input type= "Radio" name= "Camera" id= "canon" value= "Canon" >


<label for= "Canon" >Canon</label>


</p>


<p>


<input type= "Radio" name= "Camera" id= "Nikon" value= "Nikon" >


<label for= "Nikon" >Nikon</label>


</p>


<p>


<input type= "Radio" name= "Camera" id= "Sony" Value= "Sony" Checked>


<label for= "Sony" >Sony</label>


</p>


<p>


<input type= "Radio" name= "Camera" id= "Olympus" Value= "Olympus" >


<label for= "Olympus" >Olympus</label>


</p>


<p>


<input type= "Radio" name= "Camera" id= "Samsung" value= "Samsung" >


<label for= "Samsung" >Samsung</label>


</p>


<p>


<input type= "Radio" name= "Camera" id= "Pentax" value= "Pentax" >


<label for= "Pentax" >Pentax</label>


</p>


<p>


<input type= "Radio" name= "Camera" id= "others" value= "other" >


<label for= "Others" >others</label>


</p>


<p>


<input type= "Submit" Name= "Btnsubmit" id= "btnsubmit" value= "Submit" class= "BTN" >


</p>


<p>


<input type= "button" value= "detects the selected object" onclick= "Getchoice ();" >


<input type= "button" value= "set to Canon" onclick= "Setchoice (0);" >


</p>


</form>





The radio button in the form is <input type= "Radio"/> It is a set of objects for the user to select, but only one at a time. Each has a checked attribute, and when one selection is ture, the other changes to false.


As you can see from the code above, IDs and name are different, and their name is the same in a set of radio buttons, and only one is selected. The ID is binding <label> or other selective action.





Where code: The code that checks for the selected object is (when the chcked value of an item is ture, the traversal ends)





var oform = document.forms["UForm1"];


var achoices = Oform.camera;


for (i = 0; i < achoices.length i++)//traverse the entire single option table


if (achoices[i].checked)//If the selected item is found, exit


Break


Alert ("Camera brand is:" + achoices[i].value);





2. Set multiple selection boxes





Unlike radio buttons, the checkbox <input type= "checkbox"/> can be selected at the same time with multiple options for processing, the check box before each message in the mailbox is typically used








<script type= "Text/javascript" >


function checkbox () {


var str = document.getelementsbyname ("hobby");


var objarray = str.length;


var chestr = "";





for (j = 0; J < Objarray; J + +) {


if (str[j].checked = = True) {


Chestr + + Str[j].value + ",";


}


}


if (Chestr = = "") {


Alert ("Please first choose a hobby ~! ");


} else {


Alert ("Your first choice is:" + chestr);


}


}





function Changeboxes (action) {


var oform = document.forms["MyForm1"];


var ocheckbox = Oform.hobby;


for (var i = 0; i < ocheckbox.length i++)//traverse each option


if (Action < 0)//anti-election


ocheckbox[i].checked =!ocheckbox[i].checked;


Else//action 1 is all selected, 0 is all not selected


ocheckbox[i].checked = action;


}


</script>





<form method= "POST" name= "MyForm1" action= "addinfo.aspx" >


Something you like to do:


<p>


<input type= "checkbox" name= "hobby" id= "Ball" value= "ball" >


<label for= "Ball" > Play </label>


</p>


<p>


<input type= "checkbox" name= "Hobby" id= "TV" value= "TV" >


<label for= "TV" > Watch TV </label>


</p>


<p>


<input type= "checkbox" name= "hobby" id= "NET" value= "NET" >


<label for= "NET" > Internet access </label>


</p>


<p>


<input type= "checkbox" name= "Hobby" id= "book" value= "book" >


<label for= "book" > Reading </label>


</p>


<p>


<input type= "checkbox" name= "hobby" id= "trips" value= "Trip" >


<label for= "Trip" > Tourism </label>


</p>


<p>


<input type= "checkbox" name= "Hobby" id= "Music" value= "Music" >


<label for= "Music" > Musical </label>


</p>


<p>


<input type= "checkbox" name= "Hobby" id= "others" value= "other" >


<label for= "Others" > Other </label>


</p>


<p>


<input type= "button" value= "All selected" onclick= "changeboxes (1);"/>


<input type= "button" value= "All do not choose" onclick= "changeboxes (0);"/>


<input type= "button" value= "onclick=" changeboxes ( -1); "/>


<input type= "button" value= "Submit" onclick= checkbox () "/>


</p>


</form>








The checkbox principle is determined by using the Boolean value of the checked attribute, which can be passed by 0 and 1.





3. Drop down menu





Drop-down Menu <select> is a more commonly used form element. When its drop-down is a radio, and the radio button <input type= "Radio"/> function, the Drop-down menu is a check box when multiple= "multiple" for multiple selections, but the area is much smaller than the check box.





Common Properties for Drop-down menus


Attribute description


Length represents options <option> number


Selected Boolean value to indicate whether <option> is selected


SelectedIndex the serial number of the selected option, or 1 if no option is selected, and for the multiple-select Pull-down menu, returns the first selected number, counting from 0


Text of a text option


Values of the value option


Type Drop-down menu, Radio return select-one, multiple select return select-multiple


Option gets an array of options, such as: Oselectbox.options[2], which represents the Drop-down menu Oselectbox the third item








i. Drop-down menu to get the radio value








<script language= "JavaScript" >


function Checksingle () {


var oform = document.forms["MyForm1"];


var oselectbox = oform.constellation;


var ichoice = Oselectbox.selectedindex; Get checked items


Alert ("You have selected" + Oselectbox.options[ichoice].text);


}


</script>





<form method= "POST" name= "MyForm1" >


<label for= "Constellation" > Constellation:</label>


<p>


<select id= "Constellation" name= "Constellation" >


<option value= "Aries" selected= "selected" > Aries </option>


<option value= "Taurus" > Taurus </option>


<option value= "Gemini" > Gemini </option>


<option value= "Cancer" > Cancer </option>


<option value= "Leo" > Lion </option>


<option value= "Virgo" > Virgin </option>


<option value= "Libra" > Libra </option>


<option value= "Scorpio" > Scorpio </option>


<option value= "Sagittarius" > Archer </option>


<option value= "Capricorn" > Capricorn </option>


<option value= "Aquarius" > Aquarius </option>


<option value= "Pisces" > Pisces </option>


</select>


</p>


<input type= "button" onclick= "Checksingle ()" value= "View Options"/>


</form>











ii. drop-down Menu for multiple selections, take the value








<script type= "Text/javascript" >


function Checkmultiple () {


var oform = document.forms["MyForm1"];


var oselectbox = oform.constellation;


var achoices = new Array ();


Traverse the entire Drop-down menu


for (var i = 0; i < oSelectBox.options.length; i++)


if (oselectbox.options[i].selected)//If selected


Achoices.push (Oselectbox.options[i].text); Push into the array


Alert ("You have selected:" + achoices.join ()); Output results


}


</script>





<form method= "POST" name= "MyForm1" >


<label for= "Constellation" > Constellation:</label>


<p>


<select id= "Constellation" name= "Constellation" multiple= "multiple" style= "height:180px"; >


<option value= "Aries" > Aries </option>


<option value= "Taurus" > Taurus </option>


<option value= "Gemini" > Gemini </option>


<option value= "Cancer" > Cancer </option>


<option value= "Leo" > Lion </option>


<option value= "Virgo" > Virgin </option>


<option value= "Libra" > Libra </option>


<option value= "Scorpio" > Scorpio </option>


<option value= "Sagittarius" > Archer </option>


<option value= "Capricorn" > Capricorn </option>


<option value= "Aquarius" > Aquarius </option>


<option value= "Pisces" > Pisces </option>


</select>


</p>


<input type= "button" onclick= "Checkmultiple ()" value= "View Options"/>


</form>











Iii. General value (lower Lathan and multiple selections)








<script language= "JavaScript" >


function Getselectvalue (Box) {


var oform = document.forms["MyForm1"];


var oselectbox = Oform.elements[box]; Select the Drop-down menu according to the corresponding parameters


if (Oselectbox.type = = "Select-one") {//Judge is a radio or multiple selection


var ichoice = Oselectbox.selectedindex; Get checked items


Alert ("Radio, you have selected" + Oselectbox.options[ichoice].text);


} else {


var achoices = new Array ();


Traverse the entire Drop-down menu


for (var i = 0; i < oSelectBox.options.length; i++)


if (oselectbox.options[i].selected)//If selected


Achoices.push (Oselectbox.options[i].text); Push into the array


Alert ("Multiple selection, you have selected:" + achoices.join ()); Output results


}


}


</script>





<form method= "POST" name= "MyForm1" >


Constellation:


<p>


<select id= "Constellation1" name= "Constellation1" >


<option value= "Aries" selected= "selected" > Aries </option>


<option value= "Taurus" > Taurus </option>


<option value= "Gemini" > Gemini </option>


<option value= "Cancer" > Cancer </option>


<option value= "Leo" > Lion </option>


<option value= "Virgo" > Virgin </option>


<option value= "Libra" > Libra </option>


<option value= "Scorpio" > Scorpio </option>


<option value= "Sagittarius" > Archer </option>


<option value= "Capricorn" > Capricorn </option>


<option value= "Aquarius" > Aquarius </option>


<option value= "Pisces" > Pisces </option>


</select>


<input type= "button" onclick= "Getselectvalue (' Constellation1 ')" value= "View Options"/>


</p>


<p>


<select id= "Constellation2" name= "Constellation2" multiple= "multiple" style= "height:120px"; >


<option value= "Aries" > Aries </option>


<option value= "Taurus" > Taurus </option>


<option value= "Gemini" > Gemini </option>


<option value= "Cancer" > Cancer </option>


<option value= "Leo" > Lion </option>


<option value= "Virgo" > Virgin </option>


<option value= "Libra" > Libra </option>


<option value= "Scorpio" > Scorpio </option>


<option value= "Sagittarius" > Archer </option>


<option value= "Capricorn" > Capricorn </option>


<option value= "Aquarius" > Aquarius </option>


<option value= "Pisces" > Pisces </option>


</select>


<input type= "button" onclick= "Getselectvalue (' Constellation2 ')" value= "View Options"/>


</p>


</form>