Question

首先，我是网页设计的新手，只懂HTML和CSS。

我希望能够在不离开用户所在的页面的情况下发送联系表单消息。我怎样才能做到这一点？

请非常具体，因为我对这一切都不熟悉。

HTML

<html>
<head>
</head>

<body>

<a href="#openModal">Email Us</a>



<div id="openModal" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="close">X</a>
        <h2>Contact Us</h2>
        <section class="body">

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

<table width="450px">

<tr>

 <td valign="top">

  <label for="first_name">First Name *</label>

 </td>

 <td valign="top">

  <input  type="text" name="first_name" maxlength="50" size="30">

 </td>

</tr>

<tr>

 <td valign="top"">

  <label for="last_name">Last Name *</label>

 </td>

 <td valign="top">

  <input  type="text" name="last_name" maxlength="50" size="30">

 </td>

</tr>

<tr>

 <td valign="top">

  <label for="email">Email Address *</label>

 </td>

 <td valign="top">

  <input  type="text" name="email" maxlength="80" size="30">

 </td>

</tr>


<tr>

 <td valign="top">

  <label for="comments">Comments *</label>

 </td>

 <td valign="top">

  <textarea  name="comments" maxlength="1000" cols="25" rows="6"></textarea>

 </td>

</tr>

<tr>

 <td colspan="2" style="text-align:center">

  <input type="submit" name="myFormSubmitted" value="Submit"> 

 </td>

</tr>

</table>

</form>


    </section>
    </div>

</div>


</body>
</html>

PHP

            <?php

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



        // EDIT THE 2 LINES BELOW AS REQUIRED

        $email_to = "example@server.com";

        $email_subject = "New CBWC Contact Form Message";





        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['last_name']) ||

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

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

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

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

        }



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

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

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

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

        $comments = $_POST['comments']; // 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 .= "Telephone: ".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 -->



    Thank you for contacting us. We will be in touch with you very soon.



    <?php

    }

    ?>

只要提供代码，我就可以使用任何类型的语言。

这是我到目前为止所做的一个例子。（它不是成品:) http://cbwconline.com/modal%201.html

Answer 1

查看Ajax请求。

使用Ajax，您可以在后台发送HTTP请求，也可以异步发送（保持异步！很多人都忘记异步是Ajax的一个重要方面）

我建议你使用一个名为jQuery的库来使你的Ajax请求更容易：

假设您的PHP文件名为checker.php，您可以通过jQuery向它发送Ajax请求，如下所示：

$.ajax({
  url: "checker.php",
  type: "POST",
  data: {/*Fill in data*/},
  success: function(resp){
    // Message (error or success)
    $("#response").html(resp)
  }
});

当用户单击表单上的提交时，可能会触发此操作。您可以阻止表单使用整齐的小event.preventDefault()方法自动发出HTTP请求。因此，举例来说，让我们这样做：

$("#myForm").on("submit", function(event){
  event.preventDefault();
  // Perform Ajax request:
  $.ajax({
    url: "checker.php",
    type: "POST",
    data: {/*Fill in data*/},
    success: function(resp){
      // Message (error or success)
      $("#response").html(resp)
    }
  });
});

要记住的事情：

jQuery是基于JavaScript构建的，因此jQuery中显示的任何内容都可以在无库的JavaScript中完成
Ajax请求异步，让它们保持异步。
我轻松地将此代码基于您的代码。您可能需要调整一下才能适应您的设置。

如何在不离开当前页面的情况下发送联系表单消息？

HTML

PHP

1 个答案: