How do I pass a textbox value to jQuery .ajax method?

Question

Here's my jquery method:

$.ajax({
    type: "GET",
    url: "Home/GetSocialMentionBlogs/"
    dataType: "json",
    success: function (data) {
        var obj = JSON.parse(data);
        $.each(obj.items, function (i, item) {
            $("<strong><p>" + item.title + "</strong></p>").appendTo("#blogs");
            if (i == 5) return false;
        });
    }
});

What I want to do is when a user clicks a button, callt his method, and pass in the value of a textbox so that the URL will now be:

url: Home/GetSocialMentionBlogs/value from text box

Of course I'll need to URL encode that, but as of now, I don't know how to pass in values to this .ajax function.

I'm completely new to jQuery and MVC so pardon my ignorrance ont he subject so far.

Answer 1

$.ajax({
    type: "GET",
    url: "Home/GetSocialMentionBlogs/" + $('#textBoxID').val(),
    dataType: "json",
    success: function (data) {
        var obj = JSON.parse(data);
        $.each(obj.items, function (i, item) {
            $("<strong><p>" + item.title + "</strong></p>").appendTo("#blogs");
            if (i == 5) return false;
        });
    }
});

Answer 2

Well if the input field has an "id" value you'd just do

url: "Home/GetSocialMentionBlogs/" + $('#inputFieldId').val(),

If all you've got is the name, then you could do:

url: "Home/GetSocialMentionBlogs/" + $('input[name=inputFieldName]').val(),

Is that all you need to do or am I missing some detail?

Oh and to URL encode just use the Javascript encodeURIComponent() function.