Question

我目前有一个联系表单，我或多或少地从在线教程中复制了。提交表单时，它会重新加载页面。是否可以修改以下代码以发送表单但不重新加载页面？

<?php
$mail_to = 'benliger@hotmail.com'; // specify your email here

// Assigning data from the $_POST array to variables
$name = $_POST['sender_name'];
$mail_from = $_POST['sender_email'];
$phone = $_POST['sender_phone'];
$message = $_POST['sender_message'];

// Construct email subject
$subject = 'enquiry ' . $name;

// Construct email body
$body_message = 'From: ' . $name . "\r\n";
$body_message .= 'E-mail: ' . $mail_from . "\r\n";
$body_message .= 'Phone: ' . $phone . "\r\n";
$body_message .= 'Message: ' . $message;

// Construct email headers
$headers = 'From: ' . $mail_from . "\r\n";
$headers .= 'Reply-To: ' . $mail_from . "\r\n";

$mail_sent = mail($mail_to, $subject, $body_message, $headers);

if ($mail_sent == true){ ?>
    <script language="javascript" type="text/javascript">
    alert('Thanks for getting in touch!');
    window.location = 'index.php';
    </script>
<?php } else { ?>
<script language="javascript" type="text/javascript">
    alert('Message not sent :( Please, get in contact with me directly: benliger@hotmail.com');
   window.location = 'index.php';
</script>
<?php
}
?>


<form action="form_process.php" method="POST"> 

<label for="field_name">Name:</label> 

<input type="text" id="field_name" name="sender_name"> 

<br /><br />   

<label for="field_email">E-mail:</label> 

<input type="text" id="field_email" name="sender_email"> 

<br /><br />   

<label for="field_phone">Phone:</label> 

<input type="text" id="field_phone" name="sender_phone"> 

<br /><br />   

<label for="field_message">Message:</label> 

<textarea id="field_message" name="sender_message"></textarea> 

<br /><br />   

<input type="submit" name="send_message" value="Send"> 

</form>

Answer 1

是的，你可以。如果您想在不刷新页面的情况下提交表单，可以使用AJAX。如果您还想alert从PHP提供的消息，您可以echo消息，并{AJ}呼叫alert。尝试下面的代码，我在行之间添加了注释以供解释。

<?php

//Check if POST data is set, and not empty, else it will do this every single time, submitted or not
if(isset($_POST) && !empty($_POST))
{

    $mail_to = 'benliger@hotmail.com'; // specify your email here

    // Assigning data from the $_POST array to variables
    $name = $_POST['sender_name'];
    $mail_from = $_POST['sender_email'];
    $phone = $_POST['sender_phone'];
    $message = $_POST['sender_message'];

    // Construct email subject
    $subject = 'enquiry ' . $name;

    // Construct email body
    $body_message = 'From: ' . $name . "\r\n";
    $body_message .= 'E-mail: ' . $mail_from . "\r\n";
    $body_message .= 'Phone: ' . $phone . "\r\n";
    $body_message .= 'Message: ' . $message;

    // Construct email headers
    $headers = 'From: ' . $mail_from . "\r\n";
    $headers .= 'Reply-To: ' . $mail_from . "\r\n";

    $mail_sent = mail($mail_to, $subject, $body_message, $headers);

    if ($mail_sent == true){ 
        //Echo the message now, because it will be catched in your jQuery listerener (see code below)
        echo 'Thanks for getting in touch!';
     } else { 
        //Echo the message now, because it will be catched in your jQuery listerener (see code below)
        echo 'Message not sent :( Please, get in contact with me directly: benliger@hotmail.com';
    }
    //This exit; is important, else the alert box will be full of the further html code
    exit;

}
?>


<form action="form_process.php" method="POST"> 

<label for="field_name">Name:</label> 

<input type="text" id="field_name" name="sender_name"> 

<br /><br />   

<label for="field_email">E-mail:</label> 

<input type="text" id="field_email" name="sender_email"> 

<br /><br />   

<label for="field_phone">Phone:</label> 

<input type="text" id="field_phone" name="sender_phone"> 

<br /><br />   

<label for="field_message">Message:</label> 

<textarea id="field_message" name="sender_message"></textarea> 

<br /><br />   

<input type="submit" name="send_message" value="Send"> 

</form>

<!-- Add jQuery library !-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>    
<script>
    //Create listener for form
    $(document).on('submit','form',function(e){
        //Prevent the default action
        e.preventDefault();

        //Define submitted form
        var form = $(this);

        //Create an array of input values
        var data = $(this).serializeArray();
        //Do the ajax request
        $.post('index.php',data,function(responseMessage){
            //Call resetForm function
            resetForm(form); 
            //Alert your message
            alert(responseMessage);
        });

    });

    //Reset form function
    function resetForm($form) {
        //Find input fields and set value to '' (empty);
        $form.find('input:text, input:password, input:file, select, textarea').val('');
        //Find check- and radiobox and uncheck them;
        $form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
    }   

</script>

联系表单以不加载新页面

1 个答案: