Javascript : สร้าง Pattle กรอกเลขบัตรประชาชน

Post by Goborijung at 2019-11-26 13:32:15 | ID: 186

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script language="javascript">
//เมื่อมีการคลิกฟังก์ชัน
$(function (){
 $('#btn_sub').click(function (){
   if($('#txtID').val().trim()==''){
    $('#msg').text('กรุณากรอกเลขประจำตัว');
    $('#txtID').focus();
   }else{
 
    //checkID($('#txtID').val() จะไปเรียกฟังก์ชัน  checkID(id)
    if(!checkID($('#txtID').val().trim())){
     alert('รหัสประชาชนไม่ถูกต้อง');
    }else{
     alert('รหัสประชาชนถูกต้อง เชิญผ่านได้'); 
     $('#msg').text($('#txtID').val().trim());
    }
   }
 });
});

//ตรวจสอบเลข ปปช ว่ามีจริงหรือไม่
function checkID(id)
{
//ตัดข้อความ - ออก
var zid = id;
var zids = zid.split("-");
for(var i=0;i<zids.length;i++){
 zids[i];
}
var id_val = zids[0]+zids[1]+zids[2]+zids[3]+zids[4];
if(id_val.length != 13) return false;
for(i=0, sum=0; i < 12; i++)
sum += parseFloat(id_val.charAt(i))*(13-i); if((11-sum%11)%10!=parseFloat(id_val.charAt(12)))
return false; return true;
}

//ฟังก์ชัน รูปแบบ
function autoTab(obj){
 /* กำหนดรูปแบบข้อความโดยให้ _ แทนค่าอะไรก็ได้ แล้วตามด้วยเครื่องหมาย
 หรือสัญลักษณ์ที่ใช้แบ่ง เช่นกำหนดเป็น  รูปแบบเลขที่บัตรประชาชน
 4-2215-54125-6-12 ก็สามารถกำหนดเป็น  _-____-_____-_-__
 รูปแบบเบอร์โทรศัพท์ 08-4521-6521 กำหนดเป็น __-____-____
 หรือกำหนดเวลาเช่น 12:45:30 กำหนดเป็น __:__:__
 ตัวอย่างข้างล่างเป็นการกำหนดรูปแบบเลขบัตรประชาชน
 */
  var pattern=new String("_-____-_____-_-__"); // กำหนดรูปแบบในนี้
  var pattern_ex=new String("-"); // กำหนดสัญลักษณ์หรือเครื่องหมายที่ใช้แบ่งในนี้
  var returnText=new String("");
  var obj_l=obj.value.length;
  var obj_l2=obj_l-1;
  for(i=0;i<pattern.length;i++){   
   if(obj_l2==i && pattern.charAt(i+1)==pattern_ex){
    returnText+=obj.value+pattern_ex;
    obj.value=returnText;
   }
  }
  if(obj_l>=pattern.length){
   obj.value=obj.value.substr(0,pattern.length);   
  }
}
</script>

รหัสประจำตัวประชาชน : <input type="text" name="txtID" id="txtID" onkeyup="autoTab(this)"/>
<input type="button" value="CLICK" id="btn_sub"/>
<br/><br/><br/>
<span id="msg" style="color:red"></span>

Javascript :: CheckBox Check All

Post by Goborijung at 2021-03-24 09:26:30 | ID: 361

Javascript  CheckBox All
-- HTML
<form action='' method='post'>
  <input type="checkbox" onchange="checkAll()" name="chk[]"> Check All
  <input type="checkbox" name="chkbox[]" value="<?=$rs['OID']?>">
</form>

-- JS
<script>
  /* all checkbox */
  function checkAll()
  {
		var checkboxes = document.getElementsByTagName('input'); //alert(checkboxes);
		var val = null;
		for (var i = 0; i < checkboxes.length; i++)
		{
			if (checkboxes[i].type == 'checkbox')
			{
				if (val === null) val = checkboxes[i].checked;
				checkboxes[i].checked = val;
			}
		}
  }  
</script>

-- PHP
<?php
  $chkVal = isset($_POST['chkbox'])?$_POST['chkbox']:'';
  print_r($chkVal);
?>

> ตัวอย่างการใช้งาน CheckAll
https://www.thaicreate.com/community/jquery-check-all-checkbox-count-checkbox.html

Javascript :: Check All (HTML + JS)

Post by Goborijung at 2019-12-28 09:45:01 | ID: 362

การทำ CheckAll อย่างง่าย

ตัวอย่าง
<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>

<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>

<script>
function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
}
</script>

หรือ 

-- HTML
<input type="checkbox" onchange="checkAll(this)" name="chkAll" id="chkAll"> Check All
<input type="checkbox" name="chkbox[]" id="chkbox" value="1">
<input type="checkbox" name="chkbox[]" id="chkbox" value="2">

