SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Manchester
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Retrieving value of a dynamically created input field

    Hello,

    I've dynamically created a new field by using appendTo.

    i.e.

    PHP Code:
    $("<input type='text' id='field' value='1'>").appendTo("body"); 
    If I try to access the value of this dynamically generated field (i.e. $("#field").val()), I don't have any value returned. I understand this may be because jquery doesn't detect it as being a part of the DOM or something along those lines.

    Any ideas what I'll need to do in order to get a value successfully returned?

    Thanks.

  2. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Here is another way of doing it where you build the input element from scratch. At the end of the build process the new element value is displayed as an alert().

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Value of Append Field</title>
    <script type="text/javascript">
    <!--
    function addInput()
     {  var elem=document.createElement("input");
        elem.setAttribute("type","text");
        elem.setAttribute("id","field");
        elem.setAttribute("value","1");
       //
        document.body.appendChild(elem);
        alert("Field value= "+document.getElementById("field").value)
      }
    window.onload=addInput;
    //-->
    </script>
    </head>
     
    <body>
     
    </body>
     
    </html>

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Bred View Post
    If I try to access the value of this dynamically generated field (i.e. $("#field").val()), I don't have any value returned. I understand this may be because jquery doesn't detect it as being a part of the DOM or something along those lines.

    Any ideas what I'll need to do in order to get a value successfully returned?
    Your example seems to work on a test page that I quickly put together.

    You may need to provide a test page of your own, so that we can diagnose the problem that you're facing.

    My simple test page:

    Code html4strict:
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script src="script.js"></script>
    </head>
    <body>
    </body>
    </html>

    script.js
    Code javascript:
    $(function () {
        $('<input type="text" id="field" value="test value">').appendTo('body'); 
        alert($('#field').val());
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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