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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dynamic label doesn't respond

    In the following code, I add a label to a div. I expect, when I click this new label (Some error), the textbox will get focus (like the 'Click here'-label does). But it doesn't. When you run this example, you'll notice there's nothing wrong with the on-the-fly created html, shown in the textarea. BTW: I use IE 6.0.


    Code:
    <html>
    	<SCRIPT LANGUAGE="JavaScript">
    	<!--
    	function setError(obj, melding){
    		infoNode = document.getElementById("errors");
    
    		errorLabel = document.createElement("label");
    		var bullet_text = document.createTextNode(melding);
    		errorLabel.appendChild(bullet_text);
    		errorLabel.setAttribute("for", obj.id);
    		infoNode.appendChild(errorLabel);
    
    		// check created in textarea
    		document.all["putHere"].value = document.all["errors"].innerHTML;
    	}
    	//-->
    	</SCRIPT>
    
    	<body onload="setError(document.all['getFocus'], 'Some error');">
    		<div id="errors"></div>
    		<label for="getFocus">Click here</label><input type="text" id="getFocus">
    		<br><textarea id="putHere" rows=10 cols=80></textarea>
    	</body>
    </html>
    Last edited by badmuts; 12-07-2005 at 03:25 PM.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    a lot of IE only and weird things in your code...
    For instance, one of them:
    I expect, when I click this new label
    Where is your onclick event?

    Can you explain us what in fact you want to do?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You don't need an onClick-event, because of the for-attribute. This normally causes the textbox to get focus when the label is clicked (for-attribute has to contain the textbox's id). Try clicking on the label in front of the textbox.

    Why do I want this. I building a web app, in which we want to show (multiple) client side errors in the div. We want these errors to be clickable, so the corresponding control gets focus. Yes. I know this can be done with <a href>'s, but labels is cleaner.

    Made a small change to the sample code (innerHTML was outerHTML). This edited example runs on firefox. In that case the dynamic label does fire when clicked and the textbox gets focus. The problem is, our company doesn't use firefox, but IE.
    Last edited by badmuts; 12-07-2005 at 03:27 PM.

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by badmuts
    You don't need an onClick-event, because of the for-attribute. This normally causes the textbox to get focus when the label is clicked (for-attribute has to contain the textbox's id). Try clicking on the label in front of the textbox.
    Hm ... never heard about this. To trigger a function you need an event. This is a basic javascript core... So, you need to focus a textarea when click on the label placed in front of it?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    Senior Coder
    Join Date
    Sep 2005
    Posts
    1,791
    Thanks
    5
    Thanked 36 Times in 35 Posts
    No, the <label> tag should do that automatically.
    <label for="email">Email address:</label><input id="email" name="email type="text" />
    Will focus on the input when the label is clicked, forms should always be made like this.
    Sorry, don't know why it's not working though, there's nothing obviously wrong...

  • #6
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Found the solution:

    instead of
    Code:
    	errorLabel.setAttribute("for", obj.id);
    use
    Code:
    	errorLabel.htmlFor = obj.id;


  •  

    Posting Permissions

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