Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Location
    St. Louis, MO
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question 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:

    Code:
    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);
    Code:
    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.

  • #2
    New Coder
    Join Date
    May 2009
    Location
    LA, USA
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Please share the resulting HTML code or a link to your test page. That way we could see why the onclick is not working ...

  • #3
    New to the CF scene
    Join Date
    May 2009
    Location
    St. Louis, MO
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?

  • #4
    New Coder
    Join Date
    May 2009
    Location
    LA, USA
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    please right click into the page and select "view source" and then please post the HTML generated for the form ...

  • #5
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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.

  • Users who have thanked venegal for this post:

    aWhite89 (05-31-2009)

  • #6
    Regular Coder
    Join Date
    Aug 2008
    Posts
    104
    Thanks
    4
    Thanked 14 Times in 14 Posts
    ... or use a seperate var to store the string before you assign it to innerHTML...

  • #7
    New to the CF scene
    Join Date
    May 2009
    Location
    St. Louis, MO
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #8
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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
    Code:
    userName.setAttribute('onclick', "selectText(userName.id);");
    instead of
    Code:
    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
    Code:
    box.innerHTML += '<br><br><b>Password:&nbsp;&nbsp;&nbsp;</b>';
    you could use
    Code:
    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, or, probably better, since you already got prototype in there you could just add the scriptaculous builder.
    Last edited by venegal; 06-01-2009 at 12:37 PM.

  • Users who have thanked venegal for this post:

    aWhite89 (06-02-2009)


  •  

    Posting Permissions

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