Archive for the ‘ JavaScript Technology ’ Category

[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

การบวกวันที่ เดือน ปี ใน javaScript

Note ไว้กันลืมเนื่องจากทำมานานแล้ว และคิดว่ายังคงใช้งานได้อยู่ เป็นวิํธีการบวกวันที่ เดือน และ ปี
การบวกวัน

/**
 * Add day to input date 
 * dateStr format must be month/day/year
 */
function calendarAddDay(dateStr, day){  
	//Create date object from input date
    var date = new Date(dateStr);		
	//Add day
    date.setDate(date.getDate()+day);  
   
    return date.getDate()+"/"+(date.getMonth()+1)+"/"+date.getFullYear();
} 

การบวกเดือน

/**
 * Add month to input date 
 * dateStr format must be month/day/year
 */
function calendarAddMonth(dateStr, month){  
	//Create date object from input date
    var date = new Date(dateStr);		
	//Add month
    date.setMonth(date.getMonth()+month);  
   
    return date.getDate()+"/"+(date.getMonth()+1)+"/"+date.getFullYear();
}  

การบวกปี

/**
 * Add year to input date 
 * dateStr format must be month/day/year
 */
function calendarAddYear(dateStr, year){  
	//Create date object from input date
    var date = new Date(dateStr);		
	//Add year
    date.setYear(date.getFullYear()+year);  
   
    return date.getDate()+"/"+(date.getMonth()+1)+"/"+date.getFullYear();
}  

Format Currency ด้วย JavaScript

เป็นตัวอย่าง Code การแปลงค่าตัวเลข ให้อยู่ในรูปแบบจำนวนเงิน ที่คั่นด้วย comma

function formatCurrency(val){     
	if(val == "" || val == null || val == "NULL") return val;
	
	//Split Decimals
    var arrs = val.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%3) == 0){  
            tmp+=","+revs.charAt(i);         
        }else{  
            tmp += revs.charAt(i);
        }  
    }  
	
	//Split data and reverse back
	tmp = tmp.split("").reverse().join("");	
	//Check Decimals
    if(arrs.length > 1 && arrs[1] != undefined){  
        tmp += "."+ arrs[1];  
    }  
    return tmp;  
} 

หลังจากเขียนและใช้มานาน เพิ่งรู้ว่ามี Library ที่คนอื่นเขียนไว้แล้วและใช้ประโยชน์ได้อย่างมากที่
JavaScript Number Format v1.5.4

การ trim ด้วย JavaScript

เป็น Code ที่ผมใช้บ่อยๆ แต่ไม่รู้ว่าถูกต้องแน่นอน หรือไม่ รูปก็คือ ใช้ Regular Expression มาช่วยครับ

function trim(str){  
	return str.replace(/^\s*|\s*$/g,"");  
}  

อย่างที่กล่าวไว้แต่แรกครับ ไม่รู้ว่าถูกต้องแค่ไหนแต่ผมก็ใช้งานกับ Application ที่พัฒนามาหลายตัวแล้วครับยังไม่เจอปัญหา