Select Box Trigger Events in JavaScript

Question

I have JavaScript creating a generic select box when you double click in a table cell and when an option is clicked, the select box is removed and the option selected is recorded. The table cell displays the option selected.

However, if the table cell is double clicked and the select box is created, but then you just click out of the select box without selecting an option, the select box remains and the rest of the page from then on breaks.

I want the select box to be removed if the focus is lost, but the onblur method that works with input boxes doesn't seem to work with select boxes.

Does anyone know what event is triggered?

JavaScript code when table cell is double clicked to make a select box:

var object_input = document.createElement ("SELECT");   //Put an select box in the cell
    
object_input.setAttribute("name", "course_price_select");
object_input.setAttribute("id", "course_price_select");
object_input.style.width = (current_cell.clientWidth - 20) + "px";
        
object_input.attachEvent ("onblur", focus_lost);  
object_input.attachEvent ("onkeypress", checkForEnter);

These two lines don't work! (focus_lost and checkForEnter methods start with alert('hi'); so I know they are not being triggered)

object_input.onchange = function() {focus_lost()};

//Populate with options....

attachEvent is specific to IE. Try using addEventListener too. — BenM
– BenM, Commented Feb 20, 2013 at 11:18
Odd, I use attachEvent in my input boxes and it works fine on all browsers. — Pippa Rose Smith
– Pippa Rose Smith, Commented Feb 20, 2013 at 11:25
Sorry, that simply can't be. For example > jsfiddle.net/sFx7u/1 does not trigger in Chrome unless you use the sample in my answer. It triggers Uncaught TypeError: Object #<HTMLInputElement> has no method 'attachEvent'. attachEvent is IE-only! — BenM
– BenM, Commented Feb 20, 2013 at 11:28
I've changed it to your code below, just in case. It's been working for years but I must have some other code somewhere to make it work. — Pippa Rose Smith
– Pippa Rose Smith, Commented Feb 20, 2013 at 11:32

BenM · Accepted Answer · 2013-02-20 11:24:00Z

1

attachEvent is an IE only function. You should also bind your events using addEventListener, for example:

if(object_input.addEventListener)
{
    object_input.addEventListener('blur', focus_lost);  
    object_input.addEventListener('keypress', checkForEnter);
}
else
{
    object_input.attachEvent('onblur', focus_lost);  
    object_input.attachEvent('onkeypress', checkForEnter);
}

You can see a jsFiddle demo here.

You should note that addEventListener does not require the events to be prepended with on, while attachEvent does.

answered Feb 20, 2013 at 11:24

BenM

53.3k26 gold badges116 silver badges172 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pippa Rose Smith Over a year ago

Thanks very much Ben! Worked great. (apparently I can't accept your answer for 4 minutes, so bare with me there). But thanks again for your quick response. Much appreciated.

Collectives™ on Stack Overflow

Select Box Trigger Events in JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related