CODEWITHSUNDEEP
javascriptdynamic
Lucas
Lucas

Reputation: 101

how to get/set value of dynamically created text box

i'm working on a holiday greeting card that behaves like fb in a very simple way and in the commenting portion, i can't seem to get and set the value of the dynamically created text box that appears after the user has added a new comment... i'm creating a new text field with an appended number for the id to identify it and i can set the value in the function that creates it, but once looking for it from another function, the code breaks. any ideas? i would figure that maybe this would be contingent on where the function occurs in the document but not sure about that. here's a link:

Elfbook

here it is in a nutshell:

comment() contains the following code that modifies the input field

// var subject = 'HI593F1' or something like that;
// var current_comment = new Array() and keeps count of the current new comment box
// this resulting value looks like this: 'comment-HI593F1-2'
var comment_field = 'comment-'+subject+'-'+current_comment[subject];

document.getElementById(comment_field).value = 'Write a comment...';
document.getElementById(comment_field).onblur = function() { ghost('comment', subject); }
document.getElementById(comment_field).onfocus = function() { unghost('comment', subject); }
document.getElementById(comment_field).onkeypress = function() { text_color('comment', subject); }

unghost() works like this:

function unghost(field, number)
    {
    // field = 'comment' ... this is 'comment' because this function modifies more than one field
    var ogfield = field;
    // if another comment is expanded
    if (current)
        {
        collapse_comment(current);
        }
    current = number;

    // like var comment field in the comment() function
    if (number)
        {
        field = field+"-"+number+"-"+current_comment[number];
        }

    // below is where the code breaks ... values[ogfield] = 'Write a comment...';
    // should look like this: document.getElementById('comment-HI593F1-2').value == 'Write a comment...'
    if (document.getElementById(field).value == values[ogfield])
        {
        document.getElementById(field).value = \'\';
        }

    // change the color of the field text
    text_color(field, number);
    }

Upvotes: 0

Views: 2542

Answers (1)

Jonathan
Jonathan

Reputation: 5993

You're not passing in the expected value to the text_color method.

I've taken some of your code below. See the onBlur attribute of the input calls ghost with the two parameters. Below is the body of ghost, in it the field parameter is modified and then passed into text_color - which in turn modifies the value.

<input type="text" id="comment-MS584C7-1" value="Write a comment..." style="width: 386px; height: 20px; border: 1px solid #c1dcc0; color: #666464; padding: 3px;" onBlur="ghost('comment', 'MS584C7');" onFocus="unghost('comment', 'MS584C7');" onkeypress="text_color('comment', 'MS584C7');" />


function ghost(field, number)
    {
    var ogfield = field;
    if (number)
        {
        field = field+"-"+number+"-"+current_comment[number];
        }
    if (!document.getElementById(field).value)
        {
        document.getElementById(field).value = values[ogfield];    
        }
    text_color(field, number); 
}

I would suggest creating a new ognumber variable to hold the original number value. Then pass ogfield and ognumber to text_color.

unghost suffers the same problem.

EDIT I'm using Chrome, and here are the request headers sent when I click comment.

Request URL:http://getpearson.com/nosesobright_comment.php
Request Method:POST
Status Code:200 OK
Request Headers
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:90
Content-type:application/x-www-form-urlencoded
Cookie:PHPSESSID=------------------
Host:getpearson.com
Origin:http://getpearson.com
Referer:http://getpearson.com/nosesobright
User-Agent:Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.10 (KHTML, like Gecko) Chrome/8.0.552.215 Safari/534.10
Form Data
subject:MS584C7
user:XP192R5
name:
avatar:undefined
attachment:undefined
comment:asdasdasd
Response Headers
Connection:Keep-Alive
Content-Encoding:gzip
Content-Length:155
Content-Type:text/html
Date:Mon, 13 Dec 2010 23:42:31 GMT
Keep-Alive:timeout=10, max=30
Server:Apache
Vary:Accept-Encoding
X-Powered-By:PHP/5.2.14

The comment I entered is coming through.

Upvotes: 1

Related Questions