|
|
|
ขอสอบถามเรื่องการตรวจสอบ (validation) การกรอกข้อมูลก่อนส่งค่าออกไปครับ |
|
|
|
|
|
|
|
ตอนนี้ผมได้สามารถส่งข้อมูลไปได้เรียบร้อยแล้ว แต่มันมีปัญหาตรงที่ มันสามารถส่งค่าว่างไปได้โดยที่ยังไม่ได้กรอกข้อมูล
ผมได้ลองใช้ "javascirpt onsubmit="JavaScript:return checker();" แล้ว มันก็ยังส่งค่าว่างออกไปได้เหมือนเดิมครับ
รบกวนแนะนำด้วยครับ
ขอบคุณครับ
add_data
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Prompt" rel="stylesheet">
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/style1.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#txtStudentID").change(function(){
$.ajax({
url: "return.php" ,
type: "POST",
data: 'Sstd_id=' +$("#txtStudentID").val()
})
.success(function(result) {
console.log(result);
var obj = jQuery.parseJSON(result);
if(obj == '')
{
$('input[type=text]').val('');
}
else
{
$.each(obj, function(key, inval, attr) {
$("#txtStudentID").val(inval["std_number"]);
$("#txtFullname").val(inval["std_fullname"]);
$("#txtDepartment").val(inval["std_department"]);
$("#txtPicture").attr("src", "assets/pic_student/"+inval["std_picture"]);
});
}
});
});
});
</script>
</head>
<body>
<center>
<br>
<center>
<div class="container">
<div class="font_1 text-center">
<h3 class="disply-4">Checking Name In Classroom (CNIC)</h3>
</div>
</div>
<br>
<form name="Form1" id="add_name">
<div class="form-group">
<div class="container">
<div class="col-lg-auto" >
<div class="font_1 ">
<div class="row">
<table class="table table-borderless table-condensed ">
<thead class="bg-primary">
<tr>
<th width="20"> <div align="center">Picture</div></th>
<th width="20"> <div align="center">รหัสประจำตัวนักศึกษา</div></th>
<th width="30"> <div align="center">ชื่อ-นามสกุล </div></th>
<th width="30"> <div align="center">สาขาวิชา</div></th>
</tr>
</thead>
<tbody class="bg-dark">
<tr>
<td style="vertical-align:middle;"><div align="center"><img id="txtPicture" src" " width="100px;" height="100px;" ></div></td>
<td style="vertical-align:middle;"><div align="center"><input type="text" class="text-center" id="txtStudentID" name="StudentID" placeholder="รหัสประจำตัวนักศึกษา" size="15" ></div>
<td style="vertical-align:middle;"><div align="center"><input type="text" class="text-center" id="txtFullname" name="Fullname" placeholder="ชื่อ-นามสกุล" size="25" readonly="readonly"></div></td>
<td style="vertical-align:middle;"><div align="center"><input type="text" class="text-center" id="txtDepartment" name="Department" placeholder="สาขาวิชา" size="30" readonly="readonly"></div></td>
</tr>
</tbody>
</table>
</div>
<input type="hidden" name="Activity" id="txtActivity" value="001">
<br>
<input type="button" name="submit1" id="submit" class="btn btn-info" value="ยืนยัน" >
<input type="button" name="reset" value="Clear" class="btn btn-danger" onClick="javascript:location.reload();"/>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
<script>
document.addEventListener('keydown', function(event) {
//event.keyCode == 13 || event.keyCode == 17 || event.keyCode == 74 )
if(event.keyCode == 17 || event.keyCode == 74 )
event.preventDefault();
});
</script>
<script>
$(document).ready(function(){
$('#submit').click(function(){
//var x = $("#txtStudentID");
//if(x != '' ){
//alert('Please Insert');
//return false;
//}
$.ajax({
url : "insert_data.php",
method : "POST",
data : $('#add_name').serialize(),
success:function(data) {
console.log(data);
alert(data);
//$('#add_name')[0].reset();
}
});
});
});
</script>
insert_data
<?php
include ("connect.php");
$std_number = $_POST["StudentID"];
$std_fullname = $_POST["Fullname"];
$std_department = $_POST["Department"];
$act_number = $_POST["Activity"];
$sql = "INSERT INTO activity_tb (std_number, std_fullname, std_department, act_number)
VALUES ('$std_number',
'$std_fullname',
'$std_department',
'$act_number'
)";
$query = mysqli_query($conn,$sql);
if($query){
echo json_encode("Data Insert Successfully");
}
else
{
//print_r($_POST) ;
echo json_encode('problem');
}
mysqli_close($conn);
//if(isset($_REQUEST['std_number']) || isset($_REQUEST['fullname']) )
//{
//print '<pre>';
//print_r($_REQUEST['std_number']);
//print '</pre>';
//print '<pre>';
//print_r($_REQUEST['fullname']);
//print '</pre>';
//}
?>
Tag : PHP, MySQL, HTML5, Ajax
|
|
|
|
|
|
Date :
2019-06-21 01:04:09 |
By :
10219617711257047 |
View :
1121 |
Reply :
2 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
javascirpt onsubmit="JavaScript:return checker(); อยู่ไหน ถ้าไม่ได้เอาโค๊ดมาลงก็ไม่ต้องมาอ้างอิง ไม่มีประโยชน์
สิ่งที่ควรทำจากโค๊ด
บ้นทัด 159 - 166 เปิดใช้งาน
แก้ไขเพิ่มเติม
var x = $("#txtStudentID").val(); // ไม่กำหนด method อ่านค่า value แล้วมันจะส่งค่าออกมาได้ยังไง
if(x.length<1 ) // condition ก็ใช้งานให้ถูกต้อง
จะใช้งานอะไร ได้โปรดอ่าน document ของมันด้วย เป็นเทวดาหรือไง ถีงคิดวารู้ได้เอง
เรื่องแบบนี้มันเป็น พื้นฐานนะครับ แค่อ่าน document ก็เข้าใจแล้ว
คือคำถามมันไม่ได้สร้างสรร ไม่ได้ช่วยให้มีประสบการณ์เพิ่มขึ้น ไม่ใช่เรื่องที่จะเอาไปต่อยอดอะไรเลย
แค่เป็นเรื่องของคนขี้เกียจอ่าน document หรือเป็นเรื่องของคนที่ไม่รู้จักวิธีค้นหา
คำค้น
jquery get value from input
การค้นหาต้องรู้ว่าตัวเองทำอะไร ต้องการอะไร แค่พิมพ์มันก็เจอ
ข้อเสียของ frame work คือมันคิดว่าผู้ใช้ เข้าใจเรื่อง html / javascript มาพอสมควรแล้ว
คำอธิบายมันเลย มีน้อยเกินไม่เหมาะกับมือใหม่ ่ทำให้มือใหม่ใช้เวลานานในการเรียนรู้
ที่สำคัญในการใช้งาน คือ base ไวยกรณ์ของ pure javascript ก่อนที่จะใช้ frame work
เข้าใจโครงสร้างของ object oriented เพราะ javascript ใช้งานกับ object เป็นส่วนใหญ่
|
ประวัติการแก้ไข 2019-06-21 07:04:30
|
|
|
|
Date :
2019-06-21 07:02:16 |
By :
Chaidhanan |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ขอบคุณครับอาจารย์
|
|
|
|
|
Date :
2019-06-21 12:44:13 |
By :
10219617711257047 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 04
|