javascript string value to variable

Question

So i got a funny question. Although i already found a solution, i would like to know what you think about it.

Details: I got a javascript frontendscript for scanning some IDs. To make it a bit more user friendly the script saves all scanned IDs and stored it in an array. After the user scanned the ID, it will be shown in a div and also put in a hidden input for further submit action. This looks like this:

<div id="scan_output">
    <div class="alert alert-success" style="">
        <button class="close single-scan-output-close" data-dismiss="alert">×</button>
        <div>ID #66666</div>
        <input type="hidden" value="herp;66666;derp" name="data[Stock][0]">
    </div>
    <div class="alert alert-success" style="">
        <button class="close single-scan-output-close" data-dismiss="alert">×</button>
        <div>ID #987654</div>
        <input type="hidden" value="blub;987654;foo" name="data[Stock][1]">
    </div>
    <div class="alert alert-success" style="">
        <button class="close single-scan-output-close" data-dismiss="alert">×</button>
        <div>ID #123456</div>
        <input type="hidden" value="foo;123456;bar" name="data[Stock][2]">
    </div>
</div>

As you see there is some different value in the input, because this format with more information must be uploaded to the backend. I just added some dummy data.

The name attribute stores the index in the second dimension, also handy in the backend because you get an array. This index is also the index for the javascript array, where the IDs are stored to do a unique check, so the user get informed if he scans an ID twice.

So if the user accidentally scans something wrong, he is able to delete it with a click on the "x" button.

My first attempt looked as followed. After the "close" event was triggered i caught the current element which was closed with:

var $inputElement = $this.parent().find('input[type=hidden]');
var sNameAttribute= $inputElement.attr('name');

The name attribute is now stored in "sNameAttribute" as a simple string which looked like this: "data[Stock][1]" or "data[Stock][2]" of course depends on which element he clicked on.

I didn't figure out how to get the index from this string value. I didn't want to use the workarounds like "split" or regex-filter.

To finish the task i just added some data-attribute to the input, where the index is stored as a plain variable just like:

<input type="hidden" value="blub;987654;foo" name="data[Stock][1]">

My question is, how would you solve this problem or how would you get the index from the string value "data[Stock][1]" which is stored in the name attribute. I tried some eval() functions but didn't get a usefull result.

Answer 1

if it's about getting the index of which div/button the event took place at, binding an onclick event at page load and fetching the index won't be fine?

$('.single-scan-output-close').click(function (event) {
    alert($(this).index());
});