What 'state' is a select in when the user clicks it?

[njdubois]

I have a data form that sends each field to a php file to be saved to the database via AJAX.

There is one select/dropdown on this form that is being troublesome.  This select adds the selected item to a listbox below.  

They either click it and then click the item they want and it adds it to the listbox.  Or they tab to it and hit the down key to the item they want and it adds it to the listbox.

 

If I were to program in the ability for only one of these options to work I can make it work no problem, But I can't figure out where to even start having to account for both options.

 

onkeyup="training_key_press(event,this.name,this.value);"

onfocus="clear_state(this.name);"

 

training_key_press is:

function training_key_press(e,nme,new_item) {

	var key_pressed=e.keyCode? e.keyCode : e.charCode
	clear_state(nme);
	if (key_pressed==13) {
		add_training_item(new_item);
	}
}

 

And all clear_state does is change the icon next to the current object to an explanation mark stating that something has been changed and its waiting for you to be done to save it.

 

Shown above is how I do it if they didn't use a mouse.  If I added onchange, it would work with the mouse but then every time they hit the down key it would add that item to the listbox.  Onclick will add the last selected, and the newly selected.  OnBlur wont work, because they might add 2,3 or 4 maybe more items.

 

Using an add button next to the dropdown is NOT an option.

 

So my question is, can you determine if when the dropdown(select) was clicked on, was the dropdown menu open and clicked on, or was the little down button clicked on?

This would be nice because then I can trap that they selected something!  If this isn't an option, whats the best way to handle this?  I'm confused!

 

Thanks so much!

 

Nick

[Zane]

This is one of the many many reasons to learn jQuery.  The change() function provided by jQuery should cover every aspect of it being changed.. whether you used the keyboard of mouse.

 

 

You may also want to check out this answer for cross-browser support so the keyboard change works all of the time

http://stackoverflow.com/a/12401844/401299

Edited March 19, 2013 by Zane

[njdubois]

Is there a way to determine what caused the change event.  IE, did the user click on an item? Or was the select tabbed to and the user pressed the down key a few times?

 

Thinking about this a little.  I guess I could use keypressed and trap the enter key and use the trapped enter key to save the selected item, and then use onclick.  Store the value of the select when it was clicked, and wait for that value to change when they click it again.

 

Ok.  I did some testing.  I believe I got the functionality I'm looking for.

 

This is in my select tag:

onkeyup="training_key_press(event,this.name,this.value);" onfocus="clear_state(this.name);" onclick="test_for_change(this.name, this.value);"

var last_value;

function test_for_change(nme, str) {
	clear_state(nme);

	if(last_value=="") {
		last_value=str;
	}

	if(str!=last_value) {
		add_training_item(str)
		last_value=str;
	}
}

 

 

And I set last_value to the current value in the select when I press any key.  So this way, they can hit the down key, it sets last_value to that value, when they hit enter, it calls add_training_item.  And if they need to use the mouse, last_value will be set to the current value of the select, and be able to test against that when they do first click on the select.

 

This is my solution to this problem.  If there is a better way to achieve this do let me know!

 

Thanks for the reply!

 

Nick