Fade a div in on form submit

Question

What I need to do is submit the form with Ajax, post the form content as post data to the same page, and fade the div in when it's finished.

The problems I'm having are:

1. Submit the form through ajax without refreshing
2. Post the form's content to the same page
3. Fade my div in once the form has been submitted

The code I currently have is:

<script src='http://code.jquery.com/jquery-1.8.2.js'></script>
<script>
$("submits").click(function() { 
    $('form').bind('submit', function () {
      $.ajax({
        type: 'post',
        url: 'index.php',
        data: $('form').serialize(),
        success: function () {
            alert('Success');
        }
    });
    $(".element")
        .css({ opacity:0, visibility:"visible" })
        .animate({ opacity:1 }, "slow");
});
</script>

<?php
If(!Empty($_POST)){
?>
<div class="availability" id="availability">
<?php
Include 'functions/functions.php';

$Username = $_POST['username'];

If(Class_Exists('AIM')){ // note: this is just a check since i move my files a lot
    AIM::Execute($Username); 
}
?>
</div>

Without trying to catch the form submission, everything works as expected.

If you need any other code needed to be provided to help, just comment, and any help is greatly appreciated, thank you.

Answer 1

1. First of all, this code is a messy, organize it, try to put all that you can at the top of your file.

2. You need to have a form to submit data via POST in AJAX.

3. There is a full example of your desired code:

   //Put your PHP at the top
   Include 'functions/functions.php';
   
   $Username = $_POST['username'];
   
   If(Class_Exists('AIM')){ // note: this is just a check since i move my files a lot
       AIM::Execute($Username); 
   }
   
   //Check if is a POST at the top of your file as well, with a variable
   $isPost = true;
   If(!Empty($_POST))
   {
       $isPost = false;
   }
   
   ?>
   
   <script src='http://code.jquery.com/jquery-1.8.2.js'></script>
   
   //This is your ajax script
   function submitFormViaAJAX()
   {
   
       //this fadeOut your div, but you can change to another code to accomplish your effect
       $("#availability").hide(900);
   
       //set your form as content to POST via AJAX
       var data = $('#myForm').serialize();
   
       //put your file name (current in your case) to make the request
       $.post('myFile.php', data);
   }
   </script>
   
   <?php
   //This "if" is not necessary, since the post will be via ajax.. 
   if(!$isPost){
   ?>
   <div class="availability" id="availability">
   
       <form id="myForm">
           <!--form content there-->
   
                  <a href="javascript:submitFormViaAJAX();">Send Form via AJAX</a>
       </form>
   
   </div>
   
   <?php } ?>
   

Feel free to change names, and some code lines

Answer 2

Do the ajax submit and fade out on success:

$.ajax({
    url: window.location.href,
    type: "post",
    data: values,
    success: function(){
        $('#my_form_wrapper').fadeOut(1000); // fade out your form/wrapper 1sec
    },
    error:function(){
        alert("failure");
        $("#result").html('There is error while submit');
    }
});