แจก!!! javascript function สำหรับตรวจเลขบัตรประชาชน แบบ Real time อย่างง่าย

เอามาแจกอีกแล้ว Onlymycode กับช่วงเทคนิคง่าย ๆ ที่ได้ใช้บ่อย วันนี้ ขอเสนอ Function สำหรับตรวจสอบเลขบัตรประชาชน

ตัวอย่างการใช้งาน javascript ตรวจสอบเลขบัตร

See the Pen เช็คเลขบัตรประชาชน by Kiti Chan Boyd (@kiti-chan-boyd) on CodePen.

---

ตัวอย่างการใช้งาน

เริ่มที่ เรียกใช้งาน Stylesheet และ Javascript ใน Tag <header>....</header>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script type='text/javascript' src='https://code.jquery.com/jquery-1.12.4.min.js' crossorigin="anonymous"></script>

ส่วนนี้คือตัวอย่าง Code ในฝั่งของ HTML

<div class="container1">
    <div class="row">
        <h1>ตัวอย่าง Script ตรวจเลขบัตร</h1><br/>
        <div class='col-lg-12'>
          <label>กรอกเลขบัตร</label>
          <input type="text" id="idcard" class="form-control" maxlength="13">
          <span class="error"></span>
        </div>
    </div>
</div>

และตัวอย่าง Code ในฝั่งของ Javascript / Code สีฟ้า ใช้สำหรับตรวจสอบ Form key และ Code สีส้ม คือ Function สำหรับตรวจสอบเลขบัตรประชาชนครับ

$(document).ready(function(){
  $('#idcard').on('keyup',function(){
    if($.trim($(this).val()) != '' && $(this).val().length == 13){
      id = $(this).val().replace(/-/g,"");
      var result = Script_checkID(id);
      if(result === false){
        $('span.error').removeClass('true').text('เลขบัตรผิด');
      }else{
        $('span.error').addClass('true').text('เลขบัตรถูกต้อง');
      }
    }else{
      $('span.error').removeClass('true').text('');
    }
  })
});

function Script_checkID(id){
    if(! IsNumeric(id)) return false;
    if(id.substring(0,1)== 0) return false;
    if(id.length != 13) return false;
    for(i=0, sum=0; i < 12; i++)
        sum += parseFloat(id.charAt(i))*(13-i);
    if((11-sum%11)%10!=parseFloat(id.charAt(12))) return false;
    return true;
}
function IsNumeric(input){
    var RE = /^-?(0|INF|(0[1-7][0-7]*)|(0x[0-9a-fA-F]+)|((0|[1-9][0-9]*|(?=[\.,]))([\.,][0-9]+)?([eE]-?\d+)?))$/;
    return (RE.test(input));
}

ตัวอย่าง Code ด้านบน การตรวจสอบเลขบัตรจะให้วิธีจับ Event แบบ on keyup คือ ตรวจสอบทันทีเมื่อมีการพิมพ์ที่ Form  หวัว่างโค้ดชุดนี้จะมีประโยชน์กับทุกคนนะครับ

Read More

แจก!!! PHP เลือก จังหวัด อำเภอ ตำบล ด้วย jQuery Ajax

กำลังบอกหาโค้ดสำหรับลือก จังหวัด อำเภอ ตำบล โดยไม่ต้อง Refresh หน้ากันอยู่ใช่รึป่าว วันนี้ Onlymycode เอา Code เลือก จังหวัด อำเภอ ตำบล ด้วย Jquery Ajax มาฝากกันจ้า


Download


เมื่อ Download เสร็จแล้วจะได้ไฟล์เหมือนในรูป โดยไฟล์ จะมีทั้งตัวอย่างฐานข้อมูล และไฟล์ตัวอย่างการใช้งาน jQeury Ajax ร่วมกับ Database ดังรูป

---

ตัวอย่างการใช้งาน jQuery Ajax เลือก จังหวัด อำเภอ ตำบล

