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!

Using $('#NatAm').change will attach change listener when click is triggered.. I doubt you need it like this.. — Rayon
– Rayon, Commented Mar 22, 2016 at 18:03
@RayonDabre Why do I need the change listener attached to the click event? — reakt
– reakt, Commented Mar 22, 2016 at 20:01
@ZakariaAcharki The id was unique. Am I confusing something? — reakt
– reakt, Commented Mar 22, 2016 at 20:02

Miguel · Accepted Answer · 2016-03-22 18:09:46Z

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

edited Mar 22, 2016 at 18:09

answered Mar 22, 2016 at 18:03

Miguel

20.7k5 gold badges47 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

reakt Over a year ago

I appreciate your help. Nesting the handlers wasn't the right way to do it. However, your code fires the ajax post regardless if there was a change to the check box or not.

Luis Deras · Accepted Answer · 2016-03-22 18:04:07Z

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

answered Mar 22, 2016 at 18:04

Luis Deras

1,2782 gold badges21 silver badges50 bronze badges

1 Comment

reakt Over a year ago

I did not have the selector id syntax correct, but that wasn't the major issue.

Zakaria Acharki · Accepted Answer · 2016-03-22 18:08:58Z

1

id should be unique in same document (NatAm and UpdateButton), replace the duplicate ones by global classes will solve the first problem.
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.

answered Mar 22, 2016 at 18:08

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Collectives™ on Stack Overflow

jQuery Click Event CheckBox Changed Ajax Call

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related