jQuery : How do I put clicked element in input box? - php

Question

I'm trying to get a list going.
I have an empty input box in which I want to store a list: Mary, Kate, Brock
Now I have a select list with those three names in it. I want to know how can I transfer the name clicked from the select list into the input box. If I click a second name, add a comma to separate the one from the previous one.
Appreciate your help. I have no idea to where/how to even start this :(

Answer 1

How about:
<input type="text" id="name" name="name" />
<select name="names" id="names">
<option value="Mary">Mary</option>
<option value="Kate">Kate</option>
<option value="Brock">Brock</option>
</select>
<script>
$(document).ready(function() {
$("#names").change(function() {
name = $(this).val();
current = $("#name").val();
if (!$("#name").val()) {
$("#name").val(name);
} else {
if (current.indexOf(name) == -1) {
$("#name").val(current + ', ' + name);
}
}
});
});
</script>
Adds new name to end of list, only adds a comma when there is more than one name and duplicates are now allowed.

Answer 2

Well you can get the value from an input element with $('#the_id').val();, and you can manipulate the value of an input element in the same way: $('#the_id').val('new value');. Combine that with the .click handler and you should be all set:
$('#selector').click(function(){
var $names = $('#names')
$names.val($names.val() + ', ' + $(this).val());
});

Answer 3

Try use change event:
$('#listbox').change(function(){
var selectedName = $('#listbox option[value='+$(this).val()+']').text();
$('#input-for-insert').append(selectedName);
});
I think you make yourself comma separation)

Answer 4

<input type="text" id="name" name="name" />
<select name="names" id="names">
<option value="Mary">Mary</option>
<option value="Kate">Kate</option>
<option value="Brock">Brock</option>
</select>
<script>
$(document).ready(function()
{
// When the names selection changes
$("#names").change(function()
{
// Get the new name from this selection list
newName = $(this).val();
// Get any names currently in the input box
currentName = $("#name").val();
// Change the value of the name box by adding the newName followed by a comma
// followed by the current names
$("#name").val(newName + ", " + currentName);
});
}
</script>