How to submit form without reloading?

Question

Possible Duplicate:
Submit form without page reloading

Hi I need to submit a form without reloading, how can I do this with javascript or frames?

Thanks

1) Ajax. 2) Add `iframe` with name `frameName` and set `target="frameName"` attribute to form. — VisioN, May 12 '12 at 17:45
You can use the following jquery plugin: https://github.com/jinujd/jQuery-Async-Form — Jinu Joseph Daniel, Aug 20 '15 at 20:55

score 4 · Accepted Answer · answered May 12 '12 at 17:45

4

You can do this using jQuery: http://jquery.com/

Its a javascript framework and one of the methods you can use to do this kind of thing is:

$('#formID').submit(function(){

    var ajaxURL = '/ajax/saveAccountSettings.php';

    $.ajax({
        type: 'POST',
        url: ajaxURL,
        data: { 
            username: $('#accountForm #username').val()
        },
        success: function(data){

                        //Do something

        }
    });

    return false;

});

Probably worth reading up how to use jquery first though...

answered May 12 '12 at 17:45

André Figueira

6,048
14
48
62

1

Thanks! Is it hard to learn though? kind of new to web stuff... – John Redcorn May 12 '12 at 17:50
Hey, No it's actually pretty easy once you get the hang of the concept, jquery is pretty epic, can do a lot more than just this. Just read through the documentation and you'll get the jist of what you can do with it – André Figueira May 12 '12 at 17:52

score 0 · Answer 2 · answered May 12 '12 at 17:48

0

I'd recommend JavaScript over trying to do anything with iframes. What you are looking for is XHRRequest, Simplest solution would be to use JQuery. I was going write up a quick example, but this tutorial seems to cover the steps pretty good.

answered May 12 '12 at 17:48

Tyler Egeto

5,505
3
21
29

Thanks will definetly check it out! – John Redcorn May 12 '12 at 17:49

score 0 · Answer 3 · answered May 12 '12 at 17:49

You could use jQuery and the jQuery Form Plugin.

jQuery Form Plugin's ajaxForm function enables you to "hijack" a form in your HTML. Consider this example:

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 

    <script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() { 
                alert("Thank you for your comment!"); 
            }); 
        }); 
    </script> 
</head>
<body>
    <form id="myForm" action="comment.php" method="post"> 
    Name: <input type="text" name="name" /> 
    Comment: <textarea name="comment"></textarea> 
    <input type="submit" value="Submit Comment" /> 
</form>
</body>
</html>

See the plugin's website for more info. It supports various callback functions for error handling etc.

How to submit form without reloading?

3 Answers3