user3041439 user3041439 - 3 months ago 13
Ajax Question

Sending selected value of Drop Down List back to a Controller Action using jQuery Ajax MVC4

I am trying to send back the value of a selected item in Drop Down List back to an Action method in my controller using jQuery Ajax in an MVC4 web application. I have a Drop Down List called MeditechDropDown and here is my jQuery function that is not quite working. I manage to reach my Action method but the value coming in is null.

jQuery(document).ready(function () {
$("#MeditechDropDown").change(function () {
$.ajax({
url: "/Home/PopulateEmailAddressUI",
data: JSON.stringify('id=' + $(this).val()), // Send value of the drop down change of option
type: 'POST',
contentType: 'application/json; charset=utf-8',
success: function (data) {
// Variable data contains the data you get from the action method
}
});
});
});


The action name is PopulateEmailAddressUI. Will someone kindly shed some light on what I am doing wrong? I know I am not writing my jQuery function correctly. Many thanks.

Answer

Here is the full WORKING jQuery script:

jQuery(document).ready(function () {
    $("#MeditechDropDown").change(function () {
        var id = $(this).find(":selected").val()
        var clientID = { "clientID" : id }
        console.log(id)
        $.ajax({
            url: "/Home/PopulateEmailAddressUI",
            data: JSON.stringify(clientID),
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                // Variable data contains the data you get from the action method
            }
        });
    });
});

Thank you everyone and especially thank you zgood :)

Comments