Tag Archive checkbox

Byphunsanit
, , , ,

ทำ checkbox / radio สวยๆ

สิ่งที่ css framework อย่าง bootstrapt ไม่ยอมทำซักทีคือ ทำให้ checkbox หรือ radio ออกมาเหมือนๆกันทุก browser ทำให้การออกแบบฟอร์มทำได้ไม่สวยงามเท่าที่ควร

แก้ได้โดยใช้ fronteed/icheck มาวางภาพทับ checkbox หรือ radio ไว้ และทำการจับ event แทนตัว input จริงๆ

ตัวอย่าง

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery iCheck</title>
<link href="vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="vendor/fronteed/icheck/skins/square/green.css" rel="stylesheet" type="text/css">
</head>
<body>
<?php
if(count($_POST)) {
   echo '<pre>', print_r($_POST, true), '</pre>';
}
?>
<div class="container">
  <form action="jQuery.icheck.php" id="formA" method="post">
    <fieldset class="form-group row">
      <legend class="col-form-legend col-sm-2">Checkbox</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" checked id="chk1" name="checkbox1" type="checkbox" value="checkbox1">
            Check me out </label>
        </div>
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" id="chk2" name="checkbox2" type="checkbox" value="checkbox2">
            Check me </label>
        </div>
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" id="chk3" name="checkbox3" type="checkbox" value="checkbox3" disabled>
            Check is disabled </label>
        </div>
      </div>
    </fieldset>
    <fieldset class="form-group row">
      <legend class="col-form-legend col-sm-2">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" checked id="gridRadios1" name="radio" type="radio" value="option1">
            Check me out </label>
        </div>
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" id="gridRadios2" name="radio" type="radio" value="option2">
            Check me </label>
        </div>
        <div class="form-check disabled">
          <label class="form-check-label">
            <input class="form-check-input" disabled id="gridRadios3" name="radio" type="radio" value="option3">
            Check is disabled </label>
        </div>
      </div>
    </fieldset>
    <div class="form-group row">
      <label class="col-sm-2"></label>
      <div class="col-sm-10 text-right">
        <button class="btn btn-lg btn-primary" type="submit">Save</button>
      </div>
    </div>
  </form>
  <hr>
  <button class="btn btn-lg btn-info" id="ajaxBtn" type="button">AJAX Value</button>
</div>
<script src="vendor/components/jquery/jquery.min.js"></script>
<script src="vendor/fronteed/icheck/icheck.min.js"></script>
<script>
$(function () {

  /* style */
  $('input').iCheck({
     "checkboxClass": "icheckbox_square-green",
     "radioClass": "iradio_square-green",
  });

  /* event */
  $('input').on('ifChanged', function(event) {
    console.log(event);

    alert('checked = ' + event.target.checked);
    alert('id = ' + event.target.id);
    alert('name = ' + event.target.name);
    alert('type = ' + event.target.type);
    alert('value = ' + event.target.value);
  });

  /* value */
  $('#ajaxBtn').click(function() {
     var formData = $('#formA').serializeArray();
     var message = '';

     $.each(formData, function (index, item) {
  	  message +='\n' +  index + ' ' +  item.name + ' = '+item.value;
     });

     alert(message);

  });

});
</script>
</body>
</html>

สามารถเปลี่ยนรูปแบบอื่นได้โดยดู style ได้จาก iCheck v1.0.1 @FRONTEED จากนั้นเปลี่ยน css ไฟล์ และ checkboxClass หรือ radioClass ไม่ก็ทำภาพพื้นหลังใหม่และเขียน css ของตัวเองก็ได้

Byphunsanit
, , , , , , , , , , ,

ส่งค่าตัวแปรในเช็กบ็อกซ์โดย jQuery

เขียนระบบ update ข้อมูลโดยใช้ ajax แต่ปัญหาคือ ใน form นี้มันมี input อยู่หลายตัว และเพราะว่าต้องการแค่ input ที่ชื่อ items[] ตัวเดียวเท่านั้น ถ้าส่ง data ไปโดยใช้ jQuery โดยปกติจะส่งค่าไปโดยใช้ .serialize() หรือ .serializeArray() ก็จะส่งตัวแปรอื่นๆ ที่ไม่จำเป็นติดไปด้วย จนทำให้ url ยาวจนเกิน limit ทำให้ต้องหาวิธีส่งไปเฉพาะตัวที่ใช้จริงๆ เท่านั้น

