Issue with onclick Events for Multiple Fields

I am working on a simple control panel where I have text input fields in which a user can click on a text box and the text will automatically focus and select. I have done this fine. However, when I use the same onclick event for multiple fields, only the last one created works. Here is what I have:


var object = clearAndBuild();
var parent = object.x;
var box = object.y;

<?php
$ID = $_SESSION['userID'];
$query = mysql_query("SELECT `loginName`, `password`, `email`, `biography`, `pictureid` FROM `doctors` WHERE `ID` = '$ID'") or die("Could not run query");
$doctor = mysql_fetch_assoc($query);
?>

box.innerHTML += '<b>Username:&nbsp;&nbsp;</b>';
var userName = document.createElement('<input>');
userName.name = "userName";
userName.type = "text";
userName.id = "inputs";
userName.style.cursor = "pointer";
userName.size = "15";
userName.maxlength = "30";
userName.value = "<?php print $doctor['loginName']; ?>";
userName.onclick = function() { selectText(userName.id);};
box.appendChild(userName);

box.innerHTML += '<br><br><b>Password:&nbsp;&nbsp;&nbsp;</b>';
var password = document.createElement('<input>');
password.name = "password";
password.type = "password";
password.id = "pw";
password.style.cursor = "pointer";
password.size = "15";
password.maxlength = "30";
password.value = "<?php print $doctor['password']; ?>";
password.onclick = function() { selectText(password.id);};
password.onkeydown = function() {
var password2 = document.createElement('<input>');
password2.name = "password2";
password2.type = "password";
password2.id = "pw2";
password2.size = "15";
password2.maxlength = "30";
box.innerHTML += '<br><b>Confirm Password:&nbsp;&nbsp;&nbsp;</b>';
box.appendChild(password2);
document.getElementById("password").focus();
};
box.appendChild(password);

box.innerHTML += '<br><br><b>E-mail:&nbsp;&nbsp;&nbsp;</b>';
var email = document.createElement('<input>');
email.name = "email";
email.type = "text";
email.id = "email";
email.style.cursor = "pointer";
email.size = "15";
email.maxlength = "30";
email.value = "<?php print $doctor['email']; ?>";
email.onclick = function() { selectText(email.id);};
box.appendChild(email);

parent.appendChild(box);



function selectText(field)
{
document.getElementById(field).focus();
document.getElementById(field).select();
}


So, if I were to comment out the password and email field additions, then the userName field would work correctly. If I were to just comment out the email field, password would work correctly but userName would not. And finally, if I have the code as is, userName and password do not function correctly while email does.

Any suggestions for this are appreciated.

Please share the resulting HTML code or a link to your test page. That way we could see why the onclick is not working ...

Well, the thing is, there is no error displayed. The browser doesn't detect anything wrong.

The page is password protected and private to a client so I can't directly link it but here is what it shows:

( | | = text input field)

Username: | current Username |
Password: | current password |
Email: | current Email |

What I am trying to do is having the text in the input field automatically be selected when I click on the input field. In the code displayed above, the only section that works for is the Email. The others don't select the text onclick.

Does this help?

please right click into the page and select "view source" and then please post the HTML generated for the form ...

Your problem is the use of innerHTML.

First you are constructing those elements, setting properties, attaching event handlers and finally appending them, and everything works great.

Then you are concatenating to the innerHTML property of the parent node, which causes the whole thing to be reevaluated (since without reevaluation nobody knows what you might have changed, because innerHTML is just a string) and the event handlers are lost in the process.

Simple solution: Don't use innerHTML. You obviously do know how to manipulate the DOM the right way, so just do it consequently.

... or use a seperate var to store the string before you assign it to innerHTML...

Thank you both for the tips.

However, if I want to add these elements sequentially as I've done above, how should I append the text string the parent? I could find a way to do this other than innerHTML...I have been starting to use the Prototype Framework as well, maybe there is a function that allows me to do this?

Any help on how to append text like that without innerHTML would be helpful.

Thanks.

Please disregard eddjc's post -- it's nonsense. The problem is that the event listener you register isn't a part of the innerHTML (you can check by using alert(box.innerHTML); right after box.appendChild(userName);. You won't see an onclick property in there and to 'use a seperate var to store the string before you assign it to innerHTML' won't change that fact one bit).

What would change that fact would be using
userName.setAttribute('onclick', "selectText(userName.id);");
instead of
userName.onclick = function() { selectText(userName.id);};

Now, the onclick property is part of the innerHTML, so concatenating to it (and thus causing the innerHTML to be reevaluated) will preserve the listener.

But don't do it that way -- use the DOM instead:

Instead of
box.innerHTML += '<br><br><b>Password:&nbsp;&nbsp;&nbsp;</b>';

you could use
var newEl = document.createElement('b');
newEl.appendChild(document.createTextNode('Password:\xA0\xA0\xA0'));
box.appendChild(document.createElement('br'));
box.appendChild(document.createElement('br'));
box.appendChild(newEl);


Notice how within createTextNode you can't use any HTML entities, as they will always be interpreted as literal text. Instead, if you need special characters, use their escape codes.

As for using prototpye, you could look into the DOM builder (http://www.prototypejs.org/2007/5/12/dom-builder), or, probably better, since you already got prototype in there you could just add the scriptaculous builder (http://wiki.github.com/madrobby/scriptaculous/builder).