0

I have a pretty standard html form with a few input boxes. I have a small div under each textbox that displays directions when the textbox has focus (the rest of the time they are hidden). The divs can also change color and display error messages.

I would like to be able to have one javascript function to show directions on focus, one function to show errors on blur, one function to hide directions/errors etc.

The problem that I am running into is how to best associate the textboxes and their respective divs. I have used a naming convention in which I gave the textboxes an ID like field1 and then called their div field1Div. This worked OK but something tells me there is a better way to do this.

What is the "correct" way to associate the div and textbox?

fdsa
  • 1,379
  • 1
  • 12
  • 27
  • Have you considered using a `label`? The `for` attribute is meant to point to an `input` element, so fits your needs perfectly. – Frank van Puffelen Dec 21 '12 at 00:34
  • @FrankvanPuffelen The issue is that I'm trying to dynamically display instructions and I would also like to display error messages. Is there any advantage to using a label in this case? – fdsa Dec 21 '12 at 00:36
  • There is a documented semantic for relating a `label` to an `input` element, which seems to be what you asked for. A label can contain all so-called inline elements (similar to what you can put into a `p`), so as long as what you put in it falls into that category, it should work. – Frank van Puffelen Dec 21 '12 at 00:41
  • @FrankvanPuffelen That makes sense; I hadn't really considered using labels in that way. Is there a way that labels can be easily associated with their parent elements e.g. I want to get the label of this text box so I call method X – fdsa Dec 21 '12 at 00:42
  • I'm not sure that using labels for this is advisable. [WCAG 2.0 Input Assistance](http://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error.html) will probably have some suggestions. – steveax Dec 21 '12 at 01:28
  • @steveax I see what you are saying but in this case I'm not sure if accessibility is an issue. The purpose of this form is to repetitively enter data on the backend for administrative tasks. The "front end" that end users interact with does use labels correctly. – fdsa Dec 21 '12 at 01:32
  • [SCR32](http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/SCR32) in particular should be helpful. – steveax Dec 21 '12 at 01:36

2 Answers2

1

Labels might be the better way to go but if you want to use Divs - you can use something like this:

<html>
<head>
<script>
    function giveDirections(obj){  
obj.nextElementSibling.style.display="block"                
    }
    function hideDirections(obj){
    obj.nextElementSibling.style.display="none"
    }
    </script>
    </head>
<body>
    <input id="test" name="test" onfocus="giveDirections(this)" onblur="hideDirections(this)" />
    <div style="display:none">Hi I am some directions</div>
    </body>
</html>

http://jsfiddle.net/zq533/8/

using this.nextElementSibling - but I am not sure every browser supports - I tried it on FF,IE and Chrome and it worked.

I am sure there is a better way.

ecco88
  • 606
  • 2
  • 7
  • 16
  • I agree...this is a good solution that definitely works but it feels like their should be a better way - kind of like the naming technique or using labels. Thanks for your help – fdsa Dec 21 '12 at 01:11
  • look at http://stackoverflow.com/questions/285522/find-html-label-associated-with-a-given-input - it creates a label attribute for the inputs so you can easy refer to the label for hiding and showing. – ecco88 Dec 21 '12 at 01:18
  • I saw that one. Still don't like it as it seems kind of unnecessary to run through all that but that might be my best option. – fdsa Dec 21 '12 at 01:19
  • Even if you don't use labels for the instructions and error messages (which I'm not sure is a good idea), the inputs need labels. – steveax Dec 21 '12 at 01:23
  • jQuery is not an option? you could add to the input tag onfocus=\"$('label[for=\"+this.id+\"]').show()\" onblur=\"$('label[for=\"+this.id+\"]').hide()\" that is off the top of my head and should work. – ecco88 Dec 21 '12 at 01:25
  • @steveax The form is most likely going to be used by one person to enter a large amount of data so I am putting the "label" of the form inside the input box and then graying it out. When the user clicks the input box, the gray text will disappear, the background will turn yellow...this is where I want the label with more information to appear. – fdsa Dec 21 '12 at 01:26
  • @fdsa And what about vision impaired users? As soon as they tab to the input, the "label" will be cleared, leaving them with no clue what the input is for. – steveax Dec 21 '12 at 01:29
  • @ecco88 It seems to me that either the pre-processing labels as seen in stackoverflow.com/questions/285522/ or the jQuery in your comment seems like the two best options. If you update your answer to reflect this (or give me the go ahead to update your answer for you) I will accept it and then get to work:) – fdsa Dec 21 '12 at 01:38
  • @ecco88 Nevermind...I think I got what I was looking for in this particular case. Thank you for sticking with me though. – fdsa Dec 21 '12 at 01:50
1

You may define custom attributes for input boxes.

<html>
<head>
<script>
    function showHint(obj){  
        document.getElementById(obj.getAttribute("hintbox")).style.visibility = "visible";                  
    }
    function hideHint(obj){
        document.getElementById(obj.getAttribute("hintbox")).style.visibility = "hidden";  
    }
    </script>
    </head>
<body>
    <input hintbox="div1" onfocus="showHint(this)" onblur="hideHint(this)" />
    <div id="div1" style="visibility:hidden">hint 1</div>
    <input hintbox="div2" onfocus="showHint(this)" onblur="hideHint(this)" />
    <div id="div2" style="visibility:hidden">hint 2</div>
    </body>
</html>​

http://jsfiddle.net/YhefV/

Ertug
  • 301
  • 1
  • 5