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:

Submit the form through ajax without refreshing
Post the form's content to the same page
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.

Try to add some ajax submit code to your page :) There is 101920192 posts about ajax submitting forms. Are you too lazy to read anything? — Hardy, Dec 10 '13 at 23:38
Hardy: No, I've read plenty, but none of them are any helpful to me. 3rror404: Updating it now — user2943677, Dec 10 '13 at 23:40
Ok, read this then: http://stackoverflow.com/a/5004276/2611927 — Hardy, Dec 10 '13 at 23:43
I'd like to help but don't get it. What's actually not working? Is it just me, or does this question not make sense. You wrote "The problems I'm having are:" and then listed three things that you want to happen. Can you explain further? — TheCarver, Dec 10 '13 at 23:52
Those technically were the problems, but I mixed it up sort of, the form wasn't submitting with e.preventDefault() from ajax, the div wasn't fading in, just popping in, and I couldn't retrieve the post variables. It's resolved now though, thanks :P — user2943677, Dec 11 '13 at 00:05

score 2 · Accepted Answer · answered Dec 10 '13 at 23:45

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');
    }
});

answered Dec 10 '13 at 23:45

Hardy

5,590
2
18
27

This isn't exactly what I expected, but it's better than nothing. Thank you. – user2943677 Dec 10 '13 at 23:50
1

Ok, as a tip: if you can't find answer to whole question split that question to functionality parts and search answer for every needed part individually. – Hardy Dec 10 '13 at 23:54

score 1 · Answer 2 · answered Dec 10 '13 at 23:47

First of all, this code is a messy, organize it, try to put all that you can at the top of your file.
You need to have a form to submit data via POST in AJAX.

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

It's actually due to the CSS I have which is why it's necessary to do it the way I have it, however, I can include in the top but I found that rather unnecessary. Thanks for the tips. — user2943677, Dec 10 '13 at 23:50
Okay, you can maintain in your way, but check for the entire code, it does all that you want. In that way is necessary for readability. When you work for large companies, or large projects, such as Facebook.. you just can't put PHP code where you want, it's hard to understand mixed with HTML. — Wagner Leonardi, Dec 10 '13 at 23:51

Fade a div in on form submit

2 Answers2