วิธีเช็คค่าว่างใน Form ก่อน Submit ด้วย Javascript
form
,
html
,
input
,
javascript
ไม่มีความคิดเห็น
บทความนี้จะขอกล่าวถึงการเช็คค่าว่างในกล่องรับข้อมูลรูปแบบต่างๆอาทิเช่น
Text field , Text area
, Check box , Radio button , List/menu , File Field
1. การเช็คค่าว่างด้วย JavaScript ใน Text field
<html>
<script type="text/javascript">
function fncSubmit()
{
if(document.getElementById('textfield').value == "")
{
alert('PLEASE INPUT DATA');
return false;
}
}
</script>
<body >
<form action="" method="post" onSubmit="JavaScript:return fncSubmit();">
<input type="text" name="textfield" id="textfield">
<input type="submit" name="button" id="button" value="Submit">
</form>
</body>
</html>
2. การเช็คค่าว่างด้วย JavaScript ใน Text area
<html>
<script type="text/javascript">
function fncSubmit()
{
if(document.getElementById('textarea').value == "")
{
alert('PLEASE INPUT DATA');
return false;
}
}
</script>
<body >
<form action="" method="post" onSubmit="JavaScript:return fncSubmit();">
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
<input type="submit" name="button" id="button" value="Submit">
</form>
</body>
</html>
3. การเช็คค่าว่างด้วย JavaScript ใน Check box
<html>
<script type="text/javascript">
function fncSubmit()
{
if(document.getElementById('checkbox').checked == false)
{
alert('PLEASE CHECK BOX TRUE');
return false;
}
}
</script>
<body >
<form action="" method="post" onSubmit="JavaScript:return fncSubmit();">
<input type="checkbox" name="checkbox" id="checkbox">
<input type="submit" name="button" id="button" value="Submit">
</form>
</body>
</html>
4. การเช็คค่าว่างด้วย JavaScript ใน Radio button
<html>
<script type="text/javascript">
function fncSubmit()
{
if(document.getElementById('radio1').checked == false && document.getElementById('radio2').checked == false )
{
alert('PLEASE CHECK radio1 OR radio2 TRUE');
return false;
}
}
</script>
<body >
<form action="" method="post" onSubmit="JavaScript:return fncSubmit();">
<input type="radio" name="radio" id="radio1" value="radio">xxx
<input type="radio" name="radio" id="radio2" value="radio">yyy
<input type="submit" name="button" id="button" value="Submit">
</form>
</body>
</html>
5. การเช็คค่าว่างด้วย JavaScript ใน List/menu
<html>
<script type="text/javascript">
function fncSubmit()
{
if(document.getElementById('select').value == "0" )
{
alert('PLEASE SELECT LIST');
return false;
}
}
</script>
<body >
<form action="" method="post" onSubmit="JavaScript:return fncSubmit();">
<select name="select" id="select">
<option value="0">Please Select</option>
<option value="1">DOG</option>
<option value="2">CAT</option>
<option value="3">PIG</option>
</select>
<input type="submit" name="button" id="button" value="Submit">
</form>
</body>
</html>
6. การเช็คค่าว่างด้วย JavaScript ใน File Field
<html>
<script type="text/javascript">
function fncSubmit()
{
if(document.getElementById('fileField').value == "" )
{
alert('PLEASE CHOOSE FILE');
return false;
}
}
</script>
<body >
<form action="" method="post" enctype="multipart/form-data" onSubmit="JavaScript:return fncSubmit();">
<input type="file" name="fileField" id="fileField">
<input type="submit" name="button" id="button" value="Submit">
</form>
</body>
</html>
7. การประยุกต์ใช้ตั้งแต่สองคำสั่งขึ้นไปใน 1 ฟอร์ม
<html>
<script type="text/javascript">
function fncSubmit()
{
if(document.getElementById('checkbox').checked == false )
{
alert('PLEASE CHECK IN BOX');
return false;
}
if(document.getElementById('textfield').value == "" )
{
alert('PLEASE INPUT YOURTEXT');
return false;
}
}
</script>
<body >
<form action="" method="post" enctype="multipart/form-data" onSubmit="JavaScript:return fncSubmit();">
<input type="checkbox" name="checkbox" id="checkbox">xxxx
<input type="text" name="textfield" id="textfield">
<input type="submit" name="button" id="button" value="Submit">
</form>
</body>
</html>
จบแล้วครับสำหรับบทความการเช็คค่าว่าง (NULL) ใน INPUT ต่างๆด้วย javascript ขอเป็นกำลังใจให้นักพัฒนาเว็บไซต์ทุกท่านประสบความสำเร็จในการโค้ดโปรแกรมและพัฒนาต่อยอดเว็บไซต์ครับผม
เคดิต : http://www.code108.com
สมัครสมาชิก:
ส่งความคิดเห็น
(
Atom
)
ไม่มีความคิดเห็น :
แสดงความคิดเห็น