ตัวอย่างการส่งค่าไปในแบบ array

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>checkbox to array</title>
</head>

<body>
    <ul>
        <li>
            <input name="items[]" type="checkbox" value="c1">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c2">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c3">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c4">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c5">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c6">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c7">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c8">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c9">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c10">
        </li>
    </ul>
    <div id="result"></div>
    <button id="sendBtn" type="submit">Send</button>
    <script src="jquery-3.1.1.min.js"></script>
    <script>
    $(function() {

        $('#sendBtn').click(function() {
            var checkboxs = $('input[name="items\\[\\]"]:checked');

            alert('checked ' + checkboxs.length + ' items');

            var values = checkboxs.map(function() {
                    return $(this).val();
                })
                .get();

            var params = {
                "id": 24,
                "items": values,
            };
            $.ajax({
                "data": params,
                "success": function(data) {
                    $('#result').html(data);
                },
                "type": "GET",
                "url": "processing.php",
            });

        });

    });
    </script>
</body>

</html>

ตัวอย่างการส่งค่าไปในแบบ string

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>checkbox to string</title>
</head>

<body>
    <ul>
        <li>
            <input name="items[]" type="checkbox" value="c1">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c2">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c3">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c4">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c5">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c6">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c7">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c8">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c9">
        </li>
        <li>
            <input name="items[]" type="checkbox" value="c10">
        </li>
    </ul>
    <div id="result"></div>
    <button id="sendBtn" type="submit">Send</button>
    <script src="jquery-3.1.1.min.js"></script>
    <script>
    $(function() {

        $('#sendBtn').click(function() {
            var checkboxs = $('input[name="items\\[\\]"]:checked');

            alert('checked ' + checkboxs.length + ' items');

            var values = checkboxs.map(function() {
                    return $(this).val();
                })
                .get()
                .join();

            alert('values = ' + values);

            var encoded = encodeURIComponent(values);

            alert('URL encoded = ' + encoded);

            var decoded = decodeURIComponent(encoded);

            alert('URL decoded = ' + decoded);

            $.ajax({
                "data": 'id=24&items=' + encoded,
                "success": function(data) {
                    $('#result').html(data);
                },
                "type": "GET",
                "url": "processing.php",
            });

        });

    });
    </script>
</body>

</html>

ตัวอย่างการนำค่าไปเขียนเป็น sql query

<dl>
  <dt>method="GET"</dt>
  <dd><?=print_r($_GET, true);?></dd>
  <dt>method="POST"</dt>
  <dd><?=print_r($_POST, true);?></dd>
</dl>
<?php
if (is_array($_REQUEST['items'])) {
    echo '<br>send items by array';
    $where = "WHERE id IN('" . implode("', '", $_REQUEST['items']) . "')";
} else {
    echo '<br>send items by string';
    $where = "WHERE id IN('" . str_replace(',', "', '", $_REQUEST['items']) . "')";
}

$query = "SELECT *
FROM table_name
$where;";

echo '<br>example query = ' . $query;

เลือกใช้การส่งแบบสตริงหรืออาร์เรย์ ก็แล้วแต่ความสดวก ที่ต้องนำไป loop อีกหรือแค่ใช้ในการสร้างเอสคิวแอลคิวรีอย่างเดียว

Byphunsanit
, , , , , , ,

ตรวจฟอร์มด้วย HTML 5 / jQuery Validation Plugin

HTML 5 มี attribute อย่าง required ช่วยตรวจสอบฟอร์ม แต่มันยังไม่สมบูรณ์ เช่น ใช้ required กับกลุ่ม checkbox ไม่ได้ มันตรวจได้แค่เลือก checkbox ตัวนั้นๆเท่านั้น จะบังคับให้เลือก 1 ในตัวเลือกไม่ได้

