Question

我如何才能使这个HTML联系表单互动？

method

我希望用户输入的信息通过PHP脚本发送给我，但我不确定那个PHP脚本会是什么样子。

成功提交后，我希望用户的姓名能够回显到页面上（即＆＃39; 感谢您提交的Joe，我们会尽快回复您！＆＃39;。）

Answer 1

实际上对初学者来说并不容易。一种方法是使用AJAX（JavaScript客户端向服务器发出的请求）。

我已经编写了一个AJAX函数，它使用发送到服务器的所需参数来处理AJAX调用的执行。该请求由将返回数据的PHP文件接收。然后，JavaScript可以在回调函数中使用此数据。

以下函数使用GET运行AJAX调用，允许我们将参数（object）发送到文件（string）并在请求有时启动回调（function）已经结束了。

function ajax(file, params, callback) {

  var url = file + '?';

  // loop through object and assemble the url
  var notFirst = false;
  for (var key in params) {
    if (params.hasOwnProperty(key)) {
      url += (notFirst ? '&' : '') + key + "=" + params[key];
    }
    notFirst = true;
  }

  // create a AJAX call with url as parameter
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      callback(xmlhttp.responseText);
    }
  };
  xmlhttp.open('GET', url, true);
  xmlhttp.send();
}

以下是我们在您的案例中使用它的方式：

function sendData() {

  parameters = {
    name: document.querySelector('#contact_form_name').value,
    email: document.querySelector('#contact_form_email').value,
    subject: document.querySelector('#contact_form_subject').value,
    message: document.querySelector('#contact_form_message').value
  };

  ajax('send.php', parameters, function(response) {
    // add here the code to be executed when data comes back to client side      
    // e.g. console.log(response) will show the AJAX response in the console
  });

}

然后在您的文件send.php中，您可以输入以下代码来处理AJAX调用发送的url参数。

if (isset($_REQUEST['name'], $_REQUEST['email'], $_REQUEST['subject'], $_REQUEST['message'])) {
    // they are set, you can use them by accessing $_REQUEST
    // return the desired output with `echo` not `return`!
    echo $_REQUEST['name'] . ', you have sent a message.';
}

使用上述过程，您无需在HTML中使用form。您只需拥有input代码，当然还有button即可启动函数sendData()。使用onclick标记中的属性button指定单击按钮时要执行的操作。

<!-- Contact Us Form -->
<div class="contact_form_container">
  <input id="contact_form_name" class="input_field contact_form_name" type="text" name="name" placeholder="Name" required="required" data-error="Name is required.">
  <input id="contact_form_email" class="input_field contact_form_email" type="email" name="email" placeholder="E-mail" required="required" data-error="Valid email is required.">
  <input id="contact_form_subject" class="input_field contact_form_subject" type="text" name="subject" placeholder="Subject" required="required" data-error="Subject is required.">
  <textarea id="contact_form_message" class="text_field contact_form_message" name="message" placeholder="Message" rows="4" required data-error="Please, write us a message."></textarea>
</div>
<div>
  <button onclick="sendData()" id="contact_form_submit" type="submit" class="contact_submit_btn trans_300" value="Submit">
                                        send<img src="images/arrow_right.svg" alt="">
                                    </button>
</div>

返回对象而不是字符串：

你甚至可以玩PHP，以便它在回调中返回一个实际的Javascript对象，而不仅仅是一个字符串。如果您想将各种信息返回给客户端，这将非常有用。

您必须使用内置的json_encode()函数来获取PHP数组的JSON表示。例如：

$array = array({

  'name' => $_REQUEST['name'],
  'subject' => $_REQUEST['subject']

});

echo json_encode($array);

然后在JavaScript里面的回调函数中使用：

let obj = JSON.parse(response);

您基本上已将响应转换为Javascript对象（不确定它是否为JSON对象......，但它是JavaScript对象，这才是重要的）。这意味着您可以访问obj的属性：例如，obj.name将包含用户的名称，obj.subject是邮件的主题等...

