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

Answer 1

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