Assign onkeypress-function to dynamically created input-boxes

Discussion in 'Javascript' started by vega80, Oct 29, 2006.

  1. vega80

    vega80 Guest

    Hi.

    I have a problem with assigning an onkeypress-function to dynamically
    created input-boxes.I want to put the content of an input-field into a
    tag-list when the user hits enter. This works fine the first time (when
    the input-field is created in a non-dynamical way). The next
    input-field is created dynamically by a function that is called when
    the user hits enter (the previously generated input-field will be
    hidden). Then I'm trying to assign an onkeypress-function to the new
    element like this:

    document.getElementById('tags_element_' +
    document.getElementById('tagcount').value).onkeypress = function(event)

    But when i press a key in the dynamically created input-field, nothing
    happens. Why is this?

    Some sample-code below:
    ----------------------------------------------------------------------------------------------------------------------------------
    document.getElementById('tags_element_' +
    document.getElementById('tagcount').value).onkeypress =
    function(event){
    modus = 1;
    e = event;

    // New file input
    if ((e.which == 13 || e.which == 1 || modus == 2) || (modus == 2 ||
    e.keyCode == 13)){
    var new_element = document.createElement( 'input' );
    new_element.type = 'text';
    new_element.size = '40';

    document.getElementById('tagcount').value =
    parseInt(document.getElementById('tagcount').value) + 1;

    new_element.id = 'tags_element_' +
    document.getElementById('tagcount').value;
    var tags = document.getElementById('tagcount').value - 1;
    document.getElementById('tags_element_' +
    tags).parentNode.insertBefore( new_element,
    document.getElementById('tags_element_' + tags) );

    // Apply 'update' to element
    document.getElementById('tags_element_' +
    tags).multi_selector.addElement( new_element );

    // Update list
    document.getElementById('tags_element_' +
    tags).multi_selector.addListRow(
    document.getElementById('tags_element_' + tags) );
    return false;
    }
    else{
    return true;
    }

    };
    -------------------------------------------------------------------------------------------------------------------
    - addListRow creates a new row in the tag-list.
    - addElement adds the new element to the multiselector-object that
    contains all the input-fields


    Thanks in advance!

    Vega80
     
    vega80, Oct 29, 2006
    #1
    1. Advertising

  2. vega80

    ASM Guest

    vega80 a écrit :
    > Hi.
    >
    > I have a problem with assigning an onkeypress-function to dynamically
    > created input-boxes.I want to put the content of an input-field


    input-field = text field ? (<input type="text"> )

    > into a tag-list


    I don't know what it is :-(
    (a select ? an ul+li ? other ? what ?)

    > when the user hits enter.


    where does he hits Enter ?

    > This works fine the first time (when
    > the input-field is created in a non-dynamical way). The next
    > input-field is created dynamically by a function that is called when
    > the user hits enter (the previously generated input-field will be
    > hidden). Then I'm trying to assign an onkeypress-function to the new
    > element like this:


    Absolutely illegible !
    try to use variables when you call several times same element.


    function $(x) { return document.getElementById(x); }

    // to initialize first text field :

    function init() {
    var count = $('tagcount').value;
    $('tags_element_'+count).onkeypress = function() {
    hitEnter(event);
    }
    $('tagcount').value++;
    }

    function hitEnter(e) {
    e = e || event;
    modus = 1;
    if (
    (e.which == 13 || e.which == 1 || modus == 2) ||
    (modus == 2 || e.keyCode == 13)
    )
    newField();
    }

    function newField() {
    var count = $('tagcount').value*1;
    var field = document.createElement('input');
    field.name = field.id = 'tags_element_'+count+'';
    field.type = 'text';
    field.size = 40;
    field.onkeypress = function() { hitEnter(event); }
    count--;
    var target = $('tags_element_'+count+'');
    target.parentNode.insertBefore(field, target);
    target.multi_selector.addElement(field);
    target.multi_selector.addListRow(target);
    $('tagcount').value++;
    }

    > Some sample-code below:
    > ----------------------------------------------------------------------------------------------------------------------------------
    > document.getElementById('tags_element_' +
    > document.getElementById('tagcount').value).onkeypress =
    > function(event){
    > modus = 1;
    > e = event;
    >
    > // New file input
    > if ((e.which == 13 || e.which == 1 || modus == 2) || (modus == 2 ||
    > e.keyCode == 13)){
    > var new_element = document.createElement( 'input' );


    and where is the onkeypress for the new element ?
    not seen ...

    > -------------------------------------------------------------------------------------------------------------------
    > - addListRow creates a new row in the tag-list.
    > - addElement adds the new element to the multiselector-object that
    > contains all the input-fields


    when it is possible to do complicated ...
     
    ASM, Oct 30, 2006
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. muthu
    Replies:
    2
    Views:
    810
    bruce barker \(sqlwork.com\)
    Apr 26, 2006
  2. Stefan Mueller
    Replies:
    5
    Views:
    12,400
    jamesxa
    Jun 16, 2009
  3. Replies:
    5
    Views:
    497
    Eliyahu Goldin
    Sep 3, 2006
  4. msimmons
    Replies:
    0
    Views:
    487
    msimmons
    Jul 16, 2009
  5. Keefe Goldfisher via .NET 247

    Sizing text entry boxes on in-place editing of datagrid row with dynamically created columns

    Keefe Goldfisher via .NET 247, Mar 7, 2005, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    181
    Keefe Goldfisher via .NET 247
    Mar 7, 2005
Loading...

Share This Page