JQuery post function problem

Question

Hi!

I try to post some data via json objects to my asp.net mvc view, here is the code

$("#submitButton").click(function () {
               var name = $("#name")[0].valueOf();
               var price = $("#price").valueOf();
               var url = $("#url").valueOf();

               var product = { Name: name, Price: price, Url: url };
                   $.post("/Home/NewProduct", product, function (json) { $('ul.items').append("<li><img src=" + url + "/></li>"); },"json");

           });

and now, the result is an error:

uncaught exception: [Exception... "Illegal operation on WrappedNative prototype object" nsresult: "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)" location: "JS frame :: http://localhost:1804/Scripts/jquery-1.4.2.min.js :: f :: line 132" data: no]

I try JQuery 1.4.1 and 1.4.2, If I try this code the error is the same

$.ajax({
     type: "POST",
     url: "/Home/NewProduct",
     dataType: "json",
     data: { Name: name, Price: price, Url: url },
     success: function () { $('ul.items').append("<li><img src=" + url + "/></li>"); }
               });

What I'm doing wrong? Please help! Thanks!

Answer 1

To get the value of an input type element, use .val() instead of .valueOf(), like this:

var name = $("#name").val(),
    price = $("#price").val(),
    url = $("#url").val();

When you call .valueOf() on a jQuery object, it gets an array of DOM elements...and that doesn't serialize well :)

Answer 2

In your $.post call if you pass JSON as a 4th parameter then jQuery will expect VALID json string only other wise it might cause error.

example of valid JSON is

var json = {"a":"my name", "b":"my school"};