get html array elements with jquery

Question

i have an HTML array;

<input class="input_box" name="authors[]" id="author1"/>

what i want to do is, get the value of this array an display without refreshing the page, (i do display the value just next to the input field, in an independent div)

$(document).ready(function(){    
$("input[id^="author"]").change(update);
});
    function update(){ 
    var authors=new Array();
    $("input[id^="author"]").each(function(){authors.push($(this).text()) }); 
    var author= '"' + authors.join('", "') + '"';

    $('#val-authors').html('authors:<span class="red"> "'+author+'"</span>');}

only thing i see in <div id="val-authors"> is, "",

what am i missing?

thanks in advance..

Alnitak · Accepted Answer · 2012-11-09 11:30:57Z

8

Your selector:

$("input[id^="author"]")

is incorrect, because you're trying to use double quotes inside double quotes. One of the pairs needs to be single quotes.

If you were using a JS debugger this should be immediately visible.

FWIW, this is a cleaner way of retrieving the required array:

var authors = $('input[id^="author"]').map(function() {
  return this.value;
}).get();

edited Nov 9, 2012 at 11:30

answered Mar 15, 2012 at 8:46

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nnnnnn · Accepted Answer · 2012-03-15 09:02:54Z

Your "html array" is not an array at all, even assuming there are a number of other similar inputs (though when the form is submitted your chosen server-side language likely lets you access the values of inputs with the same name as an array). Anyway...

The main problem is that your JS has a syntax error:

$("input[id^="author"]")

If you want to include double-quotes inside a double-quoted string literal you have to do escape them:

$("input[id^=\"author\"]")

Or quote the string with singles:

$('input[id^="author"]')

It may be more efficient to avoid the attribute starts-with selector with the id attribute and select by the name attribute, noting that for jQuery the square brackets in the atttribute name need to be escaped with backslashes, and for JS string literals backslashes also need to be escaped:

$('input[name="authors\\[\\]"]')

Also to get the value of an input with jQuery use .val() rather than .text(), but it is more efficient to just use this.value:

var authors = [];
$('input[id^="author"]').each(function(){ authors.push(this.value); });

I'd also recommend declaring arrays with = [] rather than = new Array().

thank you @nnnnnn, i did not mention here but i have another javascript that adds into authors[], so i have multiple author in fact. i tried your advice and replacev .text() to .val(), and baam! thank you..
Cool. Happy to help. (I understood that you had multiple authors[] elements, but my point about the array is that html doesn't have arrays.)

Nikola K. · Accepted Answer · 2012-07-28 11:59:27Z

1

Change:

$("input[id^="author"]").change(update);

To:

$("input[id^='author']").change(update);

edited Jul 28, 2012 at 11:59

Nikola K.

7,15313 gold badges33 silver badges39 bronze badges

answered Mar 15, 2012 at 8:48

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

Collectives™ on Stack Overflow

get html array elements with jquery

3 Answers 3

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Related