无刷新联系人表单

-3

我一直在试图创建此表单来显示错误或没有页面刷新的确认消息。无刷新联系人表单

我一直在尝试使用jQuery，但没有成功。我的jQuery代码是完全错误的，我试图创建它太多次了。

有人可以请指出我在正确的方向吗？

HTML

<form method="post" action="index.php" autocomplete="on"> 

     <label>Name</label> 
     <input name="name" placeholder="What is your name?"> 

     <label>Email</label> 
     <input name="email" type="email" placeholder="Your email please"> 

     <label>Message</label> 
     <textarea rows="10"name="message" placeholder="What would you like to say?"></textarea> 

     <label>*What is 2+2? (Anti-spam)</label> 
     <input name="human" placeholder="Type Here"> 

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

    </form>

PHP

<?php 
    $name = $_POST['name']; 
    $email = $_POST['email']; 
    $message = $_POST['message']; 
    $from = 'From: removed '; 
    $to = 'removed'; 
    $subject = 'From: removed'; 
    $human = $_POST['human']; 

    $body = "From: $name\n E-Mail: $email\n Message:\n $message"; 

    if ($_POST['submit']) { 
     if ($name != '' && $email != '') { 
      if ($human == '4') {     
       if (mail ($to, $subject, $body, $from)) { 
       echo '<p>Your message has been sent!</p>'; 
      } else { 
       echo '<p>Something went wrong, go back and try again!</p>'; 
      } 
     } else if ($_POST['submit'] && $human != '4') { 
      echo '<p>You answered the anti-spam question incorrectly!</p>'; 
     } 
     } else { 
      echo '<p>You need to fill in all required fields!!</p>'; 
     } 
    } 
?>

来源

2014-10-28 Wiseguy

您需要使用ajax，并且在'＃submit'被推送时阻止提交表单。 – vaso123 2014-10-28 15:02:42

你的jQuery代码在哪里？ – Terry 2014-10-28 15:02:58

a，你的jQuery代码在哪里？ b，如果你的jQuery不对，那么从头开始，c，有很多在线例子，你可以开始使用它作为参考，有一个良好的开端。 – unixmiah 2014-10-28 15:06:08

是的，我可以。为了达到这个目标，你需要使用AJAX。像下面这样的东西应该工作，但我没有测试它：

$('form').submit(function(e) { 
    var formData = $(this).serialize(); //Get the form data (input) 

    //Post with AJAX 
    $.post("post-contact.php", formData) 
    .done(function(data) { 
     alert('Succes!') 
    }) 
    .fail(function(data) { 
     alert('Failed!') 
    }); 

    return false; //Prevent form from being submitted (same as e.preventDefault()) 
});

我希望这可以帮助你，你应该阅读文档的更多信息。

来源

2014-10-28 15:12:13 JasonK

你需要在$（'form'）后面加上你的表单验证码或者确认码。或介于两者之间。 – unixmiah 2014-10-28 15:15:16

谢谢，它没有工作，但代码的建议是真的有帮助 – Wiseguy 2014-10-28 15:36:00

@Wiseguy这很奇怪，这是你的问题，也应该工作的确切答案：p – JasonK 2014-10-28 15:48:30

看看jQuery中的$ .post。

你可以有一个这样的形式：

<form id="form"> 
    <label for="field">Field</label><br /> 
    <input name="field" id="field" placeholder="Field" /> 
    <span id="responseField"></span> 
    <br /><br /> 
    <input type='submit' value='Send !'/> 
</form>

一个PHP检查这样的：

$json = array("status" => "OK", "error" => []); 
if (isset($_POST['field'])) // Test if every field is here 
{ 
    // Test if "field" is OK 
    if (!preg_match("/^[a-zA-Z0-9]+$/", $_POST['field'])) 
    { 
     $json['status'] = "NO"; 
     $json['error']['field'] = "Must be alphanumeric"; 
    } 
} 
else 
    $json['status'] = "NO"; 

echo json_encode($json); 
exit();

而一个JS这样

$(document).on("ready", function() { 
    $("#form").submit(function() { 
     var url = "check.php"; 
     $.post(url, {field: $("#field").val()}, function(data) { 
      var json = $.parseJSON(data); 
      if (json.status == "OK") 
       alert("Everything is OK!"); 
      else 
       $("#responseField").html(json.error.field || ""); 
     }); 
     return false; 
    }); 
});

会发生什么：你送在“字段”值，它在PHP中检查（这里，只是一个字母数字检查，做你想做的）。在检查表格时，请填写$json变量。发送后。然后你的JS会检查一切是否正常，否则它会在现场后的范围内打印你的反馈。

为了更加便携，请检查JasonK的答案，它会自动发送整个表单，这比构建要发送的对象要好。他还检查ajax请求是否失败，这是一个非常好的习惯，我的代码是最简单的了解AJAX请求如何工作。

来源

2014-10-28 15:30:40 Goombi

无刷新联系人表单

回答

相关问题