с помощью JQuery, чтобы захватить несколько скрытых значений по имени

Question

у меня есть:

<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 | 0,252 | 0,253 | 0, ....?

Answer 1

Использование map() проекта каждый value в массив строк , то join() с разделителем:

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

Answer 2

Все идентификаторы должны быть уникальными и будут вызывать проблемы, если они все одинаковы. Не совсем уверен, почему вы должны сделать это, но вы можете сделать так:

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

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

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

}); 

Fiddle

Answer 3

Один из способов сделать это просто:

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

Выберите input элементы по классам, например, , и просто конкатенировать значения переменной. Также вы можете использовать массив. Что когда-либо подходит вашей цели.

Fiddle: https://jsfiddle.net/zttzu990/

Answer 4

я должен предварить мой ответ следующего содержания: Все формы элемента Идентификаторы должны быть уникальными. Разрубит ли он современные браузеры? Нет. Но это наверняка сломает интерфейсные скрипты.

Это, как говорится, вот ответ на ваш вопрос. Итерации через коллекцию.

// 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(); 

}); 

Если это приносит больше проблем, вы должны дать скрытые входы свои собственные уникальные имена (и Идентификаторы) и вместо того, чтобы дать им класс, все они разделяют. Смотри ниже.

<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(); 

}); 

Надеется, что это помогает.

Answer 5

Начиная с вашего HTML, имеющего две основные проблемы. Во-первых, вы используете одно и то же поле формы для любого из полей, а также имеете одинаковый идентификатор для всех полей. Это влияет на то, чтобы поля выглядели так, как будто есть только один.

<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

Answer 6

Ниже это самый простой способ получить значение по имени

$(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>