Question

我正在尝试创建一个联系表单，我花了一整天的时间试图弄清楚它为什么不起作用。我有

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

位于我的页面顶部。

这是表格：

<div id="CTwrapper">
  <form action="" method="">
    <legend>Send me a message</legend>
    <input type="text" placeholder=" &#xf007;  Name" id="Contactname" onfocus="this.placeholder = ''" onblur="this.placeholder = ' &#xf007;  Name'" name="name">
    <label class="error" for="name" id="name_error">This field is required.</label>
    <input type="email" id="email" placeholder=" &#xf0e0;  Email" onfocus="this.placeholder = ''" onblur="this.placeholder = ' &#xf0e0;  Email'" name="email">
    <label class="error" for="email" id="email_error">This field is required.</label>
    <textarea id="message" rows="6" cols="50" placeholder=" &#xf040;  Message" onfocus="this.placeholder = ''" onblur="this.placeholder = ' &#xf040;  Message'" name="message"></textarea>
    <label class="error" for="message" id="message_error">This field is required.</label><br />
    <button class="send" type="submit" value="Send">Send</button><button type="reset" value="Clear">Clear</button>
  </form>
</div>

这是Javascript / Ajax：

$(function() {
  $('.error').hide();
  $(".send").click(function() {

    $('.error').hide()
    var name = $("input#Contactname").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;
    }

    var dataString = 'name='+ Contactname + '&email=' + email + '&message=' + message;

    $.ajax({
      type: "POST",
      url: "mail.php",
      data: dataString,
      success: function() {
        $('#CTwrapper').html("<div id='message'></div>");
        $('#message').html("<h2><style="color:#FFF;">Contact Form Submitted!</style></h2>")
                           .append("<p>We will be in touch soon.</p>")
        .hide()
        .fadeIn(1500, function() {
          $('#message').append("<img id='checkmark' src='images/check.png' />");
        });
      }
    });
    return false;                                     
  });
});

这是PHP：

<?php 
$name = $_POST['Contactname']; 
$email = $_POST['email']; 
$message = $_POST['message']; 
$formcontent="From: $name \n Message: $message"; 
$recipient = "amyclark1@outlook.com"; 
$subject = "Contact form - www.amymorrisclark.com"; 
$mailheader = "From: $email \r\n"; 
mail($recipient, $subject, $formcontent, $mailheader) or die("Uh oh!");     
?>

位于名为 mail.php

的单独文件中

我真正想要的是表单在提交时消失，并且能够在其位置显示消息，说明提交的内容没有刷新页面，并且实际收到了邮件。我似乎无法让所有人一起工作。真的很感激一些帮助。谢谢！

另外，如果有更好/更快/更简单的方法，请告诉我。

Answer 1

我认为问题是因为您的按钮是提交类型，表单会尝试触发操作。

我建议您尝试使用表单的.submit事件而不是按钮类。

$( "#my_form" ).submit(function( event ) {

  event.preventDefault();

  // your script code here

});

或者您可以删除按钮type="submit"，只需保留您的代码即可。

联系表单Javascript / Ajax / PHP无效

1 个答案: