Submit form without page refresh



In this post, I'm going to tell you how to submit a form without page refresh using jQuery Ajax. jQuery is a javascript framework and Ajax (Asynchronous Javascript and XML) is a way of sending information between browser and server without refreshing page.




<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    $("#form").submit(function() {
        var data = $(this).serialize();
        $.ajax({
            type: "POST",
            url: "ajax.php",
            data: data,
            success: function(){
                $('#success').fadeIn().show();
            }
        });
        return false;
    });
});
</script>


<span id="success" style="display: none;">Form submit success.</span>
<form action="" id="form" method="post" name="form">
<input name="name" type="text" />
    <input name="address" type="text" />
    <input id="submit" type="submit" value="Submit" />
</form>

Comments