JavaScript function on onclick event of submit button not validating textbox - php

Question

I wrote this code (which posts to a PHP page) so that if guests do not input their name, it would pop out an alert box. However, Even when I put something in the name textbox and submit it, the alert box still pop out and it would submit the $_POST['gname'] to the server.
Here’s the JavaScript:
<script type="text/javascript">
function gSubmit()
{
if (document.getElementById("gname").value.length === 0)
{
alert("For completing the form, it requires you to input a Name");
return false;
}
else
{
document.getElementById("guestbook").innerHTML=("<p><b><center>Thank you for submitting the Guestbook");
window.location = "guestbook.php";
return true;
}
}
</script>
Here’s the HTML:
<form id="guestbook" name="guestbook" method="post" action="guestbook.php">
<center>
<table border="0px">
<tr>
<td>
<p align="right">Name :</p></td><td> <input type="text" name="gname" id="gname" />
</td>
</tr>
<tr>
<td>
<p align="right">E-mail :</p></td><td><input type="text" name="gemail" />
</td>
</tr>
<tr>
<td>
<p align="right">Telephone No :</p>
</td>
<td>
<input type="text" name="gtpn" />
</td>
</tr>
<tr>
<td>
<p align="right">Product Order / Comment / Messages :</p>
</td>
<td>
<textarea name="gtxtfld" id="gtxtfld" cols="32"></textarea>
</td>
</tr>
</table>
<br /><br />
<input type="submit" value="submit" name="submit" onclick="gSubmit();" />
<input type="reset" value="reset" name="reset" />
</form>

Answer 1

Change your gSubmit() function to this:
if (document.getElementById("gname").value === "")
{
alert("For completing the form, it requires you to input a Name");
return false;
}
else
{
document.getElementById("guestbook").innerHTML=("<p><b><center>Thank you for submitting the Guestbook");
return true;
}
In your html, change onclick="gsubmit()" to onclick="return gsubmit()".
Note that your message in the else clause will not be displayed because the form would have submitted by then.
Also, you have to compare the value of gname field, not it's innerHTML. And it has to be compared to empty string (""), not space (" ").

Answer 2

To check if the textbox has a value in it, you can use something like this:
if (document.getElementById("gname").value.length > 0)
{
alert("For completing the form, it requires you to input a Name");
//by returning false, you stop the submission from happening
return false;
}
else
{
document.getElementById("guestbook").innerHTML=("<p><b><center>Thank you for submitting the Guestbook");
return true; //allow the submission to go through
}
And in you're onclick event:
onclick="return gSubmit();"