Results 1 to 7 of 7
  1. #1
    Join Date
    May 2008
    Location
    USA
    Posts
    114

    apply function for text box added through javascript

    Hi,

    I want to add row in a table via script, and the row contains a text box where I want to add an onblur function for it, here is my code:
    PHP Code:
    <html>
    <
    head>
    <
    script type="text/javascript">
    function 
    addItem()
    {
    var 
    tbl document.getElementById('tblSample');
    var 
    lastRow tbl.rows.length;
    var 
    iteration lastRow;
    var 
    row tbl.insertRow(lastRow);

    var 
    cell_qty row.insertCell(0);
    var 
    qty document.createElement('input');
    qty.type 'text';
    qty.size 3;
    qty.id 'qty' iteration;
    qty.onblur 'checkQty(this)';
    cell_qty.appendChild(qty);
    }

    function 
    checkQty(qty
    {
    var 
    illegalChars= /[^\d\-\.]/
    if (
    qty.value.match(illegalChars)) {
    alert("Numbers only");
    qty.focus();
    return 
    false;
    }
    else
    {
    //document.getElementById("custEmail")
    return true;
    }
    }
    </script>
    </head>
    <body>
    <table border=1 id="tblSample">
    <tr class="leftNavigationBorder">
            <th class="t_th">Qty</th>
     </tr>
    <td>
        <input type="text" id="qty1" size="3" onblur="checkQty(this)"/>
      </td>
    </tr>
    </table>
    <input type="button" value="Add Item" onclick="addItem();" />
    </body>
    </html> 
    for the textbox added through HTML, the function performs well, but it doesn't perform for the textboxes added through javascript.

    *you can just copy and paste the above code for testing

    can anyone help me and tell me how can the function applied through javascript?

    I'll appreciate any help

  2. #2
    Join Date
    Mar 2009
    Location
    Dublin/Wicklow
    Posts
    145
    Weird, I just can't get it to trigger. I tried using addEventListener as well, and nothing works for me. I'll have another go at lunch.

  3. #3
    Join Date
    May 2009
    Posts
    766
    Nasty little bugger, huh?

    Here's what got it:

    PHP Code:
    qty.onblur 'checkQty(this)'
    ---
    qty.setAttribute("onblur""checkQty(this)"); 
    Problem is "checkQty(this)" is just interpreted as a string, not a function reference. However, checkQty(this) (without quotes) does reference the function, but interprets "this" in it's current context, which happens to be the windowObject. Lastly, checkQty(qty) works once! For some reason it fires at the moment of assignment, but then qty goes out of scope and you're basically calling checkQty(null) after that.

  4. #4
    Join Date
    May 2008
    Location
    USA
    Posts
    114
    And what should I do to reference the function to be performed onblur?

  5. #5
    Join Date
    May 2009
    Posts
    766
    Sorry...I forget that not everyone speaks in diff...it won't work if you try to set onblur() directly. Replace the top line with the bottom line and you should be set. (On FF anyway...that's all I tested).

  6. #6
    Join Date
    May 2008
    Location
    USA
    Posts
    114
    Hi,

    thanks mattle for your time to help, I appreciate it .

    I tried something and it works, I should add it here to help anyone trying do the same, the following is the code we should replace qty.onblur = 'checkQty(this)'; in the previous code:

    PHP Code:
    qty.onblur = function(){checkQty(this);}; 
    here, the function will be performed onblur for each added text box.

  7. #7
    Lookup "jquery Events/bind" on google. jQuery is one of the most amazing JavaScript tools I've ever come across. I'm certain once you get the hang of it you'll love it.

Similar Threads

  1. Javascript doesn't apply with ajax?
    By ti_nhatrang in forum Programming Discussion
    Replies: 2
    Last Post: 07-07-2007, 04:34 PM
  2. javascript function has no properties in javascript console
    By mrblack in forum Programming Discussion
    Replies: 2
    Last Post: 05-25-2005, 02:15 PM
  3. An add function in javascript
    By CPower in forum Web Design and Content
    Replies: 0
    Last Post: 04-12-2005, 01:25 PM
  4. javascript function: delete highleted text
    By mg- in forum Programming Discussion
    Replies: 8
    Last Post: 02-19-2005, 05:15 PM
  5. Javascript Function
    By ecal in forum Other Offers & Requests
    Replies: 2
    Last Post: 02-22-2004, 12:36 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •