jQuery: append form input

Question

here is my html output:

<script language="javascript">
 function append_suggestion() {
 $('input[name="cn"]').append($('#rand-character').val());
 }
</script>
<form name="form" action="/search/results" method="get" class="search-form" id="search-autocomplete">
 <input size="28" class="search-field" id="cn" name="cn" type="text" value="" /> <input type="submit" name="" value="" class="button" />
</form>
<a href="#" id="rand-character" onclick="append_suggestion()">link</a>

After clicking the link nothing happens (it's supposed to insert link text into the input field). How to correct this link behavior?

Thank you.

• Jan Hančič: What exactly are you trying to accomplish here?
• Jan Hančič: Also: use ´<script type="text/javascript">´ instead of ´<script language="javascript">´
• rpj: I don't believe you can append to an input tag: append() inserts DOM elements to the matched element (in this case, all input fields with the name 'cn'). If you're trying to insert the contents of the #rand-character element, try using val(). Also, you should use '#cn' instead of 'input[name="cn"]' if you're only interested in that single input element: he latter must do a more exhaustive search of the DOM, which is considerably slower.
• Den Thomas: @Jan, sorry, edited my question.

Answer 1

Try this:

var cnEl = $('#cn');
cnEl.val(cnEl.val() + " " + $('#rand-character').text());