Search code examples
jqueryjquery-uijquery-selectorsappendclone

Append TextField into Div JQuery


I have a field with the id of "task_alignment" that has a value the user will be typing that needs to be added into the span below. The span has a value of 12 for the sake of example in the code below.. I can't seem to get this working.

<tr>
<td> Aligned To </td> 
<td class="task_table_item_last">
<input type='text' size='95' id='task_alignment' name='task_alignment' value='<?php echo $task_alignment; ?>'>
</td>
<td class="edit_taskicon"><img class="edit_icon_trigger" src="img/add.png"></td>
</tr>

<tr>
<td></td> 
<td class="aligncode_start">
    <span>12</span>

</td> 
</tr>

I have tried using the code below but it doesn't do anything:

<script>
$(document).ready(function() {
    var $aligncode_newitem = $('<span id="aligncode_newitem">'#task_alignment '</span>'),
        $('.edit_icon_trigger').click(function() {
            $("#task_alignment").clone(aligncode_newitem);
        });
});​
</script>

Solution

  • Try:

    $('.edit_icon_trigger').click(doit);
    $('#task_alignment').keypress(function() {
        if (event.which == 13) {
            event.preventDefault();
            doit();
        }
    });
    function doit() {
        $("td.aligncode_start").html($("td.aligncode_start").html() + ' <span>' + $('#task_alignment').val() + '</span>');
        $('#task_alignment').val('').focus();
    }​
    

    jsFiddle example