CODEWITHSUNDEEP
c#jqueryasp.net-mvc
Drey
Drey

Reputation: 29

Call ActionResult when a checkbox is checked

I am trying to call an ActionResult when a checkbox is checked, but i do not know why it's not working Here is my code below .

--Checkbox

<td>
<input type="checkbox" [email protected]  />
</td>

--Modal

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body" id="ModalBody">

            </div>

        </div>
    </div>
</div>


    $('input[type="checkbox"]').on('change', function (e)
    {

        if (e.target.checked)
        {
            var id = $(this).attr('id');

            var url = "Employee/ShowPopUpDelete?id=" + id;
            $("#ModalBody").load(url,function()
            {
                $("#myModal").modal("show");
            })
        }


   });
</script>

--Controller

public ActionResult ShowPopUpDelete(int id)
    {
        Employee temp = new Employee();
        temp = EM.FindById(id);

        ViewBag.Msg = "Are you sure?";


        return PartialView("Delete",temp);
    }

The FindById returns the Employee object that has the given Id. When i Debug it just ignores my ShowPopUpDelete ActionResult . I would appreciate to know what am i doing wrong.

Upvotes: 1

Views: 711

Answers (3)

Divyesh Jani
Divyesh Jani

Reputation: 311

You may miss ready function 

<script>
    $(document).ready(function () {
        $('input[type="checkbox"]').click(function () {
            if ($(this).prop("checked") == true) {
                var id = $(this).attr('id');
                var url = "Employee/ShowPopUpDelete?id=" + id;
                $("#ModalBody").load(url, function () {
                    $("#myModal").modal("show");
                })
            }
        });
    }); 
</script>

For more Refer below Link

https://www.tutorialrepublic.com/faq/how-to-check-a-checkbox-is-checked-or-not-using-jquery.php

Upvotes: 0

Jongkwan Park
Jongkwan Park

Reputation: 88

Try this:

Checkbox

<td>
    <input type="checkbox" id="1234" />
</td>

Script

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

    if (this.checked)
    {
        var id = parseInt($(this).attr('id'));

        var url = "@Url.Action("ActionName", "ControllerName")" + "?id=" + id;
        $("#modelbody").load(url,function()
        {
            $("#myModal").modal("show");
        })
    }
});

Upvotes: 2

user8107351
user8107351

Reputation: 437

Can you try it this way?

<input type="checkbox" onchange="handleModal(event)">

Then 

function handleModal(e) {
     if (e.target.checked)
    {
        var id = $(this).attr('id');

        var url = "Employee/ShowPopUpDelete?id=" + id;
        $("#ModalBody").load(url,function()
        {
            $("#myModal").modal("show");
        })
    }
}

Upvotes: 0

Related Questions