Question

I have a div which hides a select box. When a user clicks on the div it disappears and shows the select box. Then when the user clicks away from the select i want the div to show again and essentially cover it up.

so, to hide the div I have the following:

onclick="document.getElementById(\'infoi'.$div_i.'\').style.display = \'none\';"

When the user has touched the select and clicks away I have the following which covers the select again:

<select name="g_name" onchange="this.form.submit();" onblur="document.getElementById(\'infoi'.$div_i.'\').style.display = \'block\';"  style=width:170px;>

for this to work as i want it to though, the user has to actually click the select, even without selecting anything, for it to gain focus and therefore the onblur will turn the div back on.

So, I try the following to hide the div and set the focus on the select:

onclick="document.getElementById(\'infoi'.$div_i.'\').style.display = \'none\'; document.getElementById(\'g_name\').focus();"

Bit it simply does not work, any ideas?

Answer 1

I have a working example of what I think you are after here http://jsfiddle.net/Znct3/10/
looking at your code you were applying focus to an element with an ID of g_name but your select only has a name of g_name