capture data from FORM using jquery/ajax/json

Posted by nisardotnet on Stack Overflow See other posts from Stack Overflow or by nisardotnet
Published on 2010-04-10T03:17:33Z Indexed on 2010/04/10 3:23 UTC
Read the original article Hit count: 402

Filed under:
|

i have few textbox on the form and when the user submit i want to capture the data and insert into db

here is what my code looks like

beforeSubmit: function(data) { // called just before the form is submitted

                   var item = $("[id$='item']");
                    var category = $("[id$='category']");
                    var record = $("[id$='record']");



                    var json = "{'ItemName':'" + escape(item.val()) + "','CategoryID':'" + category.val() + "','RecordID':'" + record.val() + "'}";
                    var ajaxPage = "DataProcessor.aspx?Save=1"; //this page is where data is to be retrieved and processed
                    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 is the Data sent to the server: if i uncomment this line: // $("#data").html("Data sent to the server :
" + $.param(data));

_VIEWSTATE=%2FwEPDwULLTE4ODM1ODM4NDFkZOFEQfA7cHuTisEwOQmIaj1nYR23&_EVENTVALIDATION=%2FwEWDwLuksaHBgLniKOABAKV8o75BgLlosbxAgKUjpHvCALf9YLVCgLCtfnhAQKyqcC9BQL357nNAQLW9%2FeuDQKvpuq2CALyveCRDwKgoPWXDAKhwImNCwKiwImNC1%2Fq%2BmUXqcSuJ0z0F%2FQXKM3pH070&firstname=Nisar&surname=Khan&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

DataProcessor.aspx.cs:

public partial class DataProcessor : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) ProcessAjaxRequest(); }

    private void ProcessAjaxRequest()
    {
        if (Request.ContentType.Contains("json") && Request.QueryString["Save"] != null)
            SaveMyData(); 
    }


    private void SaveMyData()
    { 
        //data passed in as JSON format
        System.IO.StreamReader sr = new System.IO.StreamReader(Request.InputStream);
        string line = ""; 

        line = sr.ReadToEnd(); 

        //This is all you need to parse JSON string into an JObject. 
        //Require namespace Newtonsoft.Json.Linq;
        JObject jo = JObject.Parse(line);

        Console.WriteLine((string)jo["RecordID"]);
        Console.WriteLine(Server.UrlDecode((string)jo["ItemName"])); //use Server.UrlDecode to reverse the text that was escaped before it was passed in to its original state


        Response.Write((string)jo["CategoryID"]); //this send to responseText of .ajax(options).responseText 
    }  
}

the above code is not working and i need a way to capture the values before i insert into db.

any help?

Thanks.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-ajax