In the previous article, I introduced you the relevant knowledge about the example explanation of js operation form (Part 2). This article will introduce you to the example explanation of Javascript operation form (Part 2). The specific details are as follows:
1. Text field
<input type="text" />
--------------------------------------------------------------------------------------------------------------------------------
Operate the value of the text field
value property set or get value
--------------------------------------------------------------------------------------------------------------------------------
2. Radio and multi-select buttons
<input type="radio" /><input type="checkbox" />
--------------------------------------------------------------------------------------------------------------------------------
checked Return or set the selected status of the single-choice
true Selected false Not selected
The value attribute obtains the selected value and must first determine the selected state.
--------------------------------------------------------------------------------------------------------------------------------
example: Select all/Not select all/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'>select all");document.write("<input type='radio' name='radios'>select all");document.write("<input type='radio' name='radios'>Anti-select");</script></form></body>2.script script
2.1 Using the method of calling functions
<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 Using the method of creating anonymous functions in a closure
<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>3. Pull down box
<form name="myform"><select name="sels"><option>Peking University</option><option>Chang'an University</option><option>Nanjing University</option></select></form>
--------------------------------------------------------------------------------------------------------------------------------
selected Set or return to the selected state of the drop-down box
true Selected false Not selected
selectedIndex Set or return the index number selected in the drop-down box
--------------------------------------------------------------------------------------------------------------------------------
example1: Select Chang'an University
<script>var sels=document.myform.sels;//var sels=document.myform.sels.options;//(It is also possible)sels[1].selected=true;</script>
or
<script>var sels=document.myform.sels;// var sels=document.myform.sels.options;//(It is also possible)sels.selectedIndex=1;</script>
example2: Unit price * Quantity = Total price
1.PNG
1.dom structure
<body><form name="myform" action="#" method="post" id="form1">Unit price: <input type="text" name="price" value="200"><select name="count">Quantity<option>1</option><option>2</option><option>3</option></select>Total price: <input type="text" name="total" value="200"></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>4. Text area
<textarea name="info" rows="7" cols="60"></textarea>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
value Returns or sets the value of the text area
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Example: Dynamically detect the length of characters entered in the text area
1.PNG
1.dom structure:
<body><div id="content">A total of 20 characters can be entered, 0 has been entered, and 20 can be entered</div><form name="myform" action="#" method="post" id="form1"><textarea name="info" cols="60" 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="A total of "+strs+" characters have been entered, and "+length+" can also be entered, and "+(strs-length)+"s" can also be entered;}else{info.value=str.substring(0,strs);} }//Detection 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>5. Form Verification
onsubmit event fired when form is submitted
--------------------------------------------------------------------------------------------------------------------------------
<form name="myform" action="www.baidu.com" method="post" onsubmit="return check(this)"></form>return false; //Block the form default behavior
--------------------------------------------------------------------------------------------------------------------------------
6. Submit method
This method is used to implement automatic submission
Event onsubmit can only be used to submit manually
The above is an example explanation of the Javascript operation form introduced by the editor (Part 2). I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!