PlusMagi's Blog By Pitt Phunsanit

plus emotion magic to the knowledge of logic.

Tag Archive checkbox

  • Home   /  
  • Posts tagged "checkbox"

ทำ checkbox / radio สวยๆ

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

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

ตัวอย่าง[code language=”php” title=”jQuery.iCheck.php”]<!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>[/code]

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

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

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

ตัวอย่างการส่งค่าไปในแบบ array[code language=”html” title=”checkbox_to_array.html”]
<!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>[/code]

ตัวอย่างการส่งค่าไปในแบบ string[code language=”html” title=”checkbox_to_string.html”]
<!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>[/code]

ตัวอย่างการนำค่าไปเขียนเป็น sql query[code language=”php” title=”processing.php”]
<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;[/code]

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

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

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

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

[code language=”html”]
<!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>
[/code]

Proudly powered by WordPress | Theme: Appointment Blue by Webriti