Question

我正在为我的网站构建一个基本联系表单（三个字段）。我有用HTML和CSS构建的表单;我所要做的就是构建PHP以使表单响应发送到我的电子邮件。我找到了一个教程并构建了PHP文件（有效），但希望表单在后台提交而不是离开原始页面。我找到了online tutorial使用Ajax来做这件事，经过一些调整后，我得到它主要是为了工作。我现在唯一的问题是，当我收到带有回复的电子邮件时，消息字段将返回＆＃34;未定义。＆＃34;

我对HTML和CSS有很好的把握，但PHP和JS对我来说是新手（刚刚开始为这个项目学习它们），所以任何有关如何解决这个问题并可能纠正任何错误代码的帮助将是巨大的救命。我在下面包含了HTML，PHP和JS表单（PHP和JS都命名为＆＃39; contact。[filetype]＆＃39;。

HTML

<div id="contact_form">
  <form name="contact" action="">
    <div class="field">
      <label for="name">Name</label>
      <input type="text" name="name" id="name" required/>
    </div>
    <div class="field">
      <label for="email">Email</label>
      <input type="text" name="email" id="email" required/>
    </div>
    <div class="field">
      <label for="comments">Comments</label>
      <textarea name="comments" id="comments" rows="3"></textarea>
    </div>
    <ul class="actions">
      <li><input type="submit" name="submit" class="button" id="submit_btn" value="Send Message" /></li>
    </ul>
  </form>
</div>

PHP

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$comments = $_POST['comments'];
$formcontent="From: $name \n Message: $comments \n";
$recipient = "alltheladsmedia@gmail.com";
$subject = "Message From Website";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Thank You!" . " -" . "<a href='index.html' target='_blank' style='text-decoration:none;color:#505050;'> Return Home</a>";
?>

JS

$(function() {
  $('.error').hide();
  $(".button").click(function() {
    // validate and process form here

    $('.error').hide();
    var name = $("input#name").val();
      if (name === "") {
      $("label#name_error").show();
      $("input#name").focus();
      return false;
    }
      var email = $("input#email").val();
      if (email === "") {
      $("label#email_error").show();
      $("input#email").focus();
      return false;
    }
      var message = $("input#message").val();
      if (message === "") {
      $("label#message_error").show();
      $("input#message").focus();
      return false;
    }

$.ajax({
  type: "POST",
  url: "contact.php",
  data: {name:name,email:email,message:message},
  success: function() {
    $('#contact_form').html("<div id='success'></div>");
    $('#success').html("<h2>Your message was successfully submitted!</h2>")
    .append("<p>We will get back to you within 24-48 hours.</p>")
    .hide()
    .fadeIn(1500, function() {
      $('#success');
    });
  }
});
return false;
  });
  });

Answer 1

在您的标记中，该字段的ID为＆＃34;评论＆＃34;但是你正在寻找＆＃34;消息＆＃34;在你的JS和PHP中。

Answer 2

您已打印邮件结果

 if(@mail($recipient, $subject, $formcontent, $mailheader))
    {
      echo "Mail Sent Successfully";
    }else{
      echo "Mail Not Sent";
    }

Answer 3

如果您使用的是jquery 3，请进行一些更改。

更改此

$(".button").on("click", function() {
  // Validation here
  // Put ajax outside this block
});

像这段代码一样编辑html表单。

检查开发。工具如果php正确添加了action属性。

<form id="contact" name="contact"  action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post" >

ajax调用此

$("#contact").on("submit", function(e) {
  e.preventDefault(); // Now the page won't redirect
  var url = $(this).attr("action");
  // Check console if contact is printed after the form is submitted
  // If contact is printed the url is right
  console.log(url);
  $.ajax({
     type: "POST",
     url: url,
     data: $(this).serialiseArray(), // Found a typo here fixed
     success: function() {
       // Your stuffs
     }
  });
});

不要将ajax调用放在输入字段验证中。

如果您发现任何问题，请告诉我，以便我可以修复我的代码。

＆＃34;未定义＆＃34;提交联系表单时没有页面刷新的响应

3 个答案: