form give alert message

Question

i have a form in my website with this code

<article id="contact" class="panel">
    <header>
        <h2>Contact Me</h2>
    </header>

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2445.617108940998!2d5.3693015999999965!3d52.19583220000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c646d54f5f74b3%3A0x24f74fcdc9277232!2sRabouwgaarde%2C+3824+Amersfoort!5e0!3m2!1snl!2snl!4v1426155136287" width="400" height="300" frameborder="0" style="border:0" align="right"></iframe>
    <P STYLE="text-align: left;">Bedankt voor het bekijken van mijn website. Wilt u contact met mij opnemen vul dan het contactformulier hier beneden in.</P>
    <form name="contactform" method="post" action="send_form_email.php">
        <div>
            <div class="row">
                <div class="6u">
                    <input type="text" name="first_name" placeholder="Name" />
                </div>
                <div class="6u">
                    <input type="text" name="email" placeholder="Your Email" />
                </div>
            </div>
            <div class="row">
                <div class="12u">
                    <input type="text" name="subject" placeholder="Subject" />
                </div>
            </div>
            <div class="row">
                <div class="12u">
                    <textarea name="message" placeholder="Message" rows="8"></textarea>
                </div>
            </div>
            <div class="row">
                <div class="12u">
                    <input type="submit" value="Submit" />
                </div>
            </div>
        </div>
    </form>
</article>

and with this php included so that hte email will send right to my email adress

<?php

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



    // EDIT THE 2 LINES BELOW AS REQUIRED

    $email_to = "contact@sandergouman.nl";

    $email_subject = "Your email subject line";





    function died($error) {

        // your error code can go here

        echo "We are very sorry, but there were error(s) found with the form you submitted. ";

        echo "These errors appear below.<br /><br />";

        echo $error."<br /><br />";

        echo "Please go back and fix these errors.<br /><br />";

        die();

    }



    // validation expected data exists

    if(!isset($_POST['first_name']) ||

        !isset($_POST['email']) ||

        !isset($_POST['subject']) ||

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

        died('We are sorry, but there appears to be a problem with the form you submitted.');       

    }



    $first_name = $_POST['first_name']; // required

    $email_from = $_POST['email']; // required

    $telephone = $_POST['subject']; // not required

    $comments = $_POST['message']; // required



    $error_message = "";

    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';

  if(!preg_match($email_exp,$email_from)) {

    $error_message .= 'The Email Address you entered does not appear to be valid.<br />';

  }

    $string_exp = "/^[A-Za-z .'-]+$/";

  if(!preg_match($string_exp,$first_name)) {

    $error_message .= 'The First Name you entered does not appear to be valid.<br />';

  }

  /*if(!preg_match($string_exp,$last_name)) {

    $error_message .= 'The Last Name you entered does not appear to be valid.<br />';

  }
  */

  if(strlen($comments) < 2) {

    $error_message .= 'The Comments you entered do not appear to be valid.<br />';

  }

  if(strlen($error_message) > 0) {

    died($error_message);

  }

    $email_message = "Form details below.\n\n";



    function clean_string($string) {

      $bad = array("content-type","bcc:","to:","cc:","href");

      return str_replace($bad,"",$string);

    }



    $email_message .= "First Name: ".clean_string($first_name)."\n";

   /* $email_message .= "Last Name: ".clean_string($last_name)."\n";*/

    $email_message .= "Email: ".clean_string($email_from)."\n";

    $email_message .= "Subject: ".clean_string($telephone)."\n";

    $email_message .= "Comments: ".clean_string($comments)."\n";





// create email headers

$headers = 'From: '.$email_from."\r\n".

'Reply-To: '.$email_from."\r\n" .

'X-Mailer: PHP/' . phpversion();

@mail($email_to, $email_subject, $email_message, $headers);  

?>



<!-- include your own success html here -->



alert("succes! we will be in contact with your shortly")



<?php

}

?>

but right now when i press submit it goes to the php page and shows this: alert("succes! we will be in contact with your shortly")

whata i wanna do is when i press the submit button and everything is ok i just get a alert on the same page where i was that says we will be in contact with you shortly.

in javascript that is window.alert("sometext"); but how do i use it here when i press the submit button

and how do i use this box when someone presses the submit button and something is wrong?

Answer 1

You can easily check if the mail has been sent succesfully, look at my code snippet below.

if(@mail($email_to, $email_subject, $email_message, $headers)) {
    //Mail has been sent succesfully
    echo "<script>window.alert('Mail has been sent succesfully')";
} else {
    //Something went wrong with emailing
    echo "<script>window.alert('Mail could not be sent!')";
}

Answer 2

Add the onsubmit attribute to your form and create a javascript function that will handle all of that logic. Make sure to return validate() so that if you return false from validate it will stop the form from submitting:

<script>
    function validate() {
        var valid = false;
        //do some validation here.
        if (valid) {
             alert('sometext');
             return true;
        }
        return false;
    }
</script>

<form name="contactform" onsubmit="return validate();" method="post" action="send_form_email.php">

For simplicity's sake, I used the onsubmit attribute, but it should be noted that there are more preferable ways to do this, such as using event handlers.

Answer 3

You can use javascript to check when submit button is clicked. Next line is the one you have :

<form name="contactform" method="post" action="send_form_email.php">

Add the javascript verification like next line :

<form name="contactform" method="post" action="send_form_email.php"
      onsubmit="return check_everything();" >

Now, in your javascript section, declare the method :

<script type="text/javascript">
function check_everything () {
var name = document.getElementsByName("first_name");
if ( name.value.length == 0 )
   { alert("Error: enter first name.");
     return false;
   }
alert("we will be in contact with you shortly.");
return true;
}
</script>

I am checking the name only, you can check all the fields. In case of any error, an alert window will be shown and method will return FALSE. If everything was fine, another alert is shown and it will return TRUE, in this case the FORM will be submitted.

Remember, this is client side, if you want to check on the server side, use Jordy's solution.