Question

我有一个带有多选块的这个表单，我试图在点击时获取每个块条件的值，这样我就可以发送一个数据库，但是每次我点击一个块我的脚本都获得了所有的值，任何想法？

我在这里创建了一个jsFiddle：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>

这是我的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是一个保留属性，它并不打算像你想要的那样在li上使用。将其重命名为其他内容，例如vote：

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

然后直接访问该属性获取值：

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

Answer 2

为每个输入指定不同的名称。表单在键值对中发送数据，其中名称为键。由于所有输入框都具有相同的名称，因此只有一个键值对。

Answer 3

尝试使用.serializeArray()

$('[type="submit"]').on('click' , function(e) {

    e.preventDefault();

    var  a = $(':input').serializeArray().get();
    console.log(a);
});

您可以使用 var a 将其发送到您的数据库

<强> Check Fiddle

如何获取输入自定义值并使用Jquery将其传递给多选标准的变量

3 个答案: