Field Checking
Moderator: General Moderators
Field Checking
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]
Re: Field Checking
hi,
with this function you can check if a field is empty
and instead of using a submit button use the simple button and add an event onclick that call a function where you actually check all the field with the function written before,
if it's all ok then use
and here we are....
i hope it can help ^^
with this function you can check if a field is empty
Code: Select all
function IsEmpty(aTextField)
{
if ((document.getElementById(aTextField).value.length==0)||(document.getElementById(aTextField).value==null)) {return true;}
else { return false; }
}
and instead of using a submit button use the simple button and add an event onclick that call a function where you actually check all the field with the function written before,
if it's all ok then use
Code: Select all
document.getElementById(formname).submit();
i hope it can help ^^
Re: Field Checking
Hi Fabian,
Thanks for your immediate response. I am very sorry I wasn't able to understand what to do here:
If you may, please explain to me what and where to put the quoted in my codes xD
Thanks Fabian, and I really appreciate your help
Thanks for your immediate response. I am very sorry I wasn't able to understand what to do here:
Hihi, may be funny, but I am really really new to programming xD I normally get codes and stuffs from the Internet and try to understand what it does. No modification and own coding yet xD I also seek advices from my programmers, but this time is a busy time for them so I can't really seek help.document.getElementById(formname).submit();
If you may, please explain to me what and where to put the quoted in my codes xD
Thanks Fabian, and I really appreciate your help
Re: Field Checking
ok then the input type image is always a submit button and you must avoid this ... if you want to use an image to send your form it's ok
so instead use this
ok so in the end this simple js script check if the specific field is empty if not the launch the submit form. it's more clear now ???
so instead use this
Code: Select all
function checkfield(obj)
{
if(isEmpty(obj))
{
alert('i'm empty!!!!'); // type what you want ^^
}
else
{
document.getElementById(formname).submit();
}
}
<img src='yourimagename' onclick='checkfield('field)' alt='' />ok so in the end this simple js script check if the specific field is empty if not the launch the submit form. it's more clear now ???
Re: Field Checking
Thanks Fabian, I'm checking it now
Hope it works for me hihi
-------
I think I am not doing it right xD
I placed this one on top of my codes:
But no prompts. All it does is submit the form xD
edit:
I used a different method now, thanks for your help Fabian ^^
-------
I think I am not doing it right xD
I placed this one on top of my codes:
Code: Select all
<script type='text/javascript'>
function IsEmpty(area_of_work)
{
if ((document.getElementById(area_of_work).value.length==0)||(document.getElementById(area_of_work).value==null)) {return true;}
else { return false; }
}
function checkfield(area_of_work){
if(isEmpty(area_of_work))
{
alert("im empty!!!!");
}
else
{
document.getElementById(form).submit();
}
}
</script>Code: Select all
<input type="image" src="Add.png" height="27" width="27" name="btnSubmit" id="btnSubmit" value="Add Record" onclick="checkfield('area_of_work')"/>edit:
I used a different method now, thanks for your help Fabian ^^
Re: Field Checking
ok for what i see there are a few mistake firs of all isempty check the element id but your form doesn't have one so the first thing to do is
second there was no need to put area_of_work everywhere the function just do their work properly
ok try with this it should be work ^^
Code: Select all
<form name="form" [b]id="form"[/b] method="post" action="add_client.php">
Code: Select all
function IsEmpty(field)
{
if ((document.getElementById(field).value.length==0)||(document.getElementById(field).value==null)) {return true;}
else { return false; }
}
function checkfield(field){
if(isEmpty(field)==true) // try in this way
{
alert("im empty!!!!");
}
else
{
document.getElementById(form).submit();
}
}
</script>
<input type="image" src="Add.png" height="27" width="27" name="btnSubmit" id="btnSubmit" value="Add Record" onclick="checkfield('area_of_work');"/>
Re: Field Checking
Tried this one.. didn't work xD Aww sorry Fab, I'm a real noobie xD
Re: Field Checking
tomorrow i'll copy the code and fix it for you ok? ^^
today i have no time sorry ^^
today i have no time sorry ^^
Re: Field Checking
Thank you very much Fab, a big help for meFabian wrote:tomorrow i'll copy the code and fix it for you ok? ^^
today i have no time sorry ^^
btw I also tried the empty() function, so my code works as:
Code: Select all
if (empty($area_of_work)) {
echo "<script>
alert('Please fill out necessary fields');
window.location = 'add_client.php';
</script>";
}
else
$query = "INSERT INTO records ...May be too much for now, but also, being the noob I am xD I know it doesn't look good to be seeing the below code 23 times xD Is there a possible way to simplify the way I have programmed it? Well just for the PHP validation xD Thanks Fabian, such a guardian angel ^^
Code: Select all
if (empty($area_of_work)) {
echo "<script>
alert('Please fill out necessary fields');
window.location = 'add_client.php';
</script>";- ColonelSandersLite
- Forum Commoner
- Posts: 35
- Joined: Sun May 09, 2010 1:32 am
Re: Field Checking
Didn't read the whole thing but keep in mind that your javascript submission validation will break if a user with javascript disabled clicks that submit button. In other words, it's nice, but don't rely on it. Besides, that checking is done clientside. There is no substitute for checking the submitted data serverside.