Field Checking
Posted: Tue Aug 10, 2010 8:33 am
Good Evening,
I wanted to create a javascript validation of my fields, whether the field is empty or not when the button is submitted. When I click on the submit button when my field is empty, it prompts that the field is empty, however, the form is still being submitted. Can anyone help me? Immediate response is greatly appreciated. (I'm a noobie, please note xD)
Here's my code:
[text]<link href="add_client.css" rel="stylesheet" type="text/css">
<script type='text/javascript'>
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus();
return false;
}
return true;
}
</script>
<?php
include("dbconnection.php");
if(isset($_POST["btnSubmit"]))
{
$id = $_POST["id"];
$date = $_POST["date"];
$status = $_POST["status"];
$territory = $_POST["territory"];
$job_title = $_POST["job_title"];
$area_of_work = $_POST["area_of_work"];
$query = "INSERT INTO records (date, status, territory, job_title, area_of_work, employer, department, location, date_posted, closing_date, gender, first_name, last_name, telephone_number, title, address_1, address_2, address_3, city, country, postal_code, website, email_address, cg_comment, date_emailed, mailing_comments, telesales_comments) VALUES ('".$date."','".$status."','".$territory."', '".$job_title."', '".$area_of_work."')";
mysql_query($query) or die(mysql_error());
echo "<script>
alert('You have successfully added a record');
window.location = 'add_client.php';
</script>";
}
?>
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="760" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="199" align="center" valign="top"><a href="login.html"><img src="invent-asia.gif" alt="" width="152" height="58" border="0" /></a></td>
<td width="176" align="right" valign="bottom"><a href="main.php"><img src="Home.jpg" width="104" height="20" border="0"/></a></td>
<td width="130" align="right" valign="bottom"><a href="view_client.php"><img src="View.jpg" width="104" height="20" border="0"/></a></td>
<td width="146" align="right" valign="bottom"><img src="Add.jpg" width="104" height="20" border="0"/></td>
<td width="109" align="right" valign="bottom"> </td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="760" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" height="3" bgcolor="#1B1C78"><img src="images/topspacerblue.gif" alt="" width="1" height="3" /></td>
<td width="560" bgcolor="#0076CC"><img src="images/topspacerlblue.gif" alt="" width="1" height="3" /></td>
</tr>
</table></td>
</tr>
<tr>
<td height="526" align="center" valign="top" bgcolor="#F3FAFE"><p> </p>
<form name="form" method="post" action="add_client.php">
<table width="679" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="160" height="26" align="left" valign="middle" scope="col">Date and Time</td>
<td width="160" height="26" align="center" valign="middle" scope="col">
<?php
$date = date("d/m/y");
print date("d/m/y |", time())
?>
<?php
print date("h:i a", time())
?>
</td>
<td width="39" height="26" align="left" valign="top" scope="col"> </td>
<td height="26" colspan="2" align="left" valign="middle" scope="col">Status</td>
<td height="26" colspan="2" align="center" valign="middle" scope="col">NEW RECORD</td>
</tr>
<tr>
<td width="160" align="left" valign="middle" scope="col">Territory</td>
<td width="160" height="27" align="center" valign="middle" scope="col"><select name="territory" width="230" style="width: 143px" id="territory">
<option selected="selected" disabled="disabled">Select Territory</option>
<option>Territory 1</option>
<option>Territory 2</option>
<option>Territory 3</option>
<option>Territory 4</option>
<option>Territory 5</option>
<option>Territory 6</option>
<option>Territory 7</option>
<option>Territory 8</option>
<option>Territory 9</option>
<option>Territory 10</option>
</select></td>
<td width="39" height="27" align="left" valign="top" scope="col"> </td>
<td colspan="2" align="left" valign="middle" scope="col">Location</td>
<td height="27" colspan="2" align="center" valign="middle" scope="col"><input name="location" type="text" id="location" /></td>
</tr>
<tr>
<td width="160" align="left" valign="middle" scope="col">Area of Work</td>
<td width="160" height="26" align="center" valign="middle" scope="col"><input name="area_of_work" type="text" id="area_of_work" /></td>
<td width="39" height="26" align="left" valign="top" scope="col"> </td>
<td colspan="2" align="left" valign="middle" scope="col">Job Title</td>
<td height="26" colspan="2" align="center" valign="middle" scope="col"><input name="job_title" type="text" id="job_title" /></td>
</tr>
<tr>
<td align="left" valign="middle" scope="col">Telesales Comment</td>
<td height="27" align="center" valign="middle" scope="col"></td>
<td height="27" align="left" valign="middle" scope="col"> </td>
<td width="49" height="27" align="center" valign="middle" scope="col"><img src="Delete.png" width="27" height="27" border="0"/></a></td>
<td width="111" align="left" valign="middle" scope="col">Clear Fields</td>
<td width="53" height="27" align="center" valign="middle" scope="col">
<input type="image" src="Add.png" height="27" width="27" name="btnSubmit" id="btnSubmit" onclick="notEmpty(document.getElementById('area_of_work'), 'Please Enter a Value')" value="Add Record" /></td>
<td width="107" align="left" valign="middle" scope="col">Add Record</td>
</tr>
</table>
</form></p></td>
</tr>
<tr>
<td height="38"><table width="760" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" height="35" align="center" bgcolor="#1B1C78" class=white><img src="images/topspacerblue.gif" alt="" width="1" height="3" /> <a href="disclaimer.html"><font color="#FFFFFF">Legal Disclaimer</font></a> </td>
<td width="560" align="center" bgcolor="#0076CC" class=white><img src="images/topspacerlblue.gif" alt="" width="1" height="3" /> Copyright ©. All rights reserved.
</td>
</tr>
</table></td>
</tr>
</table>[/text]
I wanted to create a javascript validation of my fields, whether the field is empty or not when the button is submitted. When I click on the submit button when my field is empty, it prompts that the field is empty, however, the form is still being submitted. Can anyone help me? Immediate response is greatly appreciated. (I'm a noobie, please note xD)
Here's my code:
[text]<link href="add_client.css" rel="stylesheet" type="text/css">
<script type='text/javascript'>
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus();
return false;
}
return true;
}
</script>
<?php
include("dbconnection.php");
if(isset($_POST["btnSubmit"]))
{
$id = $_POST["id"];
$date = $_POST["date"];
$status = $_POST["status"];
$territory = $_POST["territory"];
$job_title = $_POST["job_title"];
$area_of_work = $_POST["area_of_work"];
$query = "INSERT INTO records (date, status, territory, job_title, area_of_work, employer, department, location, date_posted, closing_date, gender, first_name, last_name, telephone_number, title, address_1, address_2, address_3, city, country, postal_code, website, email_address, cg_comment, date_emailed, mailing_comments, telesales_comments) VALUES ('".$date."','".$status."','".$territory."', '".$job_title."', '".$area_of_work."')";
mysql_query($query) or die(mysql_error());
echo "<script>
alert('You have successfully added a record');
window.location = 'add_client.php';
</script>";
}
?>
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="760" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="199" align="center" valign="top"><a href="login.html"><img src="invent-asia.gif" alt="" width="152" height="58" border="0" /></a></td>
<td width="176" align="right" valign="bottom"><a href="main.php"><img src="Home.jpg" width="104" height="20" border="0"/></a></td>
<td width="130" align="right" valign="bottom"><a href="view_client.php"><img src="View.jpg" width="104" height="20" border="0"/></a></td>
<td width="146" align="right" valign="bottom"><img src="Add.jpg" width="104" height="20" border="0"/></td>
<td width="109" align="right" valign="bottom"> </td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="760" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" height="3" bgcolor="#1B1C78"><img src="images/topspacerblue.gif" alt="" width="1" height="3" /></td>
<td width="560" bgcolor="#0076CC"><img src="images/topspacerlblue.gif" alt="" width="1" height="3" /></td>
</tr>
</table></td>
</tr>
<tr>
<td height="526" align="center" valign="top" bgcolor="#F3FAFE"><p> </p>
<form name="form" method="post" action="add_client.php">
<table width="679" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="160" height="26" align="left" valign="middle" scope="col">Date and Time</td>
<td width="160" height="26" align="center" valign="middle" scope="col">
<?php
$date = date("d/m/y");
print date("d/m/y |", time())
?>
<?php
print date("h:i a", time())
?>
</td>
<td width="39" height="26" align="left" valign="top" scope="col"> </td>
<td height="26" colspan="2" align="left" valign="middle" scope="col">Status</td>
<td height="26" colspan="2" align="center" valign="middle" scope="col">NEW RECORD</td>
</tr>
<tr>
<td width="160" align="left" valign="middle" scope="col">Territory</td>
<td width="160" height="27" align="center" valign="middle" scope="col"><select name="territory" width="230" style="width: 143px" id="territory">
<option selected="selected" disabled="disabled">Select Territory</option>
<option>Territory 1</option>
<option>Territory 2</option>
<option>Territory 3</option>
<option>Territory 4</option>
<option>Territory 5</option>
<option>Territory 6</option>
<option>Territory 7</option>
<option>Territory 8</option>
<option>Territory 9</option>
<option>Territory 10</option>
</select></td>
<td width="39" height="27" align="left" valign="top" scope="col"> </td>
<td colspan="2" align="left" valign="middle" scope="col">Location</td>
<td height="27" colspan="2" align="center" valign="middle" scope="col"><input name="location" type="text" id="location" /></td>
</tr>
<tr>
<td width="160" align="left" valign="middle" scope="col">Area of Work</td>
<td width="160" height="26" align="center" valign="middle" scope="col"><input name="area_of_work" type="text" id="area_of_work" /></td>
<td width="39" height="26" align="left" valign="top" scope="col"> </td>
<td colspan="2" align="left" valign="middle" scope="col">Job Title</td>
<td height="26" colspan="2" align="center" valign="middle" scope="col"><input name="job_title" type="text" id="job_title" /></td>
</tr>
<tr>
<td align="left" valign="middle" scope="col">Telesales Comment</td>
<td height="27" align="center" valign="middle" scope="col"></td>
<td height="27" align="left" valign="middle" scope="col"> </td>
<td width="49" height="27" align="center" valign="middle" scope="col"><img src="Delete.png" width="27" height="27" border="0"/></a></td>
<td width="111" align="left" valign="middle" scope="col">Clear Fields</td>
<td width="53" height="27" align="center" valign="middle" scope="col">
<input type="image" src="Add.png" height="27" width="27" name="btnSubmit" id="btnSubmit" onclick="notEmpty(document.getElementById('area_of_work'), 'Please Enter a Value')" value="Add Record" /></td>
<td width="107" align="left" valign="middle" scope="col">Add Record</td>
</tr>
</table>
</form></p></td>
</tr>
<tr>
<td height="38"><table width="760" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" height="35" align="center" bgcolor="#1B1C78" class=white><img src="images/topspacerblue.gif" alt="" width="1" height="3" /> <a href="disclaimer.html"><font color="#FFFFFF">Legal Disclaimer</font></a> </td>
<td width="560" align="center" bgcolor="#0076CC" class=white><img src="images/topspacerlblue.gif" alt="" width="1" height="3" /> Copyright ©. All rights reserved.
</td>
</tr>
</table></td>
</tr>
</table>[/text]