无法将所选 Div 的值放入隐藏的输入中

Question

I'm stuck on getting a path value from a set of selectable div's. Its part of a project of converting classic ASP to dot net. There are other posts on this subject, but didn't see one that matches my situation.

This is the HTML code that is presented for the users selection. It is a list of available folders.

<b>Select the destination:</b>
<div id="destinationSelector">  <div style="padding-left:45px;"     value="C:\ANOTHER FOLDER WITH FILES\SUBFOLDER\SUBSUBFOLDER">
<img src="../graphics/icons/closedfolder.gif" />&nbsp;SUBSUBFOLDER</div>

<div style="padding-left:30px;" value="C:\ANOTHER FOLDER WITH FILES\SUBFOLDER">
<img src="../graphics/icons/closedfolder.gif" />&nbsp;SUBFOLDER</div>

<div style="padding-left:15px;" value="C:\ANOTHER FOLDER WITH FILES">
<img src="../graphics/icons/closedfolder.gif" />&nbsp;ANOTHER FOLDER WITH     FILES</div>

<div style="padding-left:15px;" value="C:\Test Folder">
<img src="../graphics/icons/closedfolder.gif" />&nbsp;Test Folder</div>

<div style="padding-left:30px;" value="C:\TEST FOLDER WITH FILES\SUBFOLDER">
<img src="../graphics/icons/closedfolder.gif" />&nbsp;SUBFOLDER</div>

<div style="padding-left:15px;" value="C:\TEST FOLDER WITH FILES">
<img src="../graphics/icons/closedfolder.gif" />&nbsp;TEST FOLDER WITH     FILES</div>

<div style="padding-left:15px;" value="C:\TEST MOVE FOLDER">
<img src="../graphics/icons/closedfolder.gif" />&nbsp;TEST MOVE FOLDER</div>

</div>
<input name="moveto" id="moveto" type="hidden" />

Javasript is supposed to pickup on the path selection, change the backgrond color, and transfer the div value to the hidden input value, moveto. I can then pickup that value in the code behind.

I added a couple of window.alerts to the javascript to troubleshoot. I varified that the javascript triggers when a div is selected. However, the value is always null. Here is the code:

$(document).ready(function () {

            $("#destinationSelector>div").live("click", function () {
                window.alert("You Clicked the Path Selection for Move");
                $(this).siblings().css('background-color', '#fff');
                $(this).css('background-color', '#ccc');
                $("#moveto").val($(this).val());
                window.alert($(this).val());
            });
          });

Thank you in advance for your help !

After looking at the helpful responses, I recoded using data-value in the HTML and the following Javascript:

        $("#destinationSelector").live("click", function () {
            window.alert("You Clicked the Path Selection for Move");
            $(this).siblings().css('background-color', '#fff');
            $(this).css('background-color', '#ccc');
            window.alert($(this).data('value'));
            $("#moveto").val($(this).data("value"));
        });

Also tried:

window.alert($(this).attr("value"));

The Window.alert comes back as undefined.

Any ideas?

Answer 1

value is not a valid attribute for the <div> element - and therefore jQuery has no ability to return it via .val() .

Instead I would suggest you use data-value="..." and then use .data("value") instead

 $(function(){ $("div").click(function() { console.log($(this).data("value")); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="padding-left:30px;" data-value="C:\ANOTHER FOLDER WITH FILES\SUBFOLDER"> <img src="../graphics/icons/closedfolder.gif" />&nbsp;SUBFOLDER</div>

---

As stated by @melancia in their comment, if you can't update the HTML, you can use .attr("value") instead of .val() .

However, data-value is valid under W3C checking, and value isn't, so I'd go with the above example if possible.

 $(function(){ $("div").click(function() { console.log($(this).attr("value")); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="padding-left:30px;" value="C:\ANOTHER FOLDER WITH FILES\SUBFOLDER"> <img src="../graphics/icons/closedfolder.gif" />&nbsp;SUBFOLDER</div>

Answer 2

Divs don't have val , I would recommend changing value in your div to data-value

Then using this to get that string:

$("#moveto").val($(this).data("value"));

or you can try this without changing the div

$("#moveto").val($(this).attr("value"));

Answer 3

as noted divs don't have values. you need to use the data- attribute.

 $(document).ready(function () { $("#destinationSelector>div").live("click", function () { window.alert("You Clicked the Path Selection for Move"); $(this).siblings().css('background-color', '#fff'); $(this).css('background-color', '#ccc'); $("#moveto").val($(this).attr('data-value')); window.alert($(this).attr('data-value')); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <b>Select the destination:</b> <div id="destinationSelector"> <div style="padding-left:45px;" data-value="C:\ANOTHER FOLDER WITH FILES\SUBFOLDER\SUBSUBFOLDER"> <img src="../graphics/icons/closedfolder.gif" />&nbsp;SUBSUBFOLDER </div> <div style="padding-left:30px;" data-value="C:\ANOTHER FOLDER WITH FILES\SUBFOLDER"> <img src="../graphics/icons/closedfolder.gif" />&nbsp;SUBFOLDER </div> <div style="padding-left:15px;" data-value="C:\ANOTHER FOLDER WITH FILES"> <img src="../graphics/icons/closedfolder.gif" />&nbsp;ANOTHER FOLDER WITH FILES </div> <div style="padding-left:15px;" data-value="C:\Test Folder"> <img src="../graphics/icons/closedfolder.gif" />&nbsp;Test Folder </div> <div style="padding-left:30px;" data-value="C:\TEST FOLDER WITH FILES\SUBFOLDER"> <img src="../graphics/icons/closedfolder.gif" />&nbsp;SUBFOLDER </div> <div style="padding-left:15px;" data-value="C:\TEST FOLDER WITH FILES"> <img src="../graphics/icons/closedfolder.gif" />&nbsp;TEST FOLDER WITH FILES </div> <div style="padding-left:15px;" data-value="C:\TEST MOVE FOLDER"> <img src="../graphics/icons/closedfolder.gif" />&nbsp;TEST MOVE FOLDER </div> </div> <input name="moveto" id="moveto" type="hidden" />