php - Jqueryで複数選択基準から入力値を取得する方法

Question

複数選択ブロックを含むこのフォームがあります。データベースを送信できるように、クリック時に各ブロックの値を取得しようとしていますが、ブロックをクリックするたびに、スクリプトがすべての値を取得しています。アイデアはありますか？

ここにjsFiddleがあります：http：//jsfiddle.net/creativestudio/Hqbmk/1/

これは私の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>

これは私の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();
​

助けていただければ幸いです。

Answer 1

'sの兄弟入力を取得してli、すべての入力の値が設定されないようにする必要があります

$('#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
});

また、各入力値を投稿するには、入力要素に異なる名前が必要になります

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

Answer 2

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



getValues();

これは役立つはずです。

Answer 3

問題は、それぞれが同じ名前を持っていることです：「smileVote」

それぞれに異なる名前を付ける必要があります。