ในการยกตัวอย่างการใช้งาน ผมจะขอนำเสนอในรูปแบบของการทำ jQuery Ajax รายชื่อจังหวัด อำเภอ ตำบล ของประเทศไทย (ลองใช้งานได้ ในกรอบด้านล่าง)

---

ตัวอย่างการใช้งาน

เริ่มที่ เรียกใช้งาน Javascript ใน Tag <header>....</header>

<script src="service/province.service.js" type="text/javascript"></script>

ส่วนนี้คือตัวอย่าง Code ในฝั่งของ HTML

<div class="container" style="margin-top: 25px;">
    <div class="row">
        <div class="col-lg-4">
            <label class="control-label">จังหวัด</label>
            <select class="form-control selectpicker" data-live-search="true" name="province" id="province" ></select>
        </div>
        <div class="col-lg-4">
            <label class="control-label">อำเภอ/เขต</label>
            <select class="form-control selectpicker" name="district" id="district" >
                <option value="">เลือก</option>
            </select>

        </div>
        <div class="col-lg-4">
            <label class="control-label">ตำบล/แขวง</label>
            <select class="form-control selectpicker" name="subdistrict" id="subdistrict">
                <option value="">เลือก</option>
            </select>
        </div>

    </div>
</div>

ตัวอย่าง Code ด้านบน เมื่อคุณทำการเรียกใช้งานไฟล์ js province.service.js พร้อมทั้งสร้าง Form ที่มี Field จังหวัด อำเภอ ตำบล Service จะทำให้ Form ของคุณเลือก จังหวัด อำเอภ ตำบล ได้เองแบบอัตโนมัติ

ข้อสำคัญ

id ของ Selectbox จะต้องเหมือนกับตัวอย่าง service ถึงจะทำงานได้นะครับ ^ ^

Read More

ทำ DIV ให้สูงเท่ากัน แก้ปัญหาขนาด DIV ในหน้าไม่เท่ากัน

วันนี้ Onlymycode มาพร้อมกับเทคนิคง่าย ๆ แต่ได้ใช้บ่อยเช่นเคย ไม่ว่าทุกจะทำเว็บ Blog หรือเว็บ Ecommerce ปัญหาที่มักจะเจอกันบ่อย ๆ นั้นก็คือ ขนาด DIV ไม่เท่ากัน ดังนั้นเราจึงนำเสนอเทคนิคการแก้ปัญหาง่าย ๆ ด้วยการใช้งาน matchHeight js นั้นเอง

ตัวอย่างการใช้งาน matchHeight js

See the Pen matchHeight js example by Kiti Chan Boyd (@kiti-chan-boyd) on CodePen.

หลักการทำงานของ js ตัวนี้ก็คือ หา DIV ที่มีความสูงมากสุดในแถวนั้น ๆ (Row) จากนั้นทำการกำหนดค่าให้กับ DIV อื่น ๆ ในแถวเดียวกันให้มีความสุดเท่ากับ DIV ที่มีความสูงสูงที่สุด

ตัวอย่างการเขียนโค้ด

เริ่มที่ เรียกใช้งาน  Javascript file ใน Tag <header>....</header>

<script type='text/javascript' src='https://code.jquery.com/jquery-1.12.4.min.js' crossorigin = "anonymous"></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js' crossorigin = "anonymous"></script>

ตัวอย่างการสร้างวางตำแหน่ง DIV

<div class="container">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
</div>

ตัวอย่าง CSS (โดยกำหนดความสูงของ DIV ให้แตกต่างกัน)

<style>
.container{
  float:left;
  display:inline-block;
  width:100%;
  height:auto;
  padding:25px;
}

.box{
  float:left;
  width:50px;
  border:1px solid #ccc;
  margin-right:15px;
}

#box1{
  height:20px;
  background-color:#F00; 
}

#box2{
  height:30px;
  background-color:#4cc203; 
}

#box3{
  height:50px;
  background-color:#00c4ff; 
}
</style>

