クローンコピーとフォームの値


クローンコピーcloneNode()
指定したノードをコピーできます.このメソッドには、コピー時にノードを含むすべてのサブノード(深さコピーと呼ばれます)が要素自体チェックボックスとラジオボックスの値
 checkbox      node.checked; 得られたのはブールパラメータです
これはラジオボックスの値var radio 1=$(「g 1」)です.checked; var radio2=$("g2").checked; var radio3=$("g3").checked; if(radio 1=true)var gender=「男」;Else if(radio 2=true)var gender=「女」;Else if(radio 3=true)var gender=「人妖」;これはチェックボックスの値var check 1=$(「check 1」)です.checked; var check2=$("check2").checked;   var check3=$("check3").checked;   var check4=$("check4").checked; if(check 1=true)var it 1=「本を読む」;else it1=""; if(check 2=true)var it 2=「ヨガ」;else it2=""; if(check 3=true)var it 3=「インターネット」else it3=""; if(check 4=true)var it 4=「テコンドー」;else it4="";
ドロップダウン・ボックスで値を取ります.value
最初のドロップダウンボックスvar select 1=$("sanwei 1").value; 2番目のドロップダウンボックスvar select 2=$("sanwei 2").value; $(「sanwei 1」)も使えます.options[0].value;
フォームフィールドの共通性
onblur()フォーカスが失われた場合にonchange()テキストボックス値が変化した後、フォーカスが失われた場合にonfocus()フォーカスが得られた場合にトリガーされます
注意:onblur()とonchange()の違いは、後者が先に実行されることです.
次の例では、フォームの値を取る方法を示します.
<!DOCTYPE html>
<html>
	<head>
		<title>    </title>
		<meta charset="utf-8">
		<style type="text/css">
			form{
				width: 500px;
				height: 500px;
				background: lightblue;
				float: left;
				margin-left: 50px;
				margin-top: 100px;
			}
			div{
				margin-top: 30px;
			}
			input[type="text"]{
				padding-left: 10px;
			}
			#id5{
				margin-left: 100px;
			}
			input[type="button"]{
				width: 100px;
				height: 50px;
				font-size: 25px;
				background: lightcoral;
			}
		</style>
	</head>
	<body>
	 	<form action="#" method="post" id="form1">
	 		<h1>     </h1>
	 		<div id="id1"><span>  :</span><input type="text" size="30" maxlength="25" value="" id="text"/></div>
	 		<div id="id2"><span>  :</span><input type="radio" name="gender" id="g1" value=" "> </input><input type="radio" name="gender" id="g2" value=" "> </input><input type="radio" name="gender" id="g3" value="  ">  </input></div>
	 		<div id="id3"><span>  :</span><select id="sanwei1" name="sanwei1">
	 		<option value="tou">  </option><option value="60cm">60cm</option><option value="50cm">50cm</option><option value="55cm">55cm</option></select>
	 		<select id="sanwei2" name="xiongwei"><option value="xiong">  </option><option value="60cm">60cm</option><option value="70cm">70cm</option><option value="80cm">80cm</option>
	 		</select>
	 		<select id="sanwei3" name="sanwei3"><option value="yao">  </option><option value="60cm">60cm</option><option value="50cm">50cm</option><option value="55cm">55cm</option></select>
	 		</div>
	 		<div id="id4"><span>   :</span><input type="checkbox" value="  " id="check1">  </input><input type="checkbox" value="  " id="check2">  </input><input type="checkbox" value="  " id="check3">  </input><input type="checkbox" value="   " id="check4">   </input></div>
	 		<div id="id5"><input type="button" value="  " onclick="func()" /></div>
	 	</form>
	 	<form action="#" method="post" id="form2">
	 		<h1>     </h1>
	 	</form>
	 	<script type="text/javascript">
	 		function $(id){
                return document.getElementById(id);
            }
            var a=$("form2");
            var b=$("form1");
            var c=$("text");
            function func(){
            	//     
            	var p1=document.createElement("p");
            	var text=c.value;
            	var text1=document.createTextNode("  :"+text);
            	p1.appendChild(text1);
            	a.appendChild(p1);
            	//     
            	var p2=document.createElement("p");
            	var radio1=$("g1").checked;
            	var radio2=$("g2").checked;
            	var radio3=$("g3").checked;
            	if(radio1==true) var gender=" ";
            	else if(radio2==true) var gender=" ";
            	else if(radio3==true) var gender="  ";
  				var text2=document.createTextNode("  :"+gender);
            	p2.appendChild(text2);
            	a.appendChild(p2);
            	//     
            	var p3=document.createElement("p");
            	var select1=$("sanwei1").value;
            	var select2=$("sanwei2").value;
            	var select3=$("sanwei3").value;
            	var text4=document.createTextNode("  :"+"   "+select1+"    "+select2+"    "+select3);
            	p3.appendChild(text4);
            	a.appendChild(p3);
            	//     
            	var check1=$("check1").checked;
            	var check2=$("check2").checked;	 
            	var check3=$("check3").checked;	 
            	var check4=$("check4").checked;
            	if(check1==true) var it1="   "; else it1="";
            	if(check2==true) var it2="   "; else it2="";
            	if(check3==true) var it3="   "; else it3="";
            	if(check4==true) var it4="   "; else it4="";
            	var p4=document.createElement("p");
            	var text3=document.createTextNode("   :"+it1+it2+it3+it4);
            	p4.appendChild(text3);
            	a.appendChild(p4);	 	 
            }
	 	</script>
	</body>
</html>