jQuery - Append a Value to a INPUT, keeping it a Comma Delimited list

Question

I have an input like follows:

<input type="hidden" id="attachment-uuids" value="">

I'd like to be able to append a value to the Input, at different times:

$('#attachment-uuids).val('55555');

results in:

<input type="hidden" id="attachment-uuids" value="55555">

But then doing:

$('#attachment-uuids).val('66666');

results in:

<input type="hidden" id="attachment-uuids" value="66666">

Where I'd like the following:

<input type="hidden" id="attachment-uuids" value="55555, 66666">

how can I append values when the value is empty and when the value is not empty with a comma delimited list?

Thanks

@Nick good question, that should never happen but if it does I can take care of that on the backend. — AnApprentice, Dec 02 '10 at 19:43

score 42 · Accepted Answer · edited May 23 '17 at 10:31

42

$('#attachment-uuids').val(function(i,val) { 
     return val + (!val ? '' : ', ') + '66666';
});

EDIT: As @mkoryak noted, I'm doing an unnecessary negation of val in the conditional operator. It could be rewritten without the ! as:

(val ? ', ' : '')

edited May 23 '17 at 10:31

Community

1
1

answered Dec 02 '10 at 19:42

user113716

318,772
63
451
440

1

That is a think of beauty. Thanks! – AnApprentice Dec 02 '10 at 19:46
3

if we are going to talk about elegant, then it would be better to flip that ternary and get rid of the negation :P – mkoryak Dec 02 '10 at 19:57
@mkoryak, I have no idea what you're saying :) – AnApprentice Dec 02 '10 at 20:00
@mkoryak - Good point. `(val ? ', ' : '')` would make more sense. – user113716 Dec 02 '10 at 20:01
what if you want to remove one by one the values? – Younis Qadir Feb 07 '17 at 06:34

score 11 · Answer 2 · answered Dec 02 '10 at 19:42

11

Just add a conditional when you add the value to the field.

var cur_val = $('#attachment-uuids').val();
if(cur_val)
  $('#attachment-uuids').val(cur_val + "," + new_val);
else
  $('#attachment-uuids').val(new_val);

answered Dec 02 '10 at 19:42

Aaron Hathaway

4,280
2
19
17

score 0 · Answer 3 · edited Nov 07 '13 at 15:56

0

Append won't work for input. But you can use:

$("#txt1").get(0).value+="+";

edited Nov 07 '13 at 15:56

Smern

18,746
21
72
90

answered Nov 07 '13 at 15:36

roni

51
7

score -4 · Answer 4 · edited Jan 13 '13 at 09:18

-4

I believe the .append() function is exactly for this purpose. I just tried:

$("#attachment-uuids").append(new_val);

to append values to a field. This works and "attachment-uuids" is populated with CSVs, as required.

edited Jan 13 '13 at 09:18

Shadow The GPT Wizard

66,030
26
140
208

answered Jan 13 '13 at 09:11

user1973805

1

jQuery - Append a Value to a INPUT, keeping it a Comma Delimited list

4 Answers4

Linked