ในส่วนของ Script กำหนดค่าตัวแปรเริ่มต้นสี ของแต่ละ Input ในรูปแบบของ Array (ส่วนโค้ดสีแดง) เรียกใช้งาน Function colorpicker (ส่วนโค้ดสีส้ม) และส่วนควบคุม (ส่วนโค้ดสีฟ้า) ตามกรอบด้านล่าง

<script>
$(document).ready(function(){
$('.container .box').matchHeight();
})
</script>

ขอบคุณความรู้จาก : https://www.cssscript.com/

Read More

แจก!!! Color picker เลือกสี บนเว็บไซต์ เอาไปติดใช้งานบนหน้าเว็บได้เลย

Download 

ตัวอย่างการใช้งาน Color Picker เลือกสี บนเว็บไซต์ โดยท่านสามารถทดลองใช้งานตัวอย่างด้านล่างนี้ได้เลยครับ

ตัวอย่างการตั้งค่า Text Autocomplete

เริ่มที่ เรียกใช้งาน StyleSheet และ Javascript ใน Tag <header>....</header>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin = "anonymous">
<link type="text/css" rel="stylesheet" href="css/wheelcolorpicker.css" />
<script type='text/javascript' src='https://code.jquery.com/jquery-1.12.4.min.js' crossorigin = "anonymous"></script>
<script type="text/javascript" src="js/jquery.wheelcolorpicker.js"></script>

ส่วน Stylesheet กำหนดค่า css ของ Color Picker

<style>
    h1{
        padding-left: 15px;
        font-size: 20px !important;
        font-weight: bold;
        margin: 0 0 15px 0;
    }

    .example-box{
        float:left;
        width: 300px;
        margin: 25px auto;
    }

    .card{
        padding: 10px 0;
    }

    .form-group{
        padding: 8px 15px;
        margin: 0;
    }

    div.preview_picker{
        float: left;
        background: url(img/select.png) repeat scroll center center transparent;
        border-radius: 3px;
        box-shadow: 2px 2px 2px #444444;
        cursor: pointer;
        height: 30px;
        width: 30px;
    }

    input.colorpicker{
        width: calc(100% - 40px);
        float: left;
        margin-left: 8px;
        height: 33px;

    }

</style>

ในส่วนของ Body สร้าง Input Fields สำหรับ Color picker

<div class="container1">
    <div class="row example-box">
        <h1>ตัวอย่าง Color picker</h1>
        <div class='col-sm-12'>
            <div class="card">
                <div class="form-group">
                    <div class="preview_picker"></div>
                    <input type="text" id="colorpicker" class="colorpicker form-control" />
                </div>
                <div class="form-group">
                    <div class="preview_picker"></div>
                    <input type="text" id="colorpicker2" class="colorpicker form-control" />
                </div>
                <div class="form-group">
                    <div class="preview_picker"></div>
                    <input type="text" id="colorpicker3" class="colorpicker form-control" />
                </div>
            </div>
        </div>
    </div>
</div>

ในส่วนของ Script กำหนดค่าตัวแปรเริ่มต้นสี ของแต่ละ Input ในรูปแบบของ Array (ส่วนโค้ดสีแดง) เรียกใช้งาน Function colorpicker (ส่วนโค้ดสีส้ม) และส่วนควบคุม (ส่วนโค้ดสีฟ้า) ตามกรอบด้านล่าง

<script>
        $(document).ready(function(){
            var defaultColor = ['#ff0000','#ffe100','#0F0'];
            var cnt = 0;
            $('.colorpicker').each(function () {
                $(this).wheelColorPicker('setColor',defaultColor[cnt]);
                $(this).closest('div').find('.preview_picker').css('background-color',defaultColor[cnt]);
                cnt++;
            })

            $('.colorpicker').on('keyup',function(){
                $(this).closest('div').find('.preview_picker').css('background-color', $(this).wheelColorPicker('getValue', 'rgb'))
            });
            $('.colorpicker').on('colorchange', function() {
                $(this).closest('div').find('.preview_picker').css('background-color', $(this).wheelColorPicker('getValue', 'rgb'));
            });
            $('.preview_picker').on('click',function(){
                $(this).closest('.form-group').find('input').focus();
            });
        });
