I have a recipients input textfield called ‘recipient’, which takes usernames separated by a comma. Next to this field I have a list of usernames wrapped in span tags with a title attribute holding the username. I’m using the following code to set the value of the textfield. However it only takes one username instead of adding to it. I also don’t know how to add a comma automatically when a username gets clicked.
$(document).ready(function() {
$('span.contact').click(function() {
var title = $(this).attr('title');
$("input[name='recipient']").val(title);
});
});
<span class="contact" title="username-1">Add to recipients</span>
<span class="contact" title="username-2">Add to recipients</span>
<span class="contact" title="username-3">Add to recipients</span>
So the desired result if all three usernames would be clicked in the input field would be: username-1, username-2, username-3. I’ve searched high and low and was hoping to find help here.
In terms of usability and ease of use, I would suggest that you just use a checkbox for each contact, and submit that with the form instead. You can even have the checkbox select itself when you click on each name.
I can create checkboxes next to each username, however, the input field is part of a form which I can not adjust, so it still needs to be populated even if using checkboxes. I just don’t know how to populate the input field without it being cleared on the next onclick event.
What will you do when someone clicks a name twice? Will there be two identical names added to the input field, will you want to ignore the second click, or will you want to remove the name from the input field.
And how about when people double-click on the name. They do commonly do that as well.
Ahhh…good point. Clicking twice would remove the name. Because I have the contact span tags actually set to text-indent and applied a ‘[+]’ image background. So when the span tag gets clicked I will have it assign a different background image namely ‘[-]’. So something like this:
(added a toggleClass ‘added’ and show the complete contacts structure)
In this example the third item has been clicked, so it adds the class ‘added’. When clicked again it would remove it. This would change the background image from ‘[+]’ to ‘[-]’. I should also be able to change the text value ‘Add to recipients’ to ‘Remove to recipients’ to make it more accessible. I think I can figure that out though.
A check for double click could be handy, but not necessary. Users will learn quickly how the system behaves, so I’m not to worried about that.
In that case you should be able to loop through the elements with the class of “added” and create an array of the titles. Then you can apply the join method to the array and place the result in the input field.
Yes!..I think understand what you mean, however my javascript skills are limited to the example I mentioned. Like simple jquery effects and manipulation. Any chance you could give a coded example off how to do this?
Thanks a ton for this already…I didn’t work yet, however clicking twice this remove the value, but it seems the array does not get populated, so always only one name is shown. replaced or removed on double click.
We also had to change our markup a bit to support tables rather than lists.
All I changed then in the code you provide was the parent from ‘ul’ to ‘tr’. Am I still on the right track? Also names have to seperated by a comma.
Sorry, I didn’t realize it is so early in the morning for you. I don’t mind coming back to this later. I feel I’m getting in the right direction. Thank you so much.
The common parent that can gain access to all elements with the added class name is not tr, but is table instead. Change parents(‘tr’) to parents(‘table’)
On second thought though, a more stable solution may be to just perform a page-wide search instead.
$('.added').each(function () {
You can always use the second parameter later on when you want to narrow the search to a more localised area. If the table had an identifier of “people” you could then use this to narrow the scope of the search:
When you join an array together, the end result is automatically comma separated. If you want to use something else other than a comma, you can specify that in the join method.