ทำให้ต้องใช้เจคิวรี่อย่าง jQuery Validation Plugin ช่วย

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Validation : html5 / inline</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<form action="validation.php" enctype="multipart/form-data" id="formA" method="post">
	<div class="form-group">
		<p>เครื่องปรุง</p>
		<!-- ใส่ required ใน input ตัวแรกก็พอ -->
		<label>
			<input type="checkbox" name="flavoring[]" value="1" required>
			เกลือ</label>
		<label>
			<input type="checkbox" name="flavoring[]" value="2">
			น้ำตาล</label>
		<label>
			<input type="checkbox" name="flavoring[]" value="3">
			น้ำปลา</label>
		<label>
			<input type="checkbox" name="flavoring[]" value="4">
			พริกป่น</label>
		<!-- แสดง error ตรงนี้ อย่าลืม  class="error" -->
		<label for="flavoring[]" class="error"></label>
	</div>
	<div class="form-inline">
		<div class="form-group"><!-- input text ธรรมดา -->
			<label>สั่งวันที่
				<input type="text" name="dateOrder" required data-rule-date="true">
			</label>
		</div>
		<div class="form-group"><!-- input date -->
			<label>ส่งวันที่
				<input type="date" name="dateDelivery" required>
			</label>
		</div>
	</div>
	<div class="form-inline">
		<div class="form-group"><!-- min and max length -->
			<label>
				<input type="text" id="sendto" name="sendto" required minlength="10" maxlength="50" data-rule-email="true">
				Email</label>
		</div>
		<div class="form-group"> <!-- data-rule-equalTo id sendto -->
			<label>
				<input type="email" id="sendtoSame" name="sendtoSame" required data-rule-equalTo="#sendto">
				Email Confirm</label>
		</div>
	</div>
	<div class="form-inline">
		<div class="form-group">
			<label>รับเฉพาะภาพ
				<input type="file" name="image" accept="image/*">
			</label>
		</div>
		<div class="form-group"><!-- style input -->
			<label class="btn btn-primary">รับแต่ .jpeg
				<input type="file" name="jpeg" accept="image/jpeg" style="display:none;">
			</label>
		</div>
	</div>
	<div class="form-inline">
		<div class="form-group">
			<label>ข้าวเปล่า
				<input type="text" name="rice" data-rule-number="true">
			</label>
		</div>
		<div class="form-group">
			<label>แคปหมู (ปลีก สั่งเป็นขีดได้ เช่น 0.5)
				<input type="number" name="friedPorkSkin" step="0.1">
			</label>
		</div>
		<div class="form-group"><!-- custom message -->
			<label>แคปหมู (ส่ง kg.)
				<input type="number" name="friedPorkSkin" data-rule-digits="true" data-message-digits="ขายแต่เป็น KG ครับ">
			</label>
		</div>
	</div>
	<div class="form-group">
		<p>เส้น</p>
		<!-- ใส่ required ใน input ตัวแรกก็พอ -->
		<label>
			<input type="radio" name="noodle" value="1" required>
			เส้นหมี่</label>
		<label>
			<input type="radio" name="noodle" value="2">
			เส้นเล็ก</label>
		<label>
			<input type="radio" name="noodle" value="3">
			เส้นใหญ่</label>
		<label>
			<input type="radio" name="noodle" value="4">
			เส้นหมี่</label>
		<!-- แสดง error ตรงนี้ อย่าลืม  class="error" -->
		<label for="noodle" class="error"></label>
	</div>
	<div class="form-group">
		<label>ลวกนานมั๋ย
			<input type="range" min="2" max="8" step="1">
		</label>
	</div>
	<div class="form-inline">
		<div class="form-group">
			<label>เว็บบริษัท
				<input type="text" name="officeUrl" data-rule-url="true">
			</label>
		</div>
		<div class="form-group">
			<label>เว็บส่วนตัว
				<input type="url" name="blogUrl">
			</label>
		</div>
	</div>
	<input type="submit" value="Submit">
</form>
<script src="assets/jQuery/jquery.min.js"></script>
<script src="plus/jQuery/jquery-validation/jquery.validate.min.js"></script>
<script>
$(function()
{
	$('#formA').validate();
});
</script>
</body>
</html>

Proudly powered by WordPress | Theme: Appointment by Webriti