JQuery dialog - accessing partial form values

Hi I load a JQuery dialog box that contains a form with (at present) one input field.

I'm using a MVC 3 and the JsonValueProviderFactory to support passing JSON to my action method. But I can't get access to my form fields, because the dialog is loading a partial.

Does anyone know the JQuery for accessing a forms fields loaded in to a dialog. Dialog code is :

$('#Test').dialog({
        bgiFrame: true,
        autoOpen: false,
        modal: true,
        height: 400,
        width: 500,
        title: 'Add report',
        draggable: true,
        postion: 'center',
        buttons: {
            "save": function () {

                $.ajax({
                    url: '/Test/Save',
                    type: "Post",
                    data: JSON.stringify(data),
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function () {
                        alert("well done");
                    },
                    error: function () {
                        alert("error");
                    }
                });
            },
            "cancel": function () {
                $(this).dialog('close');
            }
        }
    });

As you can see I use JSON.stringify(data) but haven't defined data as I need to construct a type from the form values. Incidentally, it works when I do as the data variable is representative of the type received by my action method, however I want to construct it from form fields

$('#Test').dialog({
        bgiFrame: true,
        autoOpen: false,
        modal: true,
        height: 400,
        width: 500,
        title: 'Add report',
        draggable: true,
        postion: 'center',
        buttons: {
            "save": function () {

                var data = { Name: "Blah" }; 

                $.ajax({
  开发者_运维百科                  url: '/Test/Save',
                    type: "Post",
                    data: JSON.stringify(test),
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function () {
                        alert("well done");
                    },
                    error: function () {
                        alert("error");
                    }
                });
            },
            "cancel": function () {
                $(this).dialog('close');
            }
        }
    });    

Any help anyone can provide would be gratefully appreciated.

---

ok, how about doing it on the DOM, without ever displaying the form, e.g:

var clone =  $('form .partial').clone().wrap('<form />').parent();    
var data = clone.serialize();
clone.remove();//remove the clone from the dom, dispose of it as soon as we gathered the data.
//this will stop any ID duplication as @redsquare pointed out.

$.ajax({ 
   url: '[url]',
   'data':data,
   //...success,error, type, etc ... 
})

---

I suggest you create a form tag in the partial which you load into the dialog. You can then use the jquery serialize method to create the post values to send to your action method.

e.g

var data = $('#formId').serialize();