Home/ Questions/Q 9250171
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T10:23:05+00:00

I’m using jquery to validate a form and then php to send the email

  • 0

I’m using jquery to validate a form and then php to send the email with all the form content.

HTML – contact.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8" src="message_validator.js" charset="utf-8"></script>
</head>
<body>
<form id="form_contacto" charset="utf-8">
  <input type="text" id="name" class="textbox" name="name" maxlength="12" />
  <input type="text" id="last_name" class="textbox" name="last_name" maxlength="12" />
  <input type="text" id="email" class="textbox" name="email" maxlength="40" />
  <input type="text" id="title" class="textbox_2" name="title" maxlength="40" />
  <textarea id="message" name="message" ></textarea>
  <input type="text" id="about" class="textbox_3" name="about" maxlength="40" />
  <input type="text" id="validation" class="textbox_4" name="validation" maxlength="40" />
  <input type="submit"  class="submit" value="Send">
</form>
</body>
</html>

JQUERY – message_validator.js

// JavaScript Document
$(document).ready(function() {
    $('.submit').click(function(){
        if($('.error_display').css("height")!="0"){
            $('.error_display').empty();
        }
        var errorlist = [];
        errorlist.length = 0;
        var email_check = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,6}$/i;
        var name = $('input#name').val();
        var email = $('input#email').val();
        var message = $('textarea#message').val();
        var validation = $('input#validation').val();

        if(name == '' && email == '' && message == ''){
            errorlist.push("- ERROR ALL");
        }else{
            if (name == '') {
                errorlist.push("-ERROR");
            }else if(name.length <= 2){
                errorlist.push("-ERROR");
            }
            if (email == ''){
                errorlist.push("-ERROR");
            }else if(!email_check.test(email)){
                errorlist.push("-ERROR");
            }
            if (message == '') {
                errorlist.push("-ERROR");
            }else if(message.length <= 5){
                errorlist.push("-ERROR");
            }
            if (validation == '') {
                errorlist.push("-ERROR");
            }else if(validation != 8){
                errorlist.push("-ERROR");
            }
        }

         if(errorlist.length >= 1){
            $('.error_display').animate({'height':errorlist.length*22}, {queue:false, duration:500});
            for(var i = 0; i < errorlist.length; i++) {
                $('.error_display').append(errorlist[i]+"<br/>");
                //errorlist[i].text.appendTo($('.error_display'));
                //$('.error_display').append(errorlist[i].val());
            } 
         }else{
            $("form#form_contacto").submit();
            $('.error_display').animate({'height':0}, {queue:false, duration:500});
            $('.success_display').animate({'height':75}, {queue:false, duration:500});
            $('#form_contacto').animate({'opacity':0.25}, {queue:false, duration:500});
            $('.submit').attr("disabled", true);
         }
    });
});

PHP – message_handler.php

<?php
  $name = $_POST['name'];
  $last_name = $_POST['last_name'];
  $visitor_email = $_POST['email'];
  $title = $_POST['title'];
  $message = $_POST['message'];
  $about = $_POST['about'];
  $validation = $_POST['validation'];


  $email_from = 'example@example.com';
      $email_subject = "New Message";
      $email_body = "Received a new message from $name $last_name"."Visitor email: $visitor_email\n\n\n"."Title: $title\n"."Message sent:\n $message\n\n";


      $to = "example@example.com";

      $headers = "From: $email_from \r\n";

      $headers .= "Reply-To: $visitor_email \r\n";

      mail($to,$email_subject,$email_body,$headers);
?>

The message is sent normally if I change the button to submit and put method=”post” action=”message_handler.php” in the form tag. But when I use that method it goes to the page message_handler.php and display a blank page and I want it only to send if the validation comes true from the message_validator.js so thats why I’m trying to use jquery to use the post() method.

I already tried in the last else the following:

else{
$("form#form_contacto").submit();

}

and

else{
$.post("message_handler.php", {name:name, email:email, last_name:last_name, title:title, message:message}

}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    message_handler.php

    WARNING: You should protect this page from spam. In its current state, you are extremely vulnerable

    change your call to the mail function to this

      if(mail($to,$email_subject,$email_body,$headers)) {
    echo "success";
  }
  else {
    echo "fail";
  }

    message_validator.js

    Add this to your else block

    $.post(
    "message_handler.php",
    {
        name:name,
        email:email,
        last_name:last_name,
        title:title,
        message:message
    },
    function(result){
        // log to console for debug 
        console.log(result);
        if(result == 'success') {
            // do something here
        }
        else {
            // do something on failure
        }

});

    contact.php

    Change the type of the submit to button to prevent form submission

    <input type="button" class="submit" value="Send">

    • 0