[SOLVED] PHP and Ajax posting

PHP and Ajax posting

I'm using jQuery form plugin to send ajax requests. Which you can find on below url

http://malsup.com/jquery/form/

This is my jQuery code

$(document).ready(function()
{
    $('#SubmitForm').on('submit', function(e)
    {
        e.preventDefault();
        $('#submitButton').attr('disabled', ''); 

        $(this).ajaxSubmit({
        target: '#output',
        success:  afterSuccess //call function after success
        });
    });
});

function afterSuccess()
{   

    $('#submitButton').removeAttr('disabled'); //enable submit button

}

This code is displaying out put on the div id output and each time i submitted code will remove the old out put and display the new one. What i want to do is, keep the old out and display the new out put on top of the old output. Can someone tell me how to do this.

Solution

What you could do, is alter your afterSuccess method a little bit. What I did was:

function afterSuccess(text)
{  
    $('#output').prepend(text)
    $('#submitButton').prop('disabled', false);
}

The whole fiddle is available here

The whole code of javascript:

function afterSuccess(text)
{  
    $('#output').prepend(text)
    $('#submitButton').prop('disabled', false);
}

$(document).ready(function()
{
    $('#submitButton').click(function(e)
    {
        $('#submitButton').prop('disabled', true);
        $('#SubmitForm').ajaxSubmit({
            data: {
                html: "<p>Text echoed back to request</p>",
                delay: 1
            },
            success:  afterSuccess,
            url: '/echo/html/'
        });
    });
});

and of course assuming following html structure

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script> 

<body>
    <form id="SubmitForm" method="POST">
        <input type="button" id="submitButton" value="submit"/>
    </form>     
    <div id="output">
        test
    </div>
</body>