Question

I have this form with a multi-selection blocks, I am trying to get the values of each block 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 have a jsFiddle here: http://jsfiddle.net/creativestudio/Hqbmk/1/

This is my html:

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

            <!-- .votes-list -->
            <ul class="vote-list">
                <li class="vote" name="vote1" value="0">
                </li>
                <li class="vote" nname="vote1" value="1">
                </li>
                <li class="vote" name="vote1" value="2">
                </li>
                <li class="vote" name="vote1" value="3">
                </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="0">
                </li>
                <li class="vote" nname="vote2" value="1">
                </li>
                <li class="vote" name="vote2" value="2">
                </li>
                <li class="vote" name="vote2" value="3">
                </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="3">
                </li>
                <li class="vote" nname="vote3" value="2">
                </li>
                <li class="vote" name="vote3" value="1">
                </li>
                <li class="vote" name="vote3" value="0">
                </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="0">
                </li>
                <li class="vote" nname="vote4" value="1">
                </li>
                <li class="vote" name="vote4" value="2">
                </li>
                <li class="vote" name="vote4" value="3">
                </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="0">
                </li>
                <li class="vote" nname="vote5" value="1">
                </li>
                <li class="vote" name="vote5" value="2">
                </li>
                <li class="vote" name="vote5" value="3">
                </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="vote6" value="0">
                </li>
                <li class="vote" nname="vote6" value="1">
                </li>
                <li class="vote" name="vote6" value="2">
                </li>
                <li class="vote" name="vote6" value="3">
                </li>
                <input name="smileVote" class="is-hidden" data-role="none" value="" />
            </ul><!-- / .votes-list -->
            <div class="clear"></div>

 <button class="" type="submit" >Send</button>

</form>

This is my Jquery:

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



getValues();
​

I will appreciate any help.

Answer 1

You need to get the sibling input of the li‘s so it won’t set the value for all inputs

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

Also to post each input value you will need different names for your input elements

http://jsfiddle.net/wirey00/Hqbmk/2/