在PHP联系表中调用Javascript

Question

Here's the form I'm working with. It's not something I made, found it in a bootstrap and moved it over. It works, but ideally, when the visitor submits it, it keeps them on the same page and displays a javascript popover from bootstrap, saying "Thanks, we've received your info and will be in touch!"

When I try and display Javascript though (just using a basic alert for now), it doesn't look like it executes... instead, it simply writes the code in a new window, contact.php.

Here's the page I'm working with:

http://www.jackalopemedia.com/benefits

The contact form:

<?php
/*
* Contact Form Class
*/


header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');

$admin_email = 'mcollinsblog@gmail.com'; // Your Email
$message_min_length = 0; // Min Message Length


class Contact_Form{
function __construct($details, $email_admin, $message_min_length){

    $this->name = stripslashes($details['name']);
    $this->email = trim($details['email']);
    $this->phone = trim($details['phone']);
    $this->subject = 'Contact from Your Website'; // Subject 
    $this->message = $this->name . " " . $this->email . " " . stripslashes($details['message']);

    $this->email_admin = $email_admin;
    $this->message_min_length = $message_min_length;

    $this->response_status = 1;
    $this->response_html = '';
}


private function validateEmail(){
    $regex = '/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i';

    if($this->email == '') { 
        return false;
    } else {
        $string = preg_replace($regex, '', $this->email);
    }

    return empty($string) ? true : false;
}


private function validateFields(){
    // Check name
    if(!$this->name)
    {
        $this->response_html .= '<p>Please enter your name</p>';
        $this->response_status = 0;
    }

    // Check email
    if(!$this->email)
    {
        $this->response_html .= '<p>Please enter an e-mail address</p>';
        $this->response_status = 0;
    }

    // Check valid email
    if($this->email && !$this->validateEmail())
    {
        $this->response_html .= '<p>Please enter a valid e-mail address</p>';
        $this->response_status = 0;
    }

    // Check message length
    if(!$this->message || strlen($this->message) < $this->message_min_length)
    {
        $this->response_html .= '<p>Please enter your message. It should have at least '.$this->message_min_length.' characters</p>';
        $this->response_status = 0;
    }
}


private function sendEmail(){
    $mail = mail($this->email_admin, $this->subject, $this->message,
         "From: ".$this->name." <".$this->email.">\r\n"
        ."Reply-To: ".$this->email."\r\n"
    ."X-Mailer: PHP/" . phpversion());

    if($mail)
    {
        $this->response_status = 1;
        //$this->response_html = '<p>Thank You!</p>';
        echo '<script type="text/javascript">'
           , 'alert(thank you);'
           , '</script>';
    }
}


function sendRequest(){
    $this->validateFields();
    if($this->response_status)
    {
        $this->sendEmail();
    }

    $response = array();
    $response['status'] = $this->response_status;
    $response['html'] = $this->response_html;

    if ($response['status'] == '0') { // If error
      echo json_encode($response);
    } else {
      echo $response['html'];
    }
}
}


$contact_form = new Contact_Form($_POST, $admin_email, $message_min_length);
$contact_form->sendRequest();

?>

Thanks for any responses!

Answer 1

您需要使用ajax提交表单，然后将mail函数的结果返回到将显示错误或成功消息的回调函数。

Answer 2

So you've built something like an API receiver. What you need to do is use jQuery to post to contact.php asynchronously and and write the response to the page.

You can add some JS to your page like this:

$('#contact-form').on('submit', function(event) {
   event.preventDefault(); //prevent the form from submitting

   $.post('contact.php', $('#contact-form').serialize()) //send the request to contact.php
     .done(function(response) {
         $('body').append(response.html); //once the response is back, append it to the body tag
      });
 });