Field Checking

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
emilcarlo
Forum Commoner
Posts: 43
Joined: Wed Jul 21, 2010 12:38 pm

Field Checking

Post by emilcarlo »

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">&nbsp;</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>&nbsp;</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())
?>&nbsp;

</td>
<td width="39" height="26" align="left" valign="top" scope="col">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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" />&nbsp;<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" />&nbsp;Copyright &copy;. All rights reserved.
</td>
</tr>

</table></td>
</tr>
</table>[/text]
Fabian
Forum Newbie
Posts: 10
Joined: Tue Aug 10, 2010 8:19 am

Re: Field Checking

Post by Fabian »

hi,
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();
and here we are....
i hope it can help ^^
emilcarlo
Forum Commoner
Posts: 43
Joined: Wed Jul 21, 2010 12:38 pm

Re: Field Checking

Post by emilcarlo »

Hi Fabian,

Thanks for your immediate response. I am very sorry I wasn't able to understand what to do here:
document.getElementById(formname).submit();
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.

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 :)
Fabian
Forum Newbie
Posts: 10
Joined: Tue Aug 10, 2010 8:19 am

Re: Field Checking

Post by Fabian »

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

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 ??? :D
emilcarlo
Forum Commoner
Posts: 43
Joined: Wed Jul 21, 2010 12:38 pm

Re: Field Checking

Post by emilcarlo »

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:

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')"/>
But no prompts. All it does is submit the form xD

edit:

I used a different method now, thanks for your help Fabian ^^
Fabian
Forum Newbie
Posts: 10
Joined: Tue Aug 10, 2010 8:19 am

Re: Field Checking

Post by Fabian »

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

Code: Select all

<form name="form" [b]id="form"[/b] method="post" action="add_client.php">
second there was no need to put area_of_work everywhere the function just do their work properly

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');"/>
ok try with this it should be work ^^
emilcarlo
Forum Commoner
Posts: 43
Joined: Wed Jul 21, 2010 12:38 pm

Re: Field Checking

Post by emilcarlo »

Tried this one.. didn't work xD Aww sorry Fab, I'm a real noobie xD
Fabian
Forum Newbie
Posts: 10
Joined: Tue Aug 10, 2010 8:19 am

Re: Field Checking

Post by Fabian »

tomorrow i'll copy the code and fix it for you ok? ^^

today i have no time sorry ^^
emilcarlo
Forum Commoner
Posts: 43
Joined: Wed Jul 21, 2010 12:38 pm

Re: Field Checking

Post by emilcarlo »

Fabian wrote:tomorrow i'll copy the code and fix it for you ok? ^^

today i have no time sorry ^^
Thank you very much Fab, a big help for me :)

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 ...
This one seemed easier than the javascript, my only problem here is, it does not retain the information that the user has entered. I have like 23 fields, and if the user missed one, all fields will be emptied. xD

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>";
User avatar
ColonelSandersLite
Forum Commoner
Posts: 35
Joined: Sun May 09, 2010 1:32 am

Re: Field Checking

Post by ColonelSandersLite »

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.
Post Reply