I have three checkboxes that who have checked/unchecked values populated from a model. I'm using an Ajax post on button click event to call controller actions for each checkbox changed event in order to update the DB.

Here is the code for one of the checkboxes (apart from the selector ID, they are all the same):

 $(document).ready(function () {

    //document.getElementById('UpdateButton').onclick = function () {
    $("UpdateButton").click = function () {
        $('#NatAm').change(function () {
            // if ($('#NatAm').is(':checked')) {
            $.ajax({
                //url: '@Url.Action("NativeUpdate", "Transactions")',
                    url: '/Transactions/NativeUpdate',
                    //data: { isNativeUp: true },

                    type: 'POST',
                    dataType: "json"
                });
                //}
            });

Edit (HTML/View Code):

 @Html.CheckBox("NatAm", (bool)@ViewBag.NativeAm)
 <input name="UpdateButton" id="UpdateButton" type="submit" value="Update" style="margin-left: 15px; margin-top: 3px;" class="btn btn-success" />

I cannot get this to work. Before adding the button, the ajax post was working fine. Thank you for your help!

I have three checkboxes that who have checked/unchecked values populated from a model. I'm using an Ajax post on button click event to call controller actions for each checkbox changed event in order to update the DB.

Here is the code for one of the checkboxes (apart from the selector ID, they are all the same):

 $(document).ready(function () {

    //document.getElementById('UpdateButton').onclick = function () {
    $("UpdateButton").click = function () {
        $('#NatAm').change(function () {
            // if ($('#NatAm').is(':checked')) {
            $.ajax({
                //url: '@Url.Action("NativeUpdate", "Transactions")',
                    url: '/Transactions/NativeUpdate',
                    //data: { isNativeUp: true },

                    type: 'POST',
                    dataType: "json"
                });
                //}
            });

Edit (HTML/View Code):

 @Html.CheckBox("NatAm", (bool)@ViewBag.NativeAm)
 <input name="UpdateButton" id="UpdateButton" type="submit" value="Update" style="margin-left: 15px; margin-top: 3px;" class="btn btn-success" />

I cannot get this to work. Before adding the button, the ajax post was working fine. Thank you for your help!

• javascript
• jquery
• ajax
• asp-mvc-5

• Using $('#NatAm').change will attach change listener when click is triggered.. I doubt you need it like this.. – Rayon Commented Mar 22, 2016 at 18:03
• Add your HTML code please. – Zakaria Acharki Commented Mar 22, 2016 at 18:10
• @ZakariaAcharki I added the html/view code – reakt Commented Mar 22, 2016 at 20:00
• @RayonDabre Why do I need the change listener attached to the click event? – reakt Commented Mar 22, 2016 at 20:01
• @ZakariaAcharki The id was unique. Am I confusing something? – reakt Commented Mar 22, 2016 at 20:02

3 Answers 3

Your click handler isn't right. You need to pass in the id of the button and use jQuery click handler. You also need not to nest the handlers:

$(document).ready(function() {
  $("#UpdateButton").click(update);
  $('#NatAm').change(update);
});

function update() {
  $.ajax({
    url: '/Transactions/NativeUpdate',
    type: 'POST',
    dataType: 'json'
  });
}

JSFiddle Demo: https://jsfiddle/vLzwuwdo/

You're telling JQuery to look for 'UpdateButton' tags which in your case does not exist. You're missing the # which indicates an ID in your button.

Try this

$(document).ready(function () {

//document.getElementById('UpdateButton').onclick = function () {
$("#UpdateButton").click(function () {
    $('#NatAm').change(function () {
        // if ($('#NatAm').is(':checked')) {
        $.ajax({
            //url: '@Url.Action("NativeUpdate", "Transactions")',
                url: '/Transactions/NativeUpdate',
                //data: { isNativeUp: true },

                type: 'POST',
                dataType: "json"
            });
            //}
        }));

1. id should be unique in same document (NatAm and UpdateButton), replace the duplicate ones by global classes will solve the first problem.

2. You should not define event inside another since every time you trigger the first it will create new event for the element, in your case every time you click new change event will be created and attached to the first element with NatAm.

Hope this helps.