Question

I have this form with a multi-selection blocks, I am trying to get the values of each block criteria on click so I can send it a database, but every time I click a block my script is getting the value of all, any ideas?

I created a jsFiddle here: http://jsfiddle.net/creativestudio/Hqbmk/4/

<form action="" method="post" id="postingFeedback">

            <!-- .votes-list -->
            <ul class="vote-list">
                <li class="vote" name="vote1" value="A-value1">
                </li>
                <li class="vote" name="vote1" value="A-value2">
                </li>
                <li class="vote" name="vote1" value="A-value3">
                </li>
                <li class="vote" name="vote1" value="A-value4">
                </li>
                <input name="smileVote" class="is-hidden" data-role="none" value="" />
            </ul><!-- / .votes-list -->

<div class="clear"></div>

            <!-- .votes-list -->
            <ul class="vote-list">
                <li class="vote" name="vote2" value="B-value1">
                </li>
                <li class="vote" name="vote2" value="B-value2">
                </li>
                <li class="vote" name="vote2" value="B-value3">
                </li>
                <li class="vote" name="vote2" value="B-value4">
                </li>
                <input name="smileVote" class="is-hidden" data-role="none" value="" />
            </ul><!-- / .votes-list -->
            <div class="clear"></div>

<div class="clear"></div>

            <!-- .votes-list -->
            <ul class="vote-list">
                <li class="vote" name="vote3" value="C-value1">
                </li>
                <li class="vote" name="vote3" value="C-value2">
                </li>
                <li class="vote" name="vote3" value="C-value3">
                </li>
                <li class="vote" name="vote3" value="C-value4">
                </li>
                <input name="smileVote" class="is-hidden" data-role="none" value="" />
            </ul><!-- / .votes-list -->
            <div class="clear"></div>

<div class="clear"></div>

            <!-- .votes-list -->
            <ul class="vote-list">
                <li class="vote" name="vote3" value="D-value1">
                </li>
                <li class="vote" name="vote3" value="D-value2">
                </li>
                <li class="vote" name="vote3" value="D-value3">
                </li>
                <li class="vote" name="vote3" value="D-value4">
                </li>
                <input name="smileVote" class="is-hidden" data-role="none" value="" />
            </ul><!-- / .votes-list -->
            <div class="clear"></div>

<div class="clear"></div>

            <!-- .votes-list -->
            <ul class="vote-list">
                <li class="vote" name="vote4" value="D-value1">
                </li>
                <li class="vote" name="vote4" value="D-value2">
                </li>
                <li class="vote" name="vote4" value="D-value3">
                </li>
                <li class="vote" name="vote4" value="D-value4">
                </li>
                <input name="smileVote" class="is-hidden" data-role="none" value="" />
            </ul><!-- / .votes-list -->
            <div class="clear"></div>

<div class="clear"></div>

            <!-- .votes-list -->
            <ul class="vote-list">
                   <li class="vote" name="vote5" value="E-value1">
                </li>
                <li class="vote" name="vote5" value="E-value2">
                </li>
                <li class="vote" name="vote5" value="E-value3">
                </li>
                <li class="vote" name="vote5" value="E-value4">
                </li>
                <input name="smileVote" class="is-hidden" data-role="none" value="" />
            </ul><!-- / .votes-list -->
            <div class="clear"></div>

</form>

Here is my JS:

function getValues(){    
    $('#postingFeedback li').on('click', function(event){        
           var $clickedValue = $(this).val($(this).attr("value")); // Retreive "value"
           $(this).siblings('input[name="smileVote"]').val($clickedValue); // Plug smile value into input for database POSTS
    });
}



getValues();
​

Answer 1

value is a reserved attribute, it’s not intended to be used on an li like you’re trying to do. Rename that to something else, like vote:

<li class="vote" name="vote1" vote="A-value1">

Then get the value by accessing the attribute directly:

$('#postingFeedback li').on('click', function(event){
    $(this).siblings('input[name="smileVote"]').val($(this).attr('vote'));