Jquery AJAX how to prevent user to change the id value, and check it when function is clicked

Question

I'm confused with this. When page source has been changed from value 11 to 13 it will modify 13 value instead of 11. How can submit with the original id although the user change the page source to 13.

 $("body").on("click", ".getcheck", function () {
    var gid = $(this).parent("td").data('id');
    var ischecked = $(this).is(":checked");

        if (ischecked) {
            $.ajax({
                type: 'POST',
                url: url +'todolist/update_checklist',
                data: { gid },
            }).done(function (getdata) {
                alert("Added")
            });
        }

    if (!ischecked) {
        $.ajax({
            type: 'POST',
            url: url + 'todolist/update_checklistcancel',
            data: { gid },
        }).done(function (getdata2) {
            alert("Deleted")
        });
    }
});

It is like a user right click and inspect element and change the value to 13. Value.id which will be show in the page when loaded. And data-id: value.id will be effect in the checkbox and del button. But if a user right click inspect and change the value to 13 . It will modify table 13 item.

function manageRow(data) {
    var rows = '';
    var checkedverify= "checked";
    $.each(data, function (key, value) {
        var newchecked = value.checked;
        rows = rows + '<tr>';
        rows = rows + '<td>' + value.todo_list + '</td>';
        rows = rows + '<td data-id="' + value.id + '">';
        if (newchecked == 1)
            {
            rows = rows + '<input type="checkbox" style="width:21px;height: 21px;" class="getcheck" id="'
             + value.id + '"' + checkedverify + ' />&nbsp&nbsp';
        }
        else
        {
            rows = rows + '<input type="checkbox" style="width:21px;height: 21px;" class="getcheck" id="'
             + value.id + '" />&nbsp&nbsp';
        }
        rows = rows + '<button class="btn btn-danger delete_todo" style="margin-bottom:10px">Del</button>';
        rows = rows + '</td>';
        rows = rows + '</tr>';
         function markdone(getvalue) {
            alert(getvalue);
        }
    });

    $("tbody").html(rows);


}

Answer 1

Use "JavaScript - localStorage" functionality to save data for web-page and use it for tasks similar to this.

To save information with localStorage you need:

localStorage.setItem("id", "11"); 

This information will be stored in browser permanently until you delete it yourself:

localStorage.removeItem("id"); 

This deletes item, if you want to delete whole data:

localStorage.clear();

So, when user submits form or something, you can always retrieve original id value.

localStorage.getItem("id");