名前

2017-02-15 6 views
0

することにより、複数の隠された値をつかむために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(); 

だから「ユビキタスID」の名前を使用して、複数の値があります。名前で値を取得しようとすると、最後の値(0 | 0)で終わるだけです。最終結果は次のようになります。

251 | 0,252 | 0,253 | 0、....?

+0

は、なぜあなたは最初の場所で同じ名前の複数の '' の要素を持っているのですか?また、IDはDOM内で一意であると想定されます。あなたがあなたの答えを持っていれば@Damien @ – BenM

+3

'$(" input [name = 'uID'] ")" map((x、elm)=> elm.value).get()。join( '、') ' – haim770

+0

@Damienあなたが正解と賛成投票としてあなたを助けた答えをチェックしてください:)これはコミュニティが質問に答えるのを助けます:);) –

答えて

1

使用map()を、join()とデリミタ:

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

ここで何が起こっているのか完全には分かっていませんが、map()が私の解決策と関係していることが私の頭の後ろに分かっていました。ありがとう。 – Damien

+0

@Damienだからこそ、私は各メソッドの関連ドキュメントへのリンクを含めました。 – haim770

+0

私はこれを見ていますが、もともと1行に書きました。$( "input [name = 'uID']")。map((x、elm)=> elm.value).get()。join( '、')は混乱します。 – Damien

0

すべてのIDは一意である必要があり、すべて同じIDであれば問題を引き起こします。単純にそれを行うには

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

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

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

}); 

Fiddle

0

一つの方法:あなたがこれを行う必要がありますが、あなたがでそうすることができる理由は本当にわからない

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

例えば、クラスによってinput要素を選択します値を変数に連結するだけです。また、配列を使用することもできます。あなたの目的に合ったもの

フィドル:https://jsfiddle.net/zttzu990/

0

私は次のように私の答えを前置きする必要があります。Idsは一意である必要がありますすべてのフォーム要素。それは最新のブラウザを破るだろうか?いいえ。しかし、フロントエンドのスクリプトを壊すでしょう。

これはあなたの質問に対する答えです。コレクションを繰り返します。

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

}); 

・ホープ、このことができます。

0

HTMLで始まり、主に2つの問題があります。 1つは、すべてのフィールドについて同じIDを持つだけでなく、いずれかのフィールドに同じフォームフィールドを使用することです。これはフィールドが1つだけであるように見えるようにする効果があります。

<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-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"> 

:このようなの

<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"> 

フォーム、データはあなたのすべてのフィールドの値を持つ配列になりますあなたのサーバーに行くでしょう。

私が送った2番目のソリューションでは、リクエストに複数の変数があるだけです。

は今、あなたは、次のコードを実行する必要があります値を得るために:

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

また、ここで実行している例を見つけることができます:文字列の配列にそれぞれvalueを投影するjsFiddle

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>