Text box added using javascript doesnot respond as expected to the js attached to it

I am adding a text box using javascript:

This is what is generated:

       <dd id="text3-element" style="width: 350px;">
            <input type="text" size="50" id="text3" name="text3" onblur="return getFieldValue(this.id);" value="">
       </dd>

This is what is present in the getFieldValue function:

            function getFieldValu开发者_如何学Ce(id){

                var elem = document.getElementById(id);
                alert(elem.value);
                return false;
            }

I'm trying to get the value of the field added using javascript when the value of the filed changes.

However, I keep getting the value as 'undefined', in spite of entering text into the newly added text box.

This does not happen if the form already has a text box to begin with - i.e., if a text box is not being added via a js function.

Anything missing / look wrong here?

Thanks!

I am not sure about the functional requirement, but why don't you just pass the element itself through the function?

<input type="text" onblur="return getFieldValue(this);">

with

function getFieldValue(element){
    alert(element.value);
    return false;
}

This should work fine.

This worked fine for me on both IE and Chrome. Maybe some other part of the script that you have not posted is throwing the error, can you post the javascript you're using to add the textbox?

You didnt catch if there is no value set for the input

function getFieldValue(element)
{
if (element.value =="") {
    alert("Please enter something");
    return false;
  }
else
{
// make something else
}
}

Test 

<input type="text" onblur="return getFieldValue(this);">