ansaurus

Question

What is the jQuery ajax equivalent to this html-form submit?

Answer 1

+2 A:

Are you POSTing on the same domain? Ajax doesn't work cross-domain.

Luca Matteis 2010-01-26 21:24:16

damn, that was actually the problem. If I execute both over localhost instead of just opening the html "as file", everything works fine :-)

Mark Hamilton 2010-01-26 21:31:50

Answer 2

+2 A:

You just need to create a json object to send through

function postData (data) {
    $.ajax({
        type: "POST",
        url: "http://.../file.php",
        data: { data: data },
        success: function(msg){
            alert( "Data Saved: " + msg );
        }
    });
};

postData("xyz");

Or if you wanted to make this more generic you can do

function postData (data) {
    $.ajax({
        type: "POST",
        url: "http://.../file.php",
        data: data,
        success: function(msg){
            alert( "Data Saved: " + msg );
        }
    });
};

postData({input1: "x", input2: "y", input3: "z" });

The last one allows you to be more flexible and not have to constantly rewrite the inputs to the AJAX.

Nick Berardi 2010-01-26 21:24:50

Answer 3

A:

data must be a set of key/value pairs for the post request to be successful. You can not specify an arbitrary javascript object, nor can you simply paste in the html from your form as a string. If d is anything other than a key/value pair set, your request will error.

Here's an example of a valid data object:

var d = {foo:'bar',fizz:'buzz'};

Mike 2010-01-26 21:26:34

Answer 4

A:

jQuery Form Plugin will help make your code DRY.

<html> 
<head> 
    <script type="text/javascript" src="jquery-1.3.2.js"></script> 
    <script type="text/javascript" src="jquery.form.js"></script> 

    <script type="text/javascript"> 
        // 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>

More options available at their website.

St.Woland 2010-01-26 21:29:39

ansaurus

tags:

views:

answers:

What is the jQuery ajax equivalent to this html-form submit?

related questions