Question

I have a submit button in a form and use PHP for scripting to email the form. When the button is pressed nothing happens, not even showing the PHP code like when PHP isn’t installed. I have tested other simple mailing forms on machine and they show the code. This one does nothing.

HTML Code:

<form name="apply" method="post" action="mail.php">                 
<font class="error-message"></font>
    <div class="form-content">
        <div class="left-label">
            <label>First and Last name:</label>
            <label>School type:</label>
            <label>Practice name:</label>
            <label class="address">Address:</label>
    <label class="address2">Address (cont):</label>
    <label class="zip">Zip Code:</label>
    <label class="city">City:</label>
            <label>Website:</label>
            <label>Email:</label>
        </div>
        <div class="right-fields">                          
            <input type="text" name="fist-last-name" placeholder="First & Last name" title="Please enter First & Last name." />
            <select name="select-school">
                <option>--select--</option>
                <option>Dental Assistant School</option>
                <option>Medical Assistant School</option>
                <option>Pharmacy Technician School</option>
                <!-- <option>Personal Trainer School</option> -->
                <option>Other School</option>
            </select>
            <input type="text" name="practice-name" placeholder="Practice name" title="Please enter your practice name." />
            <textarea name="address1" placeholder="Address 1" title="Please enter address1"></textarea>
            <textarea name="address2" placeholder="Address 2" title="Please enter address2"></textarea>
            <div class="clear"></div>
            <input type="text" name="zipcode" placeholder="Zip Code" title="Please enter your zipcode." /><br>
            <input type="text" name="city" placeholder="City" title="Please enter the city where you live." />
            <input type="text" name="website-address" placeholder="Website" title="Please enter your website address." />
            <input type="text" name="email" placeholder="Email" title="Please enter your email address." />
            <input type="submit" value="Submit"/>
        </div>
    </div>
    <div class="clear"></div>
</form>

PHP code, mail.php:

<?php

$fist_last_name     = $_POST["fist-last-name"];

$school_type        = $_POST["select-school"];

$practice_name      = $_POST["practice-name"];

$address1           = $_POST["address1"];

$address2           = $_POST["address2"];

$zipcode            = $_POST["zipcode"];

$city               = $_POST["city"];

$website            = $_POST["website-address"];

$email              = $_POST["email"];


$body   = " <table>

                <tr><th>First Last name:</th><td>".$fist_last_name."</td></tr>

                <tr><th>School type:</th><td>".$school_type."</td></tr>

                <tr><th>Practice name:</th><td>".$practice_name."</td></tr>

                <tr><th>address1:</th><td>".$address1."</td></tr>

                <tr><th>address2:</th><td>".$address2."</td></tr>

                <tr><th>Zipcode:</th><td>".$zipcode."</td></tr>

                <tr><th>City:</th><td>".$city."</td></tr>

                <tr><th>Website:</th><td>".$website."</td></tr>

                <tr><th>Email:</th><td>".$email."</td></tr>

            </table>";

mail('[e-mail]','No Reply',$body,"From: [e-mail]");

?>

This is the JavaScript for the form validation:

/* Form validation */

$("form[name='apply']").submit(function(){
    var error = true;
    var text_fields = ["fist-last-name", "practice-name", "zipcode", "city", "website-address", "email"];
    $.each(text_fields,function(key,value){
        if(!$.trim($("input[name='"+value+"']").val()) == "") {
            $("input[name='"+value+"']").css({'border-color': '#ccc'});
        }
        else{
            $("input[name='"+value+"']").css({'border-color': 'red'});
            error = false;
        }
    });
    if($("form[name='apply'] select[name='select-school']").val() == "--select--") {
        $("form[name='apply'] select[name='select-school']").css({'border-color': 'red'});
        error = false;
    }
    else {
        $("form[name='apply'] select[name='select-school']").css({'border-color': '#ccc'});
    }
    var textarea_fields = ["address1", "address2"];
    $.each(textarea_fields,function(key,value){
        if(!$.trim($("form[name='apply'] textarea[name='"+value+"']").val()) == "" ) {
            $("form[name='apply'] textarea[name='"+value+"']").css({'border-color': '#ccc'});
        }
        else {
            $("form[name='apply'] textarea[name='"+value+"']").css({'border-color': 'red'});
            error = false;
        }
    });
    console.log(error);
    if(error == true) {
        $.post('mail.php',$("form[name='apply']").serialize(),function(data){
            console.log(data);
        });
    }
    return false;
});

$("form[name='apply'] input[type='text'], form[name='apply'] textarea").blur(function(){
    if($.trim($(this).val()) == ""){
        $(".error-message").text($(this).attr('title'));
        $(this).css({'border-color': 'red'});
    }
    else {
        $(this).css({'border-color': '#ccc'});
        $(".error-message").text('');
    }
});
$("form[name='apply'] input[type='text'], form[name='apply'] textarea").bind("keydown",function(){
    if($.trim($(this).val()) == ""){
        $(".error-message").text($(this).attr('title'));
        $(this).css({'border-color': 'red'});
    }
    else {
        $(this).css({'border-color': '#ccc'});
    }
});

The error occurs in this code:

$("form[name='apply']").submit(function(){
    var error = true;
    var text_fields = ["fist-last-name", "practice-name", "zipcode", "city", "website-address", "email"];
    $.each(text_fields,function(key,value){
        if(!$.trim($("input[name='"+value+"']").val()) == "") {
            $("input[name='"+value+"']").css({'border-color': '#ccc'});
        }
        else{
            $("input[name='"+value+"']").css({'border-color': 'red'});
            error = false;
        }
    });
    if($("form[name='apply'] select[name='select-school']").val() == "--select--") {
        $("form[name='apply'] select[name='select-school']").css({'border-color': 'red'});
        error = false;
    }
    else {
        $("form[name='apply'] select[name='select-school']").css({'border-color': '#ccc'});
    }
    var textarea_fields = ["address1", "address2"];
    $.each(textarea_fields,function(key,value){
        if(!$.trim($("form[name='apply'] textarea[name='"+value+"']").val()) == "" ) {
            $("form[name='apply'] textarea[name='"+value+"']").css({'border-color': '#ccc'});
        }
        else {
            $("form[name='apply'] textarea[name='"+value+"']").css({'border-color': 'red'});
            error = false;
        }
    });
    console.log(error);
    if(error == true) {
        $.post('mail.php',$("form[name='apply']").serialize(),function(data){
            console.log(data);
        });
    }
    return false;
}); 

Answer 1

Your Javascript is stopping the form from submitting. When you return false in a form’s submit event, it prevents the form being submitted.

I think you want to return the error variable which seems to be a boolean to indicate a validation error.

Try:

$("form[name='apply']").submit(function(){

    .... JS code ....
    return error;
});

Using that, if there are no validation errors, the form will submit. Also your error boolean is slightly misleading, it would be more logical if error is true then there is a validation error, but you have it reversed – won’t make any difference to the actual code execution, just a readability point.