提交后隐藏表单

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.

Answer 1

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>

Answer 2

If the form sends users to the same page after clicking submit, it's probably easiest to do the hiding with php. Add this somewhere at the top of your file:

<?php $submitPressed = isset($_POST['process'] && $_POST['process'] == 1; ?>

You can then wrap anything you want to hide in the following tags:

<?php if (!$submitPressed): ?>
<!-- form goes here -->
<?php endif; ?>

Note, this will only hide the form once the server has been notified; there might be a tiny delay after pressing submit.

Otherwise, you'll want to use some jQuery bound to the submit event.

Answer 3

$('form-fields').submit(function(){
    var $this = $(this); // so we can use in ajax callback
    $.ajax({
        url: '/',
        data: $(this).serialize(),
        success: function(data){
            if(data == true){
               $this.hide(); //hide form if we got a true to return
            }
        }
    });
    return false; //stop default form submit
});

Same page...

<?php 
if(isset($_POST['process']) && ($_POST['process'] == 1)):
    // do whatever processing
    return true; //at the end so we can compare in ajax
endif;     
?>

Answer 4

You can add the css property of that element to hidden on click..


$(function(){
 $('form-fields').submit(function(){
     $(this).css("visibility", hidden);
  });
});