DIV中的PHP联系表单状态更新

时间:2015-05-26 21:22:47

标签: php html forms contact

听起来像一个奇怪的问题,但这就是我所拥有的。 php有一个片段,说成功或失败使白屏显示这个,我真的希望它在同一页面上的提交按钮下弹出,而不是重定向整个页面。

我认为我可以将其指向空<div>

mail.php:

<?php
    $name = $_POST['name'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];
    $message = $_POST['message'];
    $formcontent=" From: $name \n Phone: $phone \n Message: $message";
    $recipient = "art@jamisonsigns.com";
    $subject = "Web Contact Form";
    $mailheader = "From: $email \r\n";
    mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
    echo "Thank You!" . " -" . "<a href='index.html' style='text-decoration:none;color:#ff0099;'> Return Home</a>";
?>

我的网站上有一个简单的HTML表单,如下所示:

<form class="contact-form" form action="mail.php" method="POST">
      <fieldset>
           <input type="text" class="name" id="name" placeholder="Name...">
      </fieldset> 
      <fieldset>
           <input type="email" class="email" id="email" placeholder="Email...">
      </fieldset> 
      <fieldset>
           <input type="text" class="phone" id="phone" placeholder="Phone...">
      </fieldset>
      <fieldset>
           <textarea name="message" id="message" cols="30" rows="4" placeholder="Message.."></textarea>
      </fieldset>
      <fieldset>
           <input type="submit" class="button" id="button" value="Send Message">
      </fieldset>
 </form>

1 个答案:

答案 0 :(得分:0)

您需要使用Ajax提交表单。然后在成功时在html中插入消息。

$('#button').click(function(event) {
event.preventDefault();

var formdata = $('#formID').serializeArray();
var url = '/urltopost.php';

$.ajax( 
{
    url : url,
    type: "POST",
    data: formdata,
    success:function(data, textStatus, jqXHR) 
    {
        //data: return data from server
        console.log("STATUS:" + textStatus + " | jqXHR:" + jqXHR + " | data:" + data);
    },
    error: function(jqXHR, textStatus, errorThrown) 
    {
        //if fails      
        alert("ERROR:" + " -> " +errorThrown);
    }
});

});

Here it is a tutorial if you need..