Converting text fields to an array and displaying on page with Javascript/Jquery

Question

I am converting a collection of text fields to an array using the following code (assume HTML input fields with values):

var bgimgsarray = $("input[class='image_name_input']").map{function(){return $(this).val();}).get();

Then I display it on the page using:

$("#vardisplay").html("var bgimgs = ["+bgimgsarray+"];");

That displays as:

var bgimgs=[image1.jpg,image2.jpg,image3.jpg];

However, I need it to display like this:

var bgimgs=['image1.jpg','image2.jpg','image3.jpg'];

Other than informing the user to put ' at the beginning and end of their input, how would I achieve this? I feel like it should be simple but its driving me crazy.

acdcjunior · Accepted Answer · 2013-05-19 23:32:05Z

3

Change the way you are mapping the value.

From

return $(this).val();

To:

return "'"+$(this).val()+"'";

Ending code:

var bgimgsarray = $("input[class='image_name_input']").map{function(){return "'"+$(this).val()+"'";}).get();

You may want to make sure you don't add extra 's when the user types them. In that case, make it:

return "'"+$(this).val().replace(/^'|'$/g,'')+"'";

answered May 19, 2013 at 23:32

acdcjunior

136k37 gold badges340 silver badges312 bronze badges

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

1 Comment

Maverick Johnson Over a year ago

Aaah of course, that completely slipped my mind. Thank you very much. And thank you for the little bit of regex, thats very helpful.

likeitlikeit · Accepted Answer · 2013-05-19 23:32:21Z

1

You should already add the quotes when you construct that array. Use the following line to construct you bgimgsarray variable:

var bgimgsarray = $("input[class='image_name_input']").map{function(){return "'" + $(this).val() + "'";}).get();

answered May 19, 2013 at 23:32

likeitlikeit

5,6685 gold badges45 silver badges57 bronze badges

Collectives™ on Stack Overflow

Converting text fields to an array and displaying on page with Javascript/Jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related