ansaurus

Question

HTML select element onchange trigger for already selected option

Answer 1

A:

Question 1: I think the event for that would be "onSelect".

Question 2: I think the "onSelect" event would work for that as well, not 100% sure. Something to try at least and mess with.

Brad F Jacobs 2010-07-28 15:21:44

Nope, onselect is also not working :(. In fact, onselect is not even getting fired for either selecting drop-down, re-selecting some option, releasing the mouse, clicking anywhere else in the document. Any ideas what it does? (Sorry, I am a novice in javascript and HTML)

Shrey 2010-07-28 15:27:54

Answer 2

+1 A:

Well I think I don't get you 100%, but some things I can suggest here are:

bind a click event handler to the select

$("#garden").bind('click', function() {
     alert($(this).find('option:selected').text());
});

bind a focusout event handler

$("#garden").bind('focusout', function() {
     alert($(this).find('option:selected').text());
});

and of course bind the change event handler which you already got. The click event handler might be a little bit tricky since it would fire every time you click on the element. But if you don't alert() it every time it should not be a problem at all, you got the current selection and can do with it whatever you want.

jAndy 2010-07-28 15:31:40

Wow, Thanks for this. It works almost perfectly for me :D

Shrey 2010-07-28 15:39:27

Answer 3

+1 A:

You can manually trigger the event when you load the page:

$(document).ready(function() {
    $("#garden").bind("change", function() {
        // ...
    }).change();
});

This will pick up the initial value - so I think it makes your second question irrelevant. This won't work in all situations (I'm hoping that your actual handler isn't an alert but actually something useful!), but could come in handy...

Jon 2010-07-28 15:34:44

Hmm, that is an interesting suggestion. Will get back after trying it out.

Shrey 2010-07-28 15:36:29

Answer 4

+1 A:

Are you sure that whatever you are doing is the most sensible way to do things? It seems like very strange UI to have different behaviour if you select an item by leaving it as the default compared to selecting it by opening up the select and selecting the currently selected item.

If you are wanting to make them explicitly choose flowers then maybe you want a dummy entry at the top that says "Please choose one" that will then mean they are forced to actually change to flowers if that is what they want. It would probably be simpler than complicating your code with more event handlers and such like.

If you do really need to go down the path you are following then you may want to consider what the behaviour is if somebody just tabs to the control and then past it. ie should that fire your script off as well?

Edit to respond to comment at length:

What you will want to do in this case is hook into the onSubmit handler of the form. This is called, as you can imagine, when the form submits. If your handler returns false that form will not be submitted.

This handler is traditionally where you would do client side validation by examining the state of whatever form elements you care about and checking their values are valid. In this case you'd check if the value of garden was "N/A" or whatever you set it to and if so pop up an alert (in the simplest case) and possibly mark whichever fields need attention. Then the user will choose a valid entry (hopefully) and next time he submits your validation will succeed, you return true in the handler and the user can be happy he submitted valid input.

As always though the standard disclaimer that any data can be sent to your server by a determined user so you should not assume that just becasue you had this validation that you are getting valid data on the server. :)

Chris 2010-07-28 15:37:22

@Chris, Actually, what I asked was just because I was trying out event handling before incorporating in my application. I do understand that present situation (default vs explicit selection based js trigger) is a bad UI - and "Please choose one" is exactly what I want. Problem is that user may end up choosing "Please choose one" in which case I need to convey to him that your actions are not valid (I can be passive as well - doing nothing - but that is not what my aim is). Another issue being, restricting him not to select "Please choose one" - any hints on how to do this?

Shrey 2010-07-28 15:52:39

@Shrey: I responded to your question in my answer so it didn't get scrunched into a comment (which I think it was too logn for anyway).

Chris 2010-07-28 16:00:21

@Chris : Thanks a lot for your answer. That does make sense and seems the most obvious thing I should have done :) .. Thanks once again. (Bumping up the comment as I can't do the same for 'answer' twice).

Shrey 2010-07-29 04:33:43

@Shrey: My pleasure. Its what this place is here for. :)

Chris 2010-07-29 08:17:53

ansaurus

tags:

views:

answers:

HTML select element onchange trigger for already selected option

related questions