Javascript, copy text field to new li class

Question

UPDATED, TO BE MORE CLEAR:

My current field that contains the value ‘1201026404’ (which will change every time) :

<input id="ticket_fields_20323656" name="ticket[fields][20323656]" size="30" style="width:125px;" type="text" value="1201026404" tabindex="11">

The LI where I want the copied value ‘1201026404’ (which will change every time) to go when the page loads:

<ul class="multi_value_field" style="width: 99.5%;">
<li class="choice" choice_id="1201026404">1201026404<a class="close">×</a><input type="hidden" name="ticket[set_tags][]" value="1201026404" style="display: none;"></li>
</ul>

The Javascript that I have already made but need help with:

<script type="text/javascript">
copy = function()
{
    var n1 = document.getElementById("ticket_fields_20323656");
    var n2 = ‘what goes here??’
    n2.value = n1.value;
}
</script>

Answer 1

does this work in firefox:

<script type="text/javascript">
copy = function()
{
    var n1 = document.getElementById("ticket_fields_20323656");
    var n2 = document.querySelectorAll("ul.multi_value_field li:first");
    n2.innerHTML = n1.value;
}
</script>

this uses querySelectorAll which doesnt exist in IE6,7,8 - otherwise you need to use the id of the element which im not sure you have

Answer 2

You're going to have to use an ID on the li element.

 <li id="choice_20323656">

then you can copy it like

<script type="text/javascript">
copy = function()
{
    var n1 = document.getElementById("ticket_fields_20323656");
    var n2 = document.getElementById("choice_20323656");
    n2.innerHTML = n1.value;
}
</script>

EDIT:

If you can use jQuery 1.6 or up, this will work:

$("#ticket_fields_20323656").keyup(function(e) {
    $(".choice")
        .attr("choice_id",e.currentTarget.value)
        .html(e.currentTarget.value
              + "<a class=\"close\">×</a><input" 
              + " type=\"hidden\" name=\"ticket" 
              + "[set_tags][]\" value=\"" 
              + e.currentTarget.value 
              + "\" style=\"display: none;\">");
});​

Here's a demo: http://jsfiddle.net/JKirchartz/V2L25/, However you should know, if you have multiple things with the class choice their value's going to change in the same way like this: http://jsfiddle.net/JKirchartz/V2L25/4/