注意：在此示例中，我刚刚返回了首先发送到服务器的信息，但您可以返回任何您想要的内容。您可以在PHP文件中有一个进程将数据保存到数据库并返回其他类型的信息。 AJAX的可能性是无数的！

Answer 2

如果您是初学者并且不想编写任何类型的PHP代码，您可以使用https://formspree.io/之类的服务或我自己here之类的服务。这些都很容易使用，并且不需要您的代码。

使用我的表单处理程序，您可以使用GOTO名称指定在提交表单后页面应重定向的位置。

<input class="hidden" type="text" name="GOTO" value="URL">

如果您阅读文档，您可以使用Formspree等服务自定义许多内容。因此，您可以创建一个自定义页面，说明＆＃34;感谢您的提交和＃34;。

如果您想要实际包含他们提交的表单中的信息，您必须像上面所说的那样做，并创建自己的表单处理程序。

Answer 3

尝试使用此类似命令显示用户名

if(

    !isset( $_POST['name'] ) || empty( $_POST['name'] ) ||
    !isset( $_POST['email'] ) || empty( $_POST['email'] ) ||
    !isset( $_POST['subject'] ) || empty( $_POST['subject'] ) ||
    !isset( $_POST['message'] ) || empty( $_POST['message'] ) ||

)

    exit( 'Please fill all fields' )

    // or redirect to previous page

    // header('Location: ' . $_SERVER['HTTP_REFERER'] . '#error=Please%20fill%all%fields' );



else{

    // Your message saving logic here, save it to a database / file or send it to mail

    echo "Thank you for your submission {$_POST['name'}, we will get back to you as soon as possible!";

}

Answer 4

使用jQuery ajax。

您的表格：

     <form id="reply_form" action="#" method="POST">
          <div>
               <input id="contact_form_name" class="input_field contact_form_name" type="text" name="name" placeholder="Name" required="required" data-error="Name is required.">
               <input id="contact_form_email" class="input_field contact_form_email" type="email" name="email" placeholder="E-mail" required="required" data-error="Valid email is required.">
               <input id="contact_form_subject" class="input_field contact_form_subject" type="text" name="subject" placeholder="Subject" required="required" data-error="Subject is required.">
               <textarea id="contact_form_message" class="text_field contact_form_message" name="message"  placeholder="Message" rows="4" required data-error="Please, write us a message."></textarea>
          </div>
          <div>
               <button id="contact_form_submit" type="button" class="contact_submit_btn trans_300" value="Submit">
                      send<img src="images/arrow_right.svg" alt="">
               </button>
          </div>
      </form>

你的JS：

$('#contact_form_submit').click(function(){
    $.post('send.php', $('#reply_form').serialize(), function(data, status){
        if(status == "success"){
            var response_message = data.message;
            alert(response_message);
        }
    }, "json");
});

您的PHP处理程序（send.php）

<?php
   // Response array, it will be returned to client. You cant extend it with additional data.
   $response = ['message' => 'Error'];

   $name = $_POST['name'] ?: ""; 
   $email = $_POST['email'] ?: "";
   $subject= $_POST['subject'] ?: ""; 
   $message= $_POST['message'] ?: ""; 


   if($name) {
        if(filter_var($email, FILTER_VALIDATE_EMAIL)){
             if($subject){
                  if($message){
                      // do something with form data

                      // if success
                      $response['message'] = "Thank you for your submission". $name .", we will get back to you as soon as possible!";
                  }else{
                       $response['message'] = "Message is too short.";
                  }
             }else{
                  $response['message'] = "Enter subject.";
             }
        }else{
             $response['message'] = "Enter valid email.";
        }
   }else{
        $response['message'] = "Enter your name.";
   }

   echo json_encode($response); 
   exit();

?>

重要提示：表单操作=＆＃34;＃＆＃34 ;,按钮类型=＆＃34;按钮＆＃34;。别忘了验证表单数据。

如何使此联系人形式互动并反映信息？

4 个答案:

如何使此联系​​人形式互动并反映信息？

4 个答案:

如何使此联系人形式互动并反映信息？