แจก!!! 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

แจก!!! Radio button css สวย ๆ มัดรวมไว้ในไฟล์เดียว

หากใครกำลังมองหา CSS สวย ๆ สำหรับทำ Radio button แล้วละก็ วันนี้ Onlymycode มีโค้ดไฟล์ CSS มาแจก ให้ท่าน ๆ สามารถโหลดไปใช้งานกันได้เลยผ่าน ปุ่ม Download ด้านล่าง

Download

See the Pen Radio button css example by Kiti Chan Boyd (@kiti-chan-boyd) on CodePen.

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

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin = "anonymous">
<link rel="stylesheet" href="icheck-bootstrap.css">

ตัวอย่างการสร้างสร้าง Radio Button ผ่าน css ของ icheck คือการเรียกใช้งาน DIV ที่ครอบ Input radio ไว้ เช่น <div class="radio icheck-success"></div>  และการกำหนด Id ให้กับ input และ label ให้สอดคล้องกัน

<div class="container">
   <div class="row">
        <div class="col-sm-3">
            <div class="radio icheck-default">
                <input type="radio" id="default1" name="default" />
                <label for="default1">Option 1</label>
            </div>
            <div class="radio icheck-default">
                <input type="radio" checked id="default2" name="default" />
                <label for="default2">Option 2</label>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="radio icheck-primary">
                <input type="radio" checked id="primary1" name="primary" />
                <label for="primary1">Option 1</label>
            </div>
            <div class="radio icheck-primary">
                <input type="radio" id="primary2" name="primary" />
                <label for="primary2">Option 2</label>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="radio icheck-success">
                <input type="radio" id="success1" name="success"/>
                <label for="success1">Option 1</label>
            </div>
            <div class="radio icheck-success">
                <input type="radio" checked id="success2" name="success"/>
                <label for="success2">Option 2</label>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="radio icheck-info">
                <input type="radio" checked id="info1" name="info" />
                <label for="info1">Option 1</label>
            </div>
            <div class="radio icheck-info">
                <input type="radio" id="info2" name="info" />
                <label for="info2">Option 2</label>
            </div>
        </div>
    </div>
</div>

Read More

แจก!!! Checkbox css สวย ๆ มัดรวมไว้ในไฟล์เดียว

หากใครกำลังมองหา CSS สวย ๆ สำหรับทำ Checkbox แล้วละก็ วันนี้ Onlymycode มีโค้ดไฟล์ CSS มาแจก ให้ท่าน ๆ สามารถโหลดไปใช้งานกันได้เลยผ่าน ปุ่ม Download ด้านล่าง

Download

See the Pen Checkbox CSS Example by Kiti Chan Boyd (@kiti-chan-boyd) on CodePen.

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

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin = "anonymous">
<link rel="stylesheet" href="icheck-bootstrap.css">

ตัวอย่างการสร้างสร้าง checkbox ผ่าน css ของ icheck คือการเรียกใช้งาน DIV ที่ครอบ Input checkbox ไว้ เช่น <div class="checkbox icheck-success"></div>  และการกำหนด Id ให้กับ input และ label ให้สอดคล้องกัน

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <div class="checkbox icheck-default">
                <input type="checkbox" checked id="icheck-default" />
                <label for="icheck-default">icheck-default</label>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="checkbox icheck-primary">
                <input type="checkbox" checked id="icheck-primary" />
                <label for="icheck-primary">icheck-primary</label>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="checkbox icheck-success">
                <input type="checkbox" checked id="icheck-success" />
                <label for="icheck-success">icheck-success</label>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="checkbox icheck-info">
                <input type="checkbox" checked id="icheck-info" />
                <label for="icheck-info">icheck-info</label>
            </div>
        </div>
    </div>
</div>

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