-- JS
<script>
  function checkAll(source)
  {
  // alert(555);
  var x = document.getElementsByName('chkbox[]'); //นับ ElementsByName = chkbox
  //alert('ค้นเจอ : '+x.length); //2
  
  // Toggle CheckAll
  //for(var i=0, n=x.length; i<n; i++) {
  for(var i=0; i<x.length; i++) {
  x[i].checked = source.checked;
  }
  }
</script>

Javascript :: Confirm Delete

Post by Goborijung at 2020-01-25 20:16:08 | ID: 378

<a href="javascript:;" onclick="return confirm('del ?')"><i class="fa fa-edit text-primary"></i></a>

Javascript :: GET Value ById , byName

Post by Goborijung at 2019-06-07 09:50:59 | ID: 87

var xx = document.getElementById("idname").value;

ตัวอย่าง

let val = document.getElementById("idname").value;
let elements = document.getElementsByName("idname")[0].value;

var x = document.getElementsByName("fname1")[0].value;

Javascript :: Button add Row and Check All

Post by Goborijung at 2019-12-21 13:24:49 | ID: 352

<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<table id="dataTable" cellPadding="5" cellSpacing="0" border="1" rules="all">
    <tr>
        <th>
            <input type="checkbox" onchange="checkAll()" name="chk[]" />
        </th>
        <th>Make</th>
        <th>Model</th>
        <th>Description</th>
        <th>Start Year</th>
        <th>End Year</th>
    </tr>
</table>

<script>

 function addRow(tableID) {
     var table = document.getElementById(tableID);
     var rowCount = table.rows.length;
     var row = table.insertRow(rowCount);
     var cell1 = row.insertCell(0);
     var element1 = document.createElement("input");
     element1.type = "checkbox";
     element1.name = "chkbox[]";
     cell1.appendChild(element1);
     var cell2 = row.insertCell(1);
     cell2.innerHTML = rowCount;
     var cell3 = row.insertCell(2);
     cell3.innerHTML = rowCount;
     var cell4 = row.insertCell(3);
     cell4.innerHTML = rowCount;
     var cell5 = row.insertCell(4);
     cell5.innerHTML = rowCount;
     var cell6 = row.insertCell(5);
     cell6.innerHTML = rowCount;
 }

 function deleteRow(tableID) {
	 var table = document.getElementById(tableID);
	 var rowCount = table.rows.length;

	 for (var i = 1; i < rowCount; i++) {
		 var row = table.rows[i];
		 var chkbox = row.cells[0].children[0];
		 if (chkbox != null && chkbox.checked == true) {
			 table.deleteRow(i);
			 rowCount--;
			 i--;
		 }
	 }
	 var rootChkbox = table.rows[0].cells[0].children[0];
	 if (rowCount == 1) rootChkbox.checked = false;
 }

 function checkAll() {
     var checkboxes = document.getElementsByTagName('input');
	 var val = null;
     for (var i = 0; i < checkboxes.length; i++) {
         if (checkboxes[i].type == 'checkbox') {
             if (val === null) val = checkboxes[i].checked;
             checkboxes[i].checked = val;
         }
     }
 }
 </script>

Javascript :: Check Form input is Number

Post by Goborijung at 2019-12-05 09:51:26 | ID: 204

<input type="text" name="some_name" size="13" maxlength="13" onkeyup="if(isNaN(this.value)){alert('กรุณาป้อนตัวเลข')}">

//  isNan = is Not a Number ถ้าไม่ใช่ตัวเลข

Javascript :: Check Form Input is String

Post by Goborijung at 2019-12-05 10:02:36 | ID: 205

<input type="text" name="some_name" size="50" maxlength="50" onkeyup="if( !(isNaN(this.value)) ){alert('กรุณาป้อนตัวหนังสือ')}">

// isNaN = is Not a Number ถ้าไม่ใช่ตัวเลข

Javascript :: Check ID Exist or Not Exist

Post by Goborijung at 2018-12-24 16:12:42 | ID: 59

<script language='javascript'>
var x = document.getElementById('idName');
if(x===null){
   alert('not exist');
}else{
   alert('exist');
}

//Shothand Check
var y = document.getElementById('idName');
alert((y===null)?'Y':'N');
</script>

Javascript :: Google Chart API

Post by Goborijung at 2020-01-07 08:19:19 | ID: 363

https://www.w3schools.com/howto/howto_google_charts.asp

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My Web Page</h1>

<div id="piechart"></div>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart values
function drawChart() {
  var data = google.visualization.arrayToDataTable([
  ['Task', 'Hours per Day'],
  ['Work', 8],
  ['Eat', 2],
  ['TV', 4],
  ['Gym', 2],
  ['Sleep', 8]
]);

  // Optional; add a title and set the width and height of the chart
  var options = {'title':'My Average Day', 'width':550, 'height':400};

  // Display the chart inside the <div> element with id="piechart"
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}
</script>

</body>
</html>