jquery.ajax

Hello,

I’m having an issue with an ajax contactform. I created a simplified testform. This is the html:

<form action="" id="ajax-form" method="post">
    <input type="text" name="name" id="name" value="">
    <input type="submit" value="send" />
</form>
<div id="ajaxoutput"></div>

The php:

function MyAjaxFunction(){
	//get the data from ajax() call
	$name = $_POST['name'];
	echo "This is the name: " . $name";
	die();
}
// creating Ajax call for WordPress
add_action( 'wp_ajax_MyAjaxFunction', 'MyAjaxFunction' );
add_action( 'wp_ajax_nopriv_MyAjaxFunction', 'MyAjaxFunction' );

And the js:

jQuery('#ajax-form').submit(ajaxSubmit);

function ajaxSubmit(){		

    var formData = $(this).serialize();
    jQuery.ajax({
        type:		'POST',
        url: 		'http://www.mywebsite.com/wordpress/wp-admin/admin-ajax.php',
        data: 		{
            'action': 		'MyAjaxFunction',
            'formData': 	'formData',
        },
        success:	function(data){
                        jQuery("#ajaxoutput").html(data);
        }
    });
    return false;
}

The problem lies in the js/jquery and more specifically the data setting. I want to pass 2 items: the action (= the php function to be executed) and the actual form data. the first part, the action works but the second part, the form data which I serialised into the formData var doesn’t seem to work or get passed.

These code, as is, calls the function but doesn’t send the form data. The ajaxout div looks like this after the ajax call:
<div id="ajaxoutput">This is the name: 0</div>

How do I solve this? I know I’m close but I just don’t get it.

On a sidenote: I was able to make this thing work by:
1. adding a line to the html form:
<input type="hidden" name="action" value="MyAjaxFunction"/>
2. remove the above data setting and replacing it with:
data: formData,
But, I want to make it work with the action and data setting in js.