使用jquery按名称获取多个隐藏值

时间:2017-02-15 17:08:43

标签: javascript jquery

我有:

<input type="hidden" name="uID" id="uID" value="251|0">
<input type="hidden" name="uID" id="uID" value="252|0">
<input type="hidden" name="uID" id="uID" value="253|0">
<input type="hidden" name="uID" id="uID" value="254|0">
<input type="hidden" name="uID" id="uID" value="0|0">

uID = $("input[name='uID']").val();

因此使用“uID”名称有多个值。当我尝试按名称获取值时,我只得到最后一个值(0 | 0)。我如何做到这一点,所以我的最终结果如下:

251 | 0252 | 0253 | 0,...

6 个答案:

答案 0 :(得分:1)

使用map()将每个value投影到一个字符串数组中,然后使用您的分隔符join()投影:

var result = $("input[name='uID']")
                  .map(function(x, elm) { return elm.value; })
                  .get()
                  .join(',');

答案 1 :(得分:0)

所有ID都必须是唯一的,并且如果它们完全相同则会引起您的问题。不确定为什么你需要这样做,但你可以这样做:

$(function() {
   var concat = [];

    $( "input" ).each(function() {
        var data = $(this).val(); 
        concat += data + ",";
    })

$(".values").html(concat);

});

Fiddle

答案 2 :(得分:0)

一种简单的方法:

var res = "";
$(".selectable").each(function() {
    res = res + " " + $(this).val();
});

例如,按类选择input元素,并将值连接到变量。您也可以使用数组。什么适合你的目的。

小提琴:https://jsfiddle.net/zttzu990/

答案 3 :(得分:0)

我必须用以下内容作为答案:所有表单元素ID必须是唯一的。它会破坏现代浏览器吗?不,但它确实打破了前端脚本。

话虽如此,这里是你问题的答案。迭代整个系列。

// Declare your variable
var uID = "";

// Iterate through the "collection"
$("input[name='uID']").each(function(){

    // If there's a value, add the delimiter
    if (uID.length > 0){
        uID = "," + uID;
    }

    // Appending each subsequent value to the variable
    uID += $(this).val();

});

如果这会带来更多问题,您应该为隐藏的输入提供他们自己的唯一名称(和ID),而是给他们一个他们共享的类。见下文。

<input type="hidden" name="uIDa" id="uIDa" class="js-uID" value="251|0">
<input type="hidden" name="uIDb" id="uIDb" class="js-uID" value="252|0">
<input type="hidden" name="uIDc" id="uIDc" class="js-uID" value="253|0">
<input type="hidden" name="uIDd" id="uIDd" class="js-uID" value="254|0">
<input type="hidden" name="uIDe" id="uIDe" class="js-uID" value="0|0">

Javascript / JQuery将是......

// Declare your variable
var uID = "";

// Iterate through the "collection"
$(".js-uID").each(function(){

    // If there's a value, add the delimiter
    if (uID.length > 0){
        uID = "," + uID;
    }

    // Appending each subsequent value to the variable
    uID += $(this).val();

});

希望这有帮助。

答案 4 :(得分:0)

从您的HTML开始,它有两个主要问题。第一个是对任何字段使用相同的表单字段,并且所有字段都具有相同的ID。这样可以使字段看起来像只有一个字段。

<input type="hidden" name="uID" id="uID" value="251|0">
<input type="hidden" name="uID" id="uID" value="252|0">
<input type="hidden" name="uID" id="uID" value="253|0">
<input type="hidden" name="uID" id="uID" value="254|0">
<input type="hidden" name="uID" id="uID" value="0|0">

要解决此问题,您应该将HTML更新为:

<input type="hidden" name="uID[]" id="uID-1" value="251|0">
<input type="hidden" name="uID[]" id="uID-2" value="252|0">
<input type="hidden" name="uID[]" id="uID-3" value="253|0">
<input type="hidden" name="uID[]" id="uID-4" value="254|0">
<input type="hidden" name="uID[]" id="uID-5" value="0|0">
像这样:

<input type="hidden" name="uID-1" id="uID-1" value="251|0">
<input type="hidden" name="uID-2" id="uID-2" value="252|0">
<input type="hidden" name="uID-3" id="uID-3" value="253|0">
<input type="hidden" name="uID-4" id="uID-4" value="254|0">
<input type="hidden" name="uID-5" id="uID-5" value="0|0">

在第一个解决方案中,如果您发布表单,那么将转到您服务器的数据将是一个包含所有字段值的数组。

在我发给您的第二个解决方案中,您的请求中只有多个变量。

现在为了获取值,您应该运行以下代码:

// Isolate the code inside a Immediately-Invoked Function Expression (IIFE)
(
    function ( $, window, undefined ) {
        // Create a variable that is going to hold all the hidden fields
        var $hidden_inputs = null;

        // Responsible to iterate over the elements found in your
        // HTML, and returns the values in the format of val,val,val
        var get_values = function get_values ( ) {
            // Register an array variable that is going
            // to hold the values of all the found fields
            var $string_parts = [];

            // Iterate over the found fields
            $hidden_inputs.each(
                function() {
                    // And push the values of those fields into the
                    // values array container
                    $string_parts.push( $( this ).val() );
                }
            );

            // Finally return the array values joined with commas
            return $string_parts.join( ',' );
        }

        // When the document is loaded
        $( document ).ready(
            function () {
                // Query the document for the hidden fields that works
                // like that:
                //     Find all the input fields with
                //     type="hidden" that the
                //     name attribute contains the string uID
                $hidden_inputs = $( 'input[type="hidden"][name*="uID"]' );

                // If the jQuery found more than 0 elements
                if ( 0 < $hidden_inputs.length ) {
                    // Get the field values and save them into the
                    // $values variable.
                    var $values = get_values();
                }
            }
        );
    }
)( jQuery, this );

您还可以在此处找到正在运行的示例:jsFiddle

答案 5 :(得分:0)

以下是按名称获取价值的最简单方法

$(document).ready(function() {
  var myids = "";
  $.each($("input[name='uID']"), function(index, element) {

    myids = myids + " - " + $(element).val();
  })
  $("#myids").html(myids);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="hidden" name="uID" id="uID" value="251|0">
<input type="hidden" name="uID" id="uID" value="252|0">
<input type="hidden" name="uID" id="uID" value="253|0">
<input type="hidden" name="uID" id="uID" value="254|0">
<input type="hidden" name="uID" id="uID" value="0|0">
<div id="myids">

</div>