Home > Developer > JavaScript
In the previous article to introduce the JS operation form instance explanation (next) related knowledge, this article then introduces the JavaScript operation form instance explanation (next), the specific details as follows:
One, text fields
<input type= "Text"/>
-----------------------------
Manipulating the value of a text field
Value property setting or getting values
-----------------------------
radio buttons and multiple selection buttons
<input type= "Radio"/> <input type= "checkbox"/>
----------------------------------------------
Checked returns or sets the selected state of a radio
True check false is not selected
The Value property gets the selected values and must first determine the selected state
----------------------------------------------
Example: Select all/select/reverse
1.PNG
1.dom structure
<body>
<form name= "MyForm" action= "#" method= "Post" id= "Form1" >
<script type= "text/ JavaScript > For
(var i=0;i<20;i++) {
document.write ("<input type= ' checkbox ' name= ' nums '/> ') + (i+ 1) + "<br>")
}
document.write ("<input type= ' radio ' name= ' radios ' > select All");
document.write ("<input type= ' radio ' name= ' Radios ')" (all not selected);
document.write ("<input type= ' radio ' name= ' radios ' > Reverse");
</script>
</form>
</body>
2.script Script
2.1 by calling a function
<script type= "Text/javascript" >
window.onload=function () {
var nums=document.getelementsbyname (" Nums ");
var radios=document.getelementsbyname ("Radios");
Fun (Nums,i,radios);
function Fun (a,b,c) {
c[b].onclick=function () {
if (b==0) {for
(var i=0;i<a.length;i++) {
a[i]. Checked=true
}
} else if (b==1) {for
(var i=0;i<a.length;i++) {
a[i].checked=false
}
} else if (b==2) {for
(var i=0;i<a.length;i++) {
if (a[i].checked) {
a[i].checked=false;
} else{
a[i].checked=true
}
}}} </script>
2.2 How to create anonymous functions in a closed package
<script type= "Text/javascript" >
window.onload=function () {
var nums=document.getelementsbyname (" Nums ");
var radios=document.getelementsbyname ("Radios");
for (Var i=0;i<radios.length;i++) {
(function (a) {
radios[a].onclick=function () {
if (a==0) {for (
var i=0;i<nums.length;i++) {
nums[i].checked=true
}
} else if (a==1) {for
(var i=0;i<nums.length;i++) {
nums[i].checked=false
}
} else if (a==2) {for
(var i=0;i<nums.length;i++) {
if (nums[i].checked) {
nums[i].checked=false;
} else{
Nums[i].checked=true}}}
) (i);
}
</script>
Three, drop down box
<form name= "MyForm" > <select name= "Sels" > <option> Beijing University </option> < Option> Chang </option> <option> Nanjing University </option> </select> </form>
----------------------------------------
Selected Sets or returns the selected state of the Drop-down box
True check false is not selected
SelectedIndex Sets or returns the index number selected by the dropdown box
----------------------------------------
Example1: Select Chang
<script> var sels=document.myform.sels; var sels=document.myform.sels.options;//(also can) sels[1].selected=true; </script>
Or
<script> var sels=document.myform.sels; var sels=document.myform.sels.options;//(also can) sels.selectedindex=1; </script>
EXAMPLE2: Unit Price * Quantity = Total Price
1.PNG
1.dom structure
<body> <form name= "MyForm" action= "#" method= "Post" id= "Form1" > Price: <input type= "text" Name= " Price "value=" > <select name= "Count" > Quantity <option>1 </option> <option> 2 </option> <option>3 </option> </select> Total Price: <input type= "Text" name= Total "value=" > </form> </body>
2.script Script
<script type= "Text/javascript" >
window.onload=function () {
var price=document.myform.price;
var Count=document.myform.count;
var total=document.myform.total;
Count.onchange=function () {
total.value=parseint (price.value) * (count.selectedindex+1);
}
}
</script>
Iv. Text Area
<textarea name= "Info" rows= "7" cols= "></textarea>"
----------------------------
Value Returns or sets the values of the text range
----------------------------
Example: Dynamically detects the length of characters entered in a text area
1.PNG
1.dom structure:
<body> <div id= "Content" > can input 20 characters, has entered 0, but also can enter 20 </div> <form name= "MyForm" # "method=" Post "id=" Form1 "> <textarea name=" info "cols=" "rows=" 7 "></textarea> </form > </body>
2.script script:
<script type= "Text/javascript" >
window.onload=function () {
var Content=document.getelementbyid (" Content ");
var info=document.myform.info;
Info.onkeyup=info.onkeydown=function () {
var str=info.value;
var length=check (str);
var strs=20;
if (length<=strs) {
content.innerhtml= "can input" +strs+ "character, has entered" +length+ ", also can enter" + (strs-length) + "";
} else{
info.value=str.substring (0,strs);
}
Detect Chinese and English
function check (str) {
var num=0;
for (Var i=0;i<str.length;i++) {
if (str.charcodeat (i) >=0 && str.charcodeat (i) <=255) {//English
num++;
} else{//Chinese
num+=2
}
}
return num;
}
}
</script>
V. Form validation
OnSubmit events that are triggered when a form is submitted
----------------------------------------------------------------------------------------------
<form name= "MyForm" action= "www.baidu.com" method= "POST" onsubmit= "return check (This)" ></form> return false; Block form default behavior
----------------------------------------------------------------------------------------------
Vi. Method of Submit
This method is used to implement autocommit
and event onsubmit can only be used to manually submit
The above is a small set to introduce the JavaScript operation form examples (next), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
