วิธีเชคค่าว่าง input ด้วย javascript
Credit http://pancodefree.blogspot.com/2014/11/form-submit-javascript.html
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>