Posts Tagged ‘ jQuery

[javascript] How to get all elements in form

<html>
<head>
<script type="text/javascript">
	function showFormElement(){
		//Get all element from object form
		var els = document.getElementById('sys_form').elements;
		var str = "";
		for(var i = 0; i < els.length; i++){
			str += "type : "+ els[i].type +" name : "+ 
			els[i].name + " id : "+ els[i].id +" value : "+ 
			els[i].value + "\n";
		} 
		alert(str);
	}
</script>
</head>
<body>
<form id="sys_form" name="sys_form" target="#">
	<input type="hidden" name="el_hidden" id="el_hidden" value="I'm hidden" />
	<input type="text" name="el_text" id="el_text" value="I'm text" /><br />
	<select name="el_select" id="el_select">
		<option value="xxx">xxx</option>
	</select><br />
	<input type="checkbox" name="el_checkbox" id="checkbox" checked /><br />
	<input type="radio" name="el_radio" /><br />
	<textarea name="el_textarea" id="el_textarea">I'm textarea</textarea><br />
	<br />
	<input type="button" value="Show Info" onclick="showFormElement();" /> 
</form>
</body>
</html>

หมายเหตุ : ถ้าใช้ jQuery นี่คงสบายกว่านี้

jQuery Plugin : กรอกเฉพาะตัวเลข

ห่างหายไปนานเนื่องจากสถานการณ์การเมือง การงาน (อ้างเล็กน้อย) พอดีมีงานที่ต้องการให้ User กรอกข้อมูลได้เฉพาะตัวเลข และ จัด รูปแบบหลักพันให้เลย (เรียกไม่ค่อยถูก) ซึ่งมันค่อนข้างยากเหมือนกันในการป้องกัน ก็เลยลองๆดู jQuery พระเอกคนเก่งของเรา ซึ่งก็ลองๆเขียน Plugin ขึ้นมาดังนี้

(function($) {
	/** +++++ function formatCurrency +++++ */
	$.fn.formatCurrency = function(options) { 
		var defaults = {
			splitChar : ',',
			allowChar : '0123456789.-',
			splitLen : 3
		};
		
		var opts = $.extend(defaults, options);
		return this.each(function(){
			//When Press Keyboard
			$(this).keypress(function(e){
				//Allow enter, backspace,delete 
				if(e.which == 13 || e.which == 8 || e.which==0) { 
					return true; 
				}
				//Disable ctrl,alt key 
				if(e.ctrlKey || e.altKey) { 
					return false; 
				} 
				
				var ch = String.fromCharCode(e.which);
				if(ch == "-"){
					var value = $(this).val();
					if(value.lastIndexOf("-") > 0) return false;
				}
				return opts.allowChar.indexOf(ch) > -1; 
			});
			//When Up keyboard
			$(this).keyup (function(e){
				var value = $(this).val();
				var subChar = "";
				value = value.replace(/,/gi,"");
				if(value.indexOf("-") >= 0){
					value = value.replace(/-/gi,"");
					subChar = "-";
				}
				//Split Decimals
				var arrs = value.toString().split(".");
				//Split data and reverse
				var revs = arrs[0].split("").reverse().join("");
				var len = revs.length;
				var tmp = "";
				for(i = 0; i < len; i++){
					if(i > 0 && (i%opts.splitLen) == 0){
						tmp += opts.splitChar + revs.charAt(i);
					}else{
						tmp += revs.charAt(i);
					}
				} 
				
				//Split data and reverse back
				tmp = tmp.split("").reverse().join("");
				if(arrs.length > 1 && arrs[1] != undefined){
					tmp += "."+ arrs[1];
					tmp = subChar+tmp;
				}else{
					tmp = subChar+tmp;
				}
				
				$(this).val(tmp);
			});
		});
	};
})(jQuery);

Read more