在不使用经典的 html 表单的情况下，在 web 应用程序中存储隐藏值的最佳做法是什么？

Question

I hope that this question is not useless, but seriously. it is a problem for me .

when I want to build a user interface in a web application to (add, delete,edit ) something I use HTML forms + hidden inputs to store some values such as "user id" to be deleted,edited..

I want to build the same interface using just " anchors + span + div " insteand of " hidden inputs ". when I write the javascript code that handles "onAdd,onDelete and onEdit" events I need to know what will be deleted? what is the id that will be kicked out from my database ?

The question is, how to store this ID in my html tags without using hidden inputs?

what I'm using is something like this:

<div id="userid_133421" >
    <span>Name</span>
    <a id="onDelete">Delete</a>
    <a id="onEdit">Edit</a>
</div>

$("#onDelete").click(function({

        user_id = $(this).parent().attr('id').substring($(this).attr('id').indexOf('_')+1);

        $.post('index.php?component=user&action=remove&user_id=' + user_id, function(data){

        });
    }));

I checked some websites such as Dropbox , and I found that they don't use this technique to store values (such as file id), and even more they don't use classic hidden inputs to do that!

I just want to know how do you manage your code to choose the best way? :(

Answer 1

If you are using JQuery, why not use the data() function to store information?

Answer 2

I second @nfecher. That's how I am doing it right now in an application that I'm working on: We store the ids in the data-myAppName-itemTypeId. The myAppName is creating a pseudo namespace to avoid collisions with other plugins that may use the same data-* attributes. eg, data-stackoverflow-commentId="4" No need for hidden inputs at all!! You can follow the same style for all elements. If it's a generic delete functionality, you could look up the parent class name and decided which data-* attribute you want to fetch!