Hide Form After Submit

Question

I am attempting to hide my form after my submit button has been pressed using Jquery.

So far I have imported the Jquery library.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>  

Trying to attempt to hide the form using the class "form-fields." This class holds the whole form.

Trying to hide it like this:

 <?php if (isset($_POST['process']) && ($_POST['process'] == 1)): ?>
<script type="text/Javascript">
    $('#form-fields').hide(); 
</script>

This doesn't seem to be working. Any help would be appreciated.

Solution

You need to hide the form using the submit event handler and need to remove the PHP condition <?php if (isset($_POST['process']) && ($_POST['process'] == 1)): ?> since it runs in the server side

What happens below is, we register an event handler which will get called when the form is submitted, and inside that the form is hidden

<script type="text/Javascript">
    $('#form-fields').submit(function(){
        $(this).hide(); 
    })
</script>