Hide form after submit with php / html

555

I know there are some very similar questions around here but since I am not that deep into javascript / ajax etc. yet, I couldn't solve my problem with the answers I found there.

I have a contact form on a website that I want to hide on submit.

My HTML is:

And my PHP file is

<?php 
if(isset($_POST['email'])){
    $mailTo = "[email protected]";
    $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);        
}

?>  

Could anyone please tell me the easiest way to hide the form after someone has submitted? I don't know much about java or jquery yet, so a basic or step by step answer would be appreciated. :)

Thanks!

EDIT: The contact form is on the same page where I want to hide it. There is no other page, it's just the one.

237

Answer

Solution:

If you are using jQuery you can add this JavaScript code in the end of your HTML:

<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>

This should submit the form via ajax and not refresh the page when that happens.

87

Answer

Solution:

If you have jQuery in your project, just make a

$("form").hide();

after the submit action.

22

Answer

Solution:

You don't really need JavaScript for this.

Since you mention that the PHP for dealing with the form submit is on the same page as the HTML, you can simply tell the code not to render the form when the form was posted back, by wrapping the form inside a PHPif statement, something like this:

<?php
if(!isset($_POST['email'])){
?>
  <form method="post" id="contact" class="peThemeContactForm form" action="mail.php">
  <!-- (and all the rest of your form code...) -->
  </form>
<?php
}
?>

P.S. You could also consider adding anelse in which you print something else such as a "Thanks" or other kind of confirmation message.

People are also looking for solutions to the problem: WordPress: Getting title tag in PHP variable

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.