jQuery Click Event CheckBox Changed Ajax Call

Question

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!

Answer 1

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.net/vLzwuwdo/

Answer 2

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"
            });
            //}
        }));

Answer 3

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.