Page 1 of 1

PHP form with javascript validation won't send? [SOLVED]

Posted: Tue Aug 21, 2007 8:32 am
by antoniomb
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


I have a PHP email form with a javascript validation that just refuses to send! When all required fields are filled in, and the form submitted, instead of directing to the results page, it gives me the error message instead. When i take out all the javascript, it sends and works fine, so i realise it may be more of a java problem than a PHP one, but anyhelp would be appreciated. Thank you!

Here's my PHP page,

Code: Select all

<?php
if(isset($_POST['submit'])) {

	$to = "myemail@myemail.com"; 
	$subject = "Form Tutorial";
	$name_field = $_POST['name'];
	$email_field = $_POST['email'];
	$message = $_POST['message'];
	
	$body = "From: $name_field\n E-Mail: $email_field\n Message: $message\n";

	header("Location: results.php");
	mail($to, $subject, $body, "From: server@easyspace.com");
	
} else {
	echo "blarg!";
}
?>
And here's my Form page with the validation:

Code: Select all

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Wayne Nolting (w.nolting@home.com) -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function verify() {
var themessage = "You are required to complete the following fields: ";
if (document.form.name.value=="") {
themessage = themessage + " - Name";
}
if (document.form.email.value=="") {
themessage = themessage + " -  E-mail";
}
if (document.form.message.value=="") {
themessage = themessage + " -  Message";
}
//alert if fields are empty and cancel form submit
if (themessage == "You are required to complete the following fields: ") {
document.form.submit();
}
else {
alert(themessage);
return false;
   }
}
//  End -->
</script>

</head>

<body>

<form name=form method="post" action="mailer.php">
	Name:
	<input type="text" name="name" size="19"><br>
	<br>
	E-Mail:
	<input type="text" name="email" size="19"><br>
	<br>
	Message:<br>
	<textarea rows="9" name="message" cols="30"></textarea><br>
	<br>
    <input type=button value="Submit Request" onclick="verify();">
  
	<input type=reset value="Clear Form"><br>

</form>

</body>

</html>

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Tue Aug 21, 2007 8:37 am
by feyd
You have no elements named "submit."

Posted: Tue Aug 21, 2007 8:48 am
by antoniomb
Thank you for your response, Is it possible you could expand on that for me, i.e what do i need to put into the scripts and where?

Posted: Tue Aug 21, 2007 8:56 am
by iknownothing
He means, you are POSTing no data with the name Submit
so..

Code: Select all

if(isset($_POST['submit'])) {
obviously won't work. You could change it to something you are posting... take message for example...

Code: Select all

if(isset($_POST['message'])) {

Posted: Tue Aug 21, 2007 9:03 am
by CoderGoblin
I often build forms with a hidden element in them for this purpose <input type="hidden" name="form_sent" value="1" /> so I always have something to test against even if I change element names or add/remove elements of the form.

Posted: Tue Aug 21, 2007 9:21 am
by antoniomb
Thanks for that. I changed the first line of the PHP from 'submit' to 'message' to test it, but when i leave a field blank, the validation message pops up just fine, then as soon as i click ok to return to the form and fill in the missing field, it just sends automatically without anything being able to be filled in. Any ideas anyone? You can see it at http://www.lunatreejewellery.co.uk/ostrich.htm

Posted: Tue Aug 21, 2007 9:28 am
by feyd
Your "return false" isn't being given to the form to deny submission I would guess.

edit: positive/negative agreement issue.

Posted: Tue Aug 21, 2007 9:44 am
by antoniomb
Am i obviously out of my depth if i say i don't know how to do that one? Can anyone give me a hint of a suggestion as to what i should be writing to stop the form from submitting before all the fields are filled in, as above. Thank you.

Posted: Tue Aug 21, 2007 9:47 am
by iknownothing
pehaps try this:

Code: Select all

<html> 
<head> 
<meta http-equiv="Content-Language" content="en-us"> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
<title>New Page 1</title> 

<SCRIPT LANGUAGE="JavaScript"> 
<!-- Original:  Wayne Nolting (w.nolting@home.com) --> 

<!-- This script and many more are available free online at --> 
<!-- The JavaScript Source!! http://javascript.internet.com --> 

function verify() { 
var themessage = "You are required to complete the following fields: "; 
if (document.form.name.value=="") { 
themessage = themessage + " - Name"; 
} 
if (document.form.email.value=="") { 
themessage = themessage + " -  E-mail"; 
} 
if (document.form.message.value=="") { 
themessage = themessage + " -  Message"; 
} 
//alert if fields are empty and cancel form submit 
if (themessage == "You are required to complete the following fields: ") { 
return true;
} 
else { 
alert(themessage); 
return false; 
   } 
} 

</script> 

</head> 

<body> 

<form name="form" method="post" action="mailer.php" onsubmit="return verify();"> 
        Name: 
        <input type="text" name="name" size="19"><br> 
        <br> 
        E-Mail: 
        <input type="text" name="email" size="19"><br> 
        <br> 
        Message:<br> 
        <textarea rows="9" name="message" cols="30"></textarea><br> 
        <br> 
    <input type="Submit" value="Submit Request"> 
  
        <input type="reset" value="Clear Form"><br> 

</form> 

</body> 

</html>
Changed a few things, replaced document.form.submit() with return true, and moved and replaced the onlick with onsubmit in the FORM tag

Posted: Tue Aug 21, 2007 12:21 pm
by antoniomb
That worked perfectly. Thank you very much. Most grateful.