Add spaces and/or breaks in concatenated text from variables of values input fields in jQuery

Question

Trying to get some spaces and/or breaks in the textarea that has its content added dynamically depending on the amount and type of input based o values. All works as it should except the textarea where all the values are added together as a string without having any breaks or spaces. Tried adding divs around each of them but the textarea doesn't allow them and thus doesn't display it.

Hopefully someone can help me further with this. Any help is much appreciated.

html:

<select class="categoryName1 changeFields" name="chipsCategory">
    <option value="Category_1">Category 1</option>
    <option value="Category_2">Category 2</option>
    <option value="Category_3">Category 3</option>
</select>

<select class="chipsTaste1 changeFields" name="chipsTaste">
    <option value="brand1">Brand 1</option>
    <option value="brand2">Brand 2</option>
    <option value="brand3">Brand 3</option>
</select>

<textarea id="pasteTotal"></textarea>

js:

    var allOrders = $('.changeFields').val();

    $('#pasteTotal').append(allOrders);

Thank you very much for all possible helps.

Sorry for the big code Dump, and thanks for the help.

a giant code dump and fix this for me is not going to get you any help, you need to read How to Ask a Good Question and edit this to make it compliant. — user177800
– user177800, Commented May 4, 2015 at 21:17
@JarrodRoberson, just thought it could give some clarification in what I am doing. Sorry for that. — prettyInPink
– prettyInPink, Commented May 4, 2015 at 21:20
The proper thing is only post code relevant to the issue at hand. A better explanation of the issue as it relates to that code ( or extra comments) also helps. You are free to update your post also any time — charlietfl
– charlietfl, Commented May 4, 2015 at 21:30
@charlietfl, sorry to you too, thought it was more in the interest of seeing the global picture of what I am doing with the code, thats why I added the large chunk of code, my apologies for that. — prettyInPink
– prettyInPink, Commented May 4, 2015 at 21:41
no worries... just filling you in...makes it easier for all of us. Much simpler to read now! — charlietfl
– charlietfl, Commented May 4, 2015 at 21:42

charlietfl · Accepted Answer · 2015-05-04 21:56:35Z

1

In code shown...$('.changeFields').val() will only return the value of the first element in the matching selector. You need to loop over all of them if you want the values of all those elements.

You can do this numerous ways such as $.each and concatenate strings on each iteration or my preference is to use arrays.

$.map creates can be used to map one array into another. In this case it is the array of elements....returning array of values, which can then be joined with whatever delimiter you want

var $selects = $('.changeFields').change(function () {
    // make array of the select values
    var allOrders = $.map($selects, function (el) {
        return el.value;
    });
   // join array with comma and space and add to textarea
    $('#pasteTotal').val(allOrders.join(', '));

})

I used a change handler on the selects to be able to demo the code inside the handler. That code can be adapted to whatever other event code you are currently using

DEMO

answered May 4, 2015 at 21:56

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

1 Comment

prettyInPink Over a year ago

Making an array of it and using the .join method is exactly what I was looking for. Thanks for giving me this clear pointers. Cheers.

Collectives™ on Stack Overflow

Add spaces and/or breaks in concatenated text from variables of values input fields in jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related