onclick() doesn't trigger my function

Question

I want to modify my table data using ajax but onclick() event doesn't trigger anything. here is the code. ( onclick() event is written in the last div tag)

@{
    ViewBag.Title = "Edit_Room";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}
<script src="~/Content/Scripts/jquery-3.1.1.js"></script>
<script src="~/Content/Scripts/edtiRoom.js"></script>

<h2>Edit_Room</h2>
<div>

    <div class="panel panel-default container">

        <div class="panel-body">
            <h2>Please enter required information</h2>
                <div class="col-num2">
                    <div>
                        <h3>Room Number</h3>
                        <select name="roomid" id="roomid">
                            @foreach (var item in Model)
                            {
                                <option value="@item.Id">@item.Id</option>
                            }
                        </select>
                    </div>
                    <div>
                        <h3>Room Type</h3>
                        <input type="text" id="roomtype" name="type" pattern="[a-zA-Z]+" />
                    </div>
                    <div>
                        <h3>Price</h3>
                        <input type="tel" id="price" name="price" pattern="^[0-9]*$" />
                    </div>
                    <div>
                        <button type="button" onclick="editRoomFeatures()" class="btn btn-primary btn-lg">
                            Update
                        </button>
                    </div>

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

</div>

And here is the function (written in edtiRoom.js file) that I want to call on button click.

var editRoomFeatures = function() {
        var roomid = $("#roomid").find('option:selected').text();
        var roomtype = $("#roomtype").val();
        var roomprice = $("#price").val();

        $.ajax({
                url: "Admin/Edit_Room_Features/",
                type: "POST",
                data: { roomid: roomid, roomtype: roomtype, roomprice: roomprice }
            })
            .done(function() {
                alert("Success");

                //alert(temp);
                //$("#" + temp).html(partialViewResult);
            });

    };

this "editRoomFeatures" will then call this function in the "Admin" controller.

public JsonResult Edit_Room_Features(string roomid,string roomtype,string roomprice)
        {
         //do something here
        }

But when I debug my project, nothing happens on button onclick.

Update: I have been able to solve this issue on my own.

Why don't you use proper event handler instead of `onclick`? — empiric, Nov 30 '16 at 18:58
If interested: [this](http://stackoverflow.com/a/6348597/4202224) is a good answer coping with `onclick` vs `event handler` — empiric, Nov 30 '16 at 19:09

score 1 · Answer 1 · answered Nov 30 '16 at 19:02

function editRoomFeatures() {
        var roomid = $("#roomid").find('option:selected').text();
        var roomtype = $("#roomtype").val();
        var roomprice = $("#price").val();

        $.ajax({
                url: "Admin/Edit_Room_Features/",
                type: "POST",
                data: { roomid: roomid, roomtype: roomtype, roomprice: roomprice }
            })
            .done(function() {
                alert("Success");

                //alert(temp);
                //$("#" + temp).html(partialViewResult);
            });

    }

No parantheses Needed

 <button type="button" onclick="editRoomFeatures" class="btn
 btn-primary btn-lg">
                             Update
                         </button>

what about $(document).ready(function() { $('button').click(editRoomFeatures); }); — Yaman, Nov 30 '16 at 19:10

score 0 · Answer 2 · answered Dec 01 '16 at 03:50

0

Keep your function outside $(document).ready. it will work.

answered Dec 01 '16 at 03:50

Anadi

744
9
24

onclick() doesn't trigger my function

2 Answers2