Question

我知道这里有一些非常相似的问题，但是由于我对javascript / ajax等的了解还不够深，所以我无法用在那里找到的答案解决问题。

我在网站上有一个联系表单，想在提交时隐藏。

我的HTML是：

<form method="post" id="contact" class="peThemeContactForm form" action="mail.php">
    <div id="personal" class="bay form-horizontal">
        <div class="control-group">
            <div class="controls name">
                <h2>Name</h2>
                <input class="required span9" type="text" name="author" data-fieldid="0" id="name">
            </div>
        </div>
        <div class="control-group">
            <div class="controls email">
                <h2>Email</h2>
                <input class="required span9" type="email" name="email" data-fieldid="1" id="email">
            </div>
        </div>
        <div class="clear"></div>
        <div class="control-group">
            <div class="controls message">
                <h2>Message</h2>
                <textarea name="message" rows="12" class="required span9" data-fieldid="2" id="comments"></textarea>
            </div>
        </div>
        <div class="control-group">
            <div class="controls send-btn">
                <button type="submit" class="contour-btn red buttoncontact">Send Message</a></button>
            </div>
        </div>
    </div>
    <div class="notifications">
        <div id="contactFormSent" class="formSent alert alert-success">
            <strong>Mail sent</div>
        <div id="contactFormError" class="formError alert alert-error">
            <strong>No mail sent</div>
    </div>

</form>

我的PHP文件是

<?php 
if(isset($_POST['email'])){
    $mailTo = "mymail@provider.com";
    $subject = "Contact Request";
    $body = "You've got mail
<br><br>
FROM: ".$_POST['email']."<br>
NAME: ".$_POST['author']."<br>
COMMENTS: ".$_POST['message']."<br>";   
    $headers = "To: Me <".$mailTo.">\r\n";
    $headers .= "From: ".$_POST['author']." <".$_POST['email'].">\r\n";
    $headers .= "Content-Type: text/html";
    $mail_success =  mail($mailTo, utf8_decode($subject), utf8_decode($body), $headers);        
}

?>

有人可以告诉我在有人提交后隐藏表格的最简单方法吗？我对java或jquery不太了解，所以不胜感激。：）

谢谢！

编辑：联系表单在我要隐藏它的同一页面上。没有其他页面，只有一个页面。

Answer 1

如果您使用的是jQuery，则可以在HTML末尾添加以下JavaScript代码：

<script>
   $(function () {
        $('#contact').on('submit', function (e) {
            var self = this; //Keep a reference to the form that was submitted
            e.preventDefault();
            $.ajax({
                url: $(this).attr('action'), 
                method: $(this).attr('method'),
                data: $(this).serialize(),
                success: function () {
                     $(self).hide(); //Hide the form if the request was successful 
                },
                error: function () { alert('Failed to send email'); }
            });

        });
   });
</script>

这应该通过ajax提交表单，并且在这种情况下不刷新页面。

Answer 2

如果您的项目中包含jQuery，只需创建一个

$("form").hide();

提交操作之后。

Answer 3

您实际上不需要JavaScript。

由于您提到用于处理表单提交的PHP与HTML在同一页上，因此您可以通过将表单包装在PHP { {1}}语句，如下所示：

if

P.S。您也可以考虑添加一个<?php if(!isset($_POST['email'])){ ?> <form method="post" id="contact" class="peThemeContactForm form" action="mail.php">  </form> <?php } ?>，在其中打印其他内容，例如“谢谢”或其他类型的确认消息。

用php / html提交后隐藏表格

3 个答案: