on click save data of drop down list using Java Script , Jquery or Ajax

Question

I have a drop down list. I am trying to save data of that drop down list on click event without using a button. I have tried some code but it is not working please help. Here is the view of my drop downlist

    @model MyYello.Admin.Models.FeedBack
@{
ViewBag.Title = "Feed Back";
 }



  @*@using (Ajax.BeginForm("SelectFeedBack", "Admin", new AjaxOptions { HttpMethod = "POST", UpdateTargetId =     "mainContent" }, new { @id = "formId" }))
 *@

 <form method="post" id="formId" action="@Url.Action("SelectFeedBack","Admin")">
@Html.ValidationSummary(true);
<fieldset>

    @Html.HiddenFor(item => item.FeedBackId)
    <legend>Create Notes</legend>
    <div class="editor-label">
        @Html.LabelFor(item => item.FeedBackDrpDown, "Select feed Back")

    </div>

    @Html.DropDownList("FeedBack")


    <input type="hidden" id="isNewNote" name="isNewNote" value="false" />

   @*        <p>
        <input type="Submit" value="Save" id="Save" />
    </p>*@
    @*  @Url.Action("CreateNote", "Admin")*@
</fieldset>

 </form>
<script type="text/javascript">

$(function () {
    $("#FeedBack").change(function () {


        console.log("test");
        $("#formId").submit(function () {
            console.log("test1");
            $.ajax({
                type: "POST",
                //url: urlAction,
                data: {},
                datatype: "JSON",
                contentType: "application/json; charset=utf-8",
                success: function (returndata) {
                    if (returndata.ok)
                        window.location = returndata.newurl;
                    else
                        window.alert(returndata.message);
                }


            });
        });
    });

});

Answer 1

You can adjust your onChange-Method like this:

$("#FeedBack").change(function () {
    var urlAction = "/whatever/url/"; // someURL
    // var urlAction = $("#FormId").attr("action"); // or grab the form-url?
    var postData = {
            "whateverName" : $(this).val() // selected drop-down-value
    };

    $.ajax({
        type: "POST",
        url: urlAction,
        data: postData, // send postData-Object
        dataType: "JSON",
        contentType: "application/json; charset=utf-8",
        success: function (returndata) {
            // make shure that the attributes ok,newurl and message are available - otherwise this throws an error and your script breaks
            if (typeof returndata.ok !== "undefined" && typeof returndata.newurl !== "undefined" && returndata.ok)
                window.location.href = returndata.newurl;
            else
                window.alert(returndata.message);
        }
    });
});

this is how you just submit the select-field-value to whatever URL. Do you wish to submit the whole form when the dropdown changes?