0

I have:

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

So there are multiple values using the "uID" name. When I try to grab the values by name I only end up with the last value (0|0). How do i make it so my end results look like this:

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

4
  • Why do you have multiple <input /> elements with the same name in the first place? Also, IDs are supposed to be unique within the DOM. Commented Feb 15, 2017 at 17:09
  • 3
    $("input[name='uID']").map((x, elm) => elm.value).get().join(',') Commented Feb 15, 2017 at 17:13
  • @Damien if you have got your answer, please check the answer that helped you as the right answer and up vote :) This help the community to answer questions :) ;) Commented Feb 15, 2017 at 17:52
  • @haim770 - That's exactly what i needed, can you post that as an answer so i can credit you?!? Commented Feb 15, 2017 at 18:20

6 Answers 6

1

Use map() to project each value into an array of strings, then join() with your delimiter:

var result = $("input[name='uID']")
                  .map(function(x, elm) { return elm.value; })
                  .get()
                  .join(',');
Sign up to request clarification or add additional context in comments.

3 Comments

Not entirely sure what's going on here, but I knew in the back of my head that map() had something to do with my solution. Thanks.
@Damien, That's why I included the links to the relevant documentation of each method.
I see that, but the way you originally wrote it on one line: $("input[name='uID']").map((x, elm) => elm.value).get().join(',') gets confusing.
0

All ID's need to be unique and will be causing you issues if they are all the same. Not really sure why you need to do this, but you can do so by:

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

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

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

});

Fiddle

Comments

0

One way to do it simply:

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

Select input elements by class for example, and just concatenate the values to a variable. Also you can use an array. What ever suits your purpose.

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

Comments

0

I must preface my answer with the following: All form element Ids must be unique. Will it break modern browsers? No. But it'll break front-end scripting for sure.

That being said, here's an answer to your question. Iterate through the collection.

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

});

If that brings more issues, you should give the hidden inputs their own unique names (and Ids) and instead give them a class that they all share. See below.

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

And the Javascript/JQuery would be...

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

});

Hope this helps.

Comments

0

Starting by your HTML that has two main issues. The first is that you use the same form field for any of the fields as well you have the same ID for all of the fields. This has as effect to make fields looks like as there is only one.

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

In order to solve this issue you should either update your HTML to looks like that:

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

of like this:

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

In the first solution, if you post the form, the data will go to your server will be an array with the values of all your fields.

In the second solution I have send you, you will just have multiple variables in your request.

Now in order to get the values you should run the following code:

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

You can also find a running example here : jsFiddle

Comments

0

Below is the simplest way to get value by name

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.