Use data value of li as form input using hidden input field

Question

I have an html which has a some list which is arranged in drop down style.If the data-selected is true,I want to assign that corresponding data value to an hidden input field

<div id="mySelect" class="select btn-group m-b" data-resize="auto">
    <button style="font-weight:700;background-color:#fff;border-style:solid;
    border-width:2px" type="button" id="expiry_month" name="expiry_month" data-toggle="dropdown" class="btn btn-white btn-sm dropdown-toggle"> <span class="dropdown-label"></span>  <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li data-value="00" data-selected="true"><a href="#">Select Month</a>
        </li>
        <li data-value="01"><a href="#">01</a>
        </li>
        <li data-value="02"><a href="#">02</a>
        </li>
        <li data-value="03"><a href="#">03</a>
        </li>
        <li data-value="04"><a href="#">04</a>
        </li>
        <li data-value="05"><a href="#">05</a>
        </li>
        <li data-value="06"><a href="#">06</a>
        </li>
        <li data-value="07"><a href="#">07</a>
        </li>
        <li data-value="08"><a href="#">08</a>
        </li>
        <li data-value="09"><a href="#">09</a>
        </li>
        <li data-value="10"><a href="#">10</a>
        </li>
        <li data-value="11"><a href="#">11</a>
        </li>
        <li data-value="12"><a href="#">12</a>
        </li>
    </ul>
</div>

Using a javascript how can I insert the value selected to an hidden input field?

<input type="hidden" id="expiry_month">

TRIED

<input type="hidden" id="hfSelectedMonth" value="0" />
<ul class="dropdown-menu">
   <li data-value="00" data-selected="true"><a class="selectOption" href="#" data-value="0">Select Month</a>
   </li>
   <li data-value="01"><a class="selectOption" href="#" data-value="1">01</a>
   </li>
   <li data-value="02"><a class="selectOption" href="#" data-value="2">02</a>
   </li>
</ul>
<script type="text/javascript">

$(".selectOption").click(function () {
    var selectedOption = parseInt($(this).attr('data-value'), 10);
    $("#hfSelectedMonth").val(selectedOption.toString());
});
</script>

But doesnt work :(

Answer 1

var $expiryMonth = $("#expiry_month");    

$(".dropdown-menu li").on('click', function () {
        $expiryMonth.val($(this).data('value'));
});

Answer 2

You had two elements with same id "expiry_month"

1. button
2. hidden element

Thats' why hidden element is not assigned the value. Change the id for hidden element to " expiry_month_hid "

Try following :

$(".dropdown-menu li").click(function () {
    var selectedOption = parseInt($(this).attr('data-value'), 10);

    $("#expiry_month_hid").val(selectedOption.toString());
    console.log( $("#expiry_month_hid").val());
});

Here is the working demo : http://jsfiddle.net/w2fqz/2/

Answer 3

If I were you, I'd create a javascript function change_month and call it everytime one of the links is clicked. It's simpler this way:

<li><a href="javascript:change_month('01')">01</a>
<li><a href="javascript:change_month('02')">02</a>
<li><a href="javascript:change_month('03')">03</a>
<li><a href="javascript:change_month('04')">04</a>
... 

And this would be the function change_month :

function change_month(month){
    $("#expiry_month").val(month);
}

Answer 4

You don't have to use links to do this, just bind the event to a div that should be clickable. Take a look at this fiddle: http://jsfiddle.net/YUY69/

The output field isn't hidden for demonstration purposes, so change it to

<div id='output' hidden></div>

When you want to use it. If you want an input field for form submission the script should set the value by:

$("#output").val(theValue);

into:

<input type="hidden" id="output"/>