Php/javascript email form and validation

StackOverflow https://stackoverflow.com/questions/19680406

Question

So I have the JavaScript code which validates the first name field, I am adding more validation once I have worked this out.

So basically if the field is not filled in, return false. If it is return true and continue to email.php to send the email. Only problem is its not sending the email to the set address. I am confused as to where I have gone wrong.

The JavaScript is working when the field is empty, and when it has an input. Help.

PS: I have removed email address for privacy purposes.

JavaScript on contact.html:

<script> 

    function validateForm() {   


            if (document.forms['email'].fname.value == ""){
            alert("First name must be filled out");
            return false;
            }
            else{
            alert("Thank you! Your message was recieved!"); 
            return true;                      
            }
    }; 



</script>

Html form on contact.html

<form id="email" name="email" onsubmit="return validateForm(this)"  action="email.php" method="post" >

        <div id="form_fname">
        <label for="fname"><img src="images/firstname.png" width="94" height="17" alt="first name" /></label>
        <input type="text" name="fname" id="fname" />  
        </div>   

        <div id="form_lname">
        <label for="lname"><img src="images/lastname.png" width="89" height="17" alt="last name" /></label>
        <input type="text" name="lname" id="lname" />  
        </div>   

        <div id="form_email">
        <label for="email"><img src="images/email.png" width="53" height="17" alt="email" /></label>
        <input type="text" name="email" id="email" />   
        </div>

        <div id="form_message">   
        <label for="Message"><img src="images/message.png" width="77" height="17" alt="message" /></label>
        <textarea name="message" id="message" cols="45" rows="5"></textarea>  
        </div>

        <div id="form_submit"> 
        <input type="submit" name="submit" id="submit" value=""/>
        </div>

      </form>

Php in email.php

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

// Email and subject.
$email_to = "emailaddress";
$email_subject = "Mint Makeup & Beauty Enquiry";        

$fname = $_POST['fname']; // required
$lname = $_POST['lname']; // required
$message = $_POST['message']; // required
$email_from = $_POST['email']; // required

// create email content
$email_content = "From:"." ".$fname." ".$lname."\n"."Email:"." ".$email_from."\n"."Message:"." ".$message; 

//mail
mail($email_to, $email_subject, $email_content);

}
//return to contact page after submit.
header("location:contact.html");
?>
Was it helpful?

Solution

In your form id="email" is conflicting with input id="email"

You can use HTML5 attributes for form validation (in HTML5 supported browsers)

http://www.the-art-of-web.com/html/html5-form-validation/#.UnDpBHMW3eU

Code

<?php
if(isset($_POST['submit'])) {
    print_r($_POST);
    die;
    $email_to = "emailaddress";
    $email_subject = "Mint Makeup & Beauty Enquiry";        

    $fname = $_POST['fname']; // required
    $lname = $_POST['lname']; // required
    $message = $_POST['message']; // required
    $email_from = $_POST['email']; // required

    // create email content
    $email_content = "From:"." ".$fname." ".$lname."\n"."Email:"." ".$email_from."\n"."Message:"." ".$message; 
    mail($email_to, $email_subject, $email_content);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function validateForm() { 
    var error = false;
    var error_string = 'Please correct the following errors:\n\n';  
    if (document.getElementById('fname').value == ""){
        error_string += "--> First name must be filled out.\n";
        error = true;
    } 
    if (document.getElementById('lname').value == ""){
        error_string += "--> Last name must be filled out.\n";
        error = true;
    } 
    if (document.getElementById('email').value == ""){
        error_string += "--> Email must be filled out.\n";
        error = true;
    }    
    if(error){
        alert(error_string);
        return false;
    }  else {
        return true;
    }
}
</script>
</head>
<body>
<form onsubmit="return validateForm(this)"  action="" method="post" >

    <div id="form_fname">
    <label for="fname"><img src="images/firstname.png" width="94" height="17" alt="first name" /></label>
    <input type="text" name="fname" id="fname" />  
    </div>   

    <div id="form_lname">
    <label for="lname"><img src="images/lastname.png" width="89" height="17" alt="last name" /></label>
    <input type="text" name="lname" id="lname" />  
    </div>   

    <div id="form_email">
    <label for="email"><img src="images/email.png" width="53" height="17" alt="email" /></label>
    <input type="text" name="email" id="email" />   
    </div>

    <div id="form_message">   
    <label for="Message"><img src="images/message.png" width="77" height="17" alt="message" /></label>
    <textarea name="message" id="message" cols="45" rows="5"></textarea>  
    </div>

    <div id="form_submit"> 
    <input type="submit" name="submit" id="submit" value="Submit" />
    </div>

  </form>
  </body>
  </html>

I just showed you how client side validation works and form is posting correctly.. You should always use server side validation..

OTHER TIPS

Try 

document.forms["email"]["fname"].value

instead

document.forms['email'].fname.value

Also you can get field this way:

document.getElementById('fname').value
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top