Nick Kahn
Nick Kahn

Reputation: 20078

Capture data from FORM using jQuery/Ajax/JSON

I have a few textboxes on a form and when the user submits I want to capture the data and insert it into a database.

Here is what my code looks like

// Called just before the form is submitted.
beforeSubmit: function(data)
{
    var item = $("[id$='item']");
    var category = $("[id$='category']");
    var record = $("[id$='record']");

    var json = "{'ItemName':'" + escape(item.val()) +
        "','CategoryID':'" + category.val() + "','RecordID':'" + record.val() + "'}";

    //This page is where data is to be retrieved and processed.
    var ajaxPage = "DataProcessor.aspx?Save=1";

    var options =
    {
        type: "POST",
        url: ajaxPage,
        data: json,
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        async: false,
        success: function(response)
        {
            alert("success: " + response);
        },
        error: function(msg)
        {
            alert("failed: " + msg);
        }
    };

    //Execute the Ajax call and get a response.
    var returnText = $.ajax(options).responseText;
    if (returnText == 1) {
        record.html(returnText);
        $("#divMsg").html("<font color=blue>Record saved successfully.</font>");
    }
    else
    {
        record.html(returnText);
        $("#divMsg").html("<font color=red>Record not saved successfully.</font>");
    }

    // $("#data").html("<font color=blue>Data sent to the server :</font> <br />" + $.param(data));
},

Here is what data is sent to the server: if I uncomment the following line.

 // $("#data").html("<font color=blue>Data sent to the server :</font> <br />" + $.param(data));
__VIEWSTATE=%2FwEPDwULLTE4ODM1ODM4NDFkZOFEQfA7cHuTisEwOQmIaj1nYR23&__EVENTVALIDATION=%2FwEWDwLuksaHBgLniKOABAKV8o75BgLlosbxAgKUjpHvCALf9YLVCgLCtfnhAQKyqcC9BQL357nNAQLW9%2FeuDQKvpuq2CALyveCRDwKgoPWXDAKhwImNCwKiwImN &day_fi=12&month_fi=12&year_fi=1234&lastFour_fi=777&countryPrefix_fi=1&areaCode_fi=555-555&phoneNumber_fi=5555&email_fi=nisardotnet%40gmail.com&username=nisarkhan&password=123456&retypePassword=123456

Upvotes: 1

Views: 1779

Answers (2)

LiverpoolsNumber9
LiverpoolsNumber9

Reputation: 2394

Nisardotnet - are you working in C#? You've got way too much going on here. You can cut down your code by half using web methods - also, get rid of viewstate - you don't need it (remove the form from the page)

If your working in C# let me know and I can help. Rob

****APPEND****

Ok - I built a simple "grab input values and update DB" thing - it's on my site here.

Give me a shout if you've got any questions. Rob

****APPEND****

Ok, so in your class file you could have

internal static void updateDB(String values)
{
    // do something with 'values'
}

Then in your aspx page you can call it like so...

[WebMethod]
public static void updateDB(String values)
{
    yourClass.updateDB(values);
}

That should work.

Upvotes: 1

Jeremy B.
Jeremy B.

Reputation: 9216

You should be able to pull it all out of the Request.Form.

Upvotes: 0

Related Questions