</script>

ขอบคุณความรู้ดี ๆ จาก https://github.com/fujaru/jquery-wheelcolorpicker/

Read More

แจก!!! Textbox รับค่าเฉพาะตัวเลข numeric js function พร้อมตัวอย่างการใช้งาน

Download


แจกโค้ด jQuery สำหรับสำหรับรับทำให้ Textbox รับค่าเฉพาะตัวเลข รองรับการปรับแต่ง รับค่า และกำหนด ตำแหน่งของ ทศนิยม และตัวเลขแบบติดลบได้ ตามตัวอย่างด้านล่างนี้

See the Pen Jquery Input number only by Kiti Chan Boyd (@kiti-chan-boyd) on CodePen.

รูปภาพประกอบตัวอย่างการใช้งาน numeric js function

จากตัวอย่างด้านบน เมื่อราทำการกรอกข้อมูล Textbox สองช่องด้านบน คือ Textbox แบบมาตรฐาน ไม่ได้เรียกใช้งานงาน function .numeric จะสังเกตุได้ ถึงแม้ว่า Textbox ช่องที่ 2 จะระบุประเภทเป็น number ก็ตามก็ยังไม่สามารถกรอกข้อมูลตัวเลขที่ถูกต้องได้ แต่ Textbox ช่องที่ 3 ที่เรียกใช้ Function Numeric js สามารถกรอกตัวเลขได้อย่างถูกต้อง

---

ตัวอย่างการเขียนโค้ด

เราสามารถเรียกใช้งาน jQuery โดยเพิ่ม code script ลงไปใน Tag <header>....</header> ตามรูปด้านล่าง และเพื่อเพิ่มความสวยงามให้กับ Form เราสามารถเรียกใช้ Bootstarp css ได้อีกด้วย

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script type='text/javascript' src='https://code.jquery.com/jquery-1.12.4.min.js' crossorigin="anonymous"></script>
<script src="js/jquery.numeric.js" crossorigin="anonymous"></script>

Code ส่วนของ HTML สำหรับสร้าง Radio button และ Textbox

<div class="container1">
    <div class="row example-box">
        <h1>Textbox กอรอกได้เฉพาะตัวเลข</h1>
        <div class='col-sm-12'>
            <div class="form-group">
                <h2>Input type "text"</h2>
                <input type="text" class="normal-text form-control" placeholder="Text box">
            </div>
        </div>
        <div class='col-sm-12'>
            <div class="form-group">
                <h2>Input type "Number"</h2>
                <input type="number" class="normal-text form-control" placeholder="Number Box">
            </div>
        </div>
        <div class="col-sm-12">
            <div class="form-group">
                <h2>Input With "Numeric JS"</h2>
                <input type="text" class="numeric form-control" placeholder="Numeric Box">
            </div>
        </div>
    </div>
</div>

Code ส่วน javascript สำหรับเขียน function ควบคุมการ ซ่อน/แสดง Textbox ผ่านการเลือก Radio Button

<script>
$(document).ready(function(){
$('.numeric').numeric({ altDecimal: ".", negative: true, decimalPlaces: 2});
});
</script>

---

อธิบายเพิ่มเติม

ตัวอย่างด้านบน เราประกาศให้ input ทุกตัวที่มี class "numberic" เป็นช่อง Textbox ที่กรอกได้เฉพาะตัวเลข ส่วนค่า Config ใน {} มีรายละเอียดดังนี้
{
altDecimal: ".",  << กำหนดจุดทศนิยมเป็น "." (ในบางประเทศ ใช้ "," เป็นจุดทศนิยม)
negative: true,  << รับค่าตัวเลขติดลบหรือไม่ true รับ/falase ไม่รับ
decimalPlaces: 2 << กำหนดตำแหน่งทศนิยม 2 คือให้รับค่าทศนิยมได้ 2 หลัก
}

Read More