PHP and Ajax posting

Question

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.

Rafał Nowosielski · Accepted Answer · 2015-05-07T10:56:12.597

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>

Just like to ask you one thing. How to stop the form from reloading the page when enter? i tried preventDefault() didn't seems to work out — maxlk, May 07 '15 at 14:37
Does this answer your question: http://stackoverflow.com/questions/895171/prevent-users-from-submitting-form-by-hitting-enter — Rafał Nowosielski, May 07 '15 at 14:56
i dont wont to stop the key enter. I just dont want it to refresh the page when pressing enter key — maxlk, May 07 '15 at 16:00

PHP and Ajax posting

1 Answers1