I have the following HTML

<input type="hidden" name="conf1" value="7th IEEE/IFIP International Conference on Embedded and Ubiquitous Computing (EUC-09)">
    <input type="hidden" name="conf2" value="IEEE International Symposium on Parallel and Distributed Processsing with Applications">
    <input type="hidden" name="conf3" value="jkhga">
    <input type="hidden" name="conf4" value="test">
    <input type="hidden" name="conf5" value="The 3rd International Conference on Adaptive Business Information Systems (ABIS'09)">

    <input type="text" name="published">

And i am trying to get the values of the hidden fields in to an array using jquery. Here is what i have tried:

 var conferences = new Array();

        conferences[0] = $('#conf1').val();
        conferences[1] =$("[name='conf2']").val();
        conferences[2] =$("[name='conf3']").val();
        conferences[3] = $("[name='conf4']").val();
        conferences[4] =$("[name='conf5']").val();     

Can anyone direct me on how to read them?
Thanks in Advance
Dean

I have the following HTML

<input type="hidden" name="conf1" value="7th IEEE/IFIP International Conference on Embedded and Ubiquitous Computing (EUC-09)">
    <input type="hidden" name="conf2" value="IEEE International Symposium on Parallel and Distributed Processsing with Applications">
    <input type="hidden" name="conf3" value="jkhga">
    <input type="hidden" name="conf4" value="test">
    <input type="hidden" name="conf5" value="The 3rd International Conference on Adaptive Business Information Systems (ABIS'09)">

    <input type="text" name="published">

And i am trying to get the values of the hidden fields in to an array using jquery. Here is what i have tried:

 var conferences = new Array();

        conferences[0] = $('#conf1').val();
        conferences[1] =$("[name='conf2']").val();
        conferences[2] =$("[name='conf3']").val();
        conferences[3] = $("[name='conf4']").val();
        conferences[4] =$("[name='conf5']").val();     

Can anyone direct me on how to read them?
Thanks in Advance
Dean

• javascript
• jquery

6 Answers 6

If you're going to use jQuery, you can do this:

var array = $('input:hidden').map(function() {
    return this.value;
}).get();

.map() iterates over the collection, and places the return value into a jQuery object.

.get() retrieves the array from the jQuery object.

• http://api.jquery.com/map/
• http://api.jquery.com/get/

var array = $.map($('input:hidden'),function(i) {
    return i.value;
});

This will assign an array of the values to array and is slightly less verbose than using $(selector).map() which returns a jQuery object that you then need to call get() on to return an array.

Demo Here

var conferences = [];

$('input:hidden[name^="conf"]').each(function() {
    conferences.push($(this).val());
});

var conferences = new Array();    // object Array

var conferencesVal = new Array(); // string Array

$("[type=hidden]").each(function(i,e){

   // object array  =>altarnatif method
   conferences.push( {name:$(this).attr("id"),value: $(this).val()});

   //string array
   conferencesVal[i]=  $(this).val();

})

It looks to me like your code works fine already, except that there is no #conf1. Everything seems written correctly to the array, and can easily be accessed via conferences[0], conferences[1], etc.

You could probably clean it up with jQuery tricks, but what you have is functional, if you know that you will only have 5 conferences.

Try below code.

$(...).attr('value');  

.attr(...) : is only getting the objects value at the start (when the html is created).
.val() : is getting the object's property value which can change many times.