Jump to content
sepoto

What event is fired when a drop down entry is selected for a textbox?

Recommended Posts

Does anyone know what event is fired when a Dropdown entry is selected for an input of type Textbox? I am using the AutoComplete Widget of the jQuery UI and I am attempting to perform some functions on the style of the Textbox when a user selects one of the entries. P.S. I'm also wondering is there a way a can track which events are being triggered as I use controls on the page perhaps maybe Google Chrome Developer Tools or FireFox Develpor Tools have this functionality?

Edited by sepoto

Share this post


Link to post
Share on other sites

Possibly the onchange event, but if this is autocomplete I'm not sure if there's a standard for it.Normally, for text inputs, the onchange event only fires the moment the field loses focus. The only way I know to test events is to actually put multiple event handlers on the element and check which ones are fired.

Share this post


Link to post
Share on other sites

I have been wondering about that myself, but so far I have not needed to figure it out. Onchange? Mouseup?

Share this post


Link to post
Share on other sites

I tried a select tag in a form. When I used the onchange event with it and directed it to a function with form.submit() it didn't post. The onchnage would work to alter value in javascript but I couldn't get it to post. If you figure it out let me know. Good luck.

  • Like 1

Share this post


Link to post
Share on other sites
 <!doctype html><html lang="en"><head>    <meta charset="utf-8" />    <title>jQuery UI Autocomplete - Default functionality</title>    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>    <link rel="stylesheet" href="/resources/demos/style.css" />    <script>    $(function() {        var availableTags = [            "ActionScript",            "AppleScript",            "Asp",            "BASIC",            "C",            "C++",            "Clojure",            "COBOL",            "ColdFusion",            "Erlang",            "Fortran",            "Groovy",            "Haskell",            "Java",            "JavaScript",            "Lisp",            "Perl",            "PHP",            "Python",            "Ruby",            "Scala",            "Scheme"        ];         $( "#tags" ).autocomplete({            source: availableTags        });      });    </script></head><body> <div class="ui-widget">    <label for="tags">Tags: </label>    <input id="tags" /></div> <script>$("#tags").change(function() {alert('Handler for .change() called.');});</script></body></html>

It isn't working yet. This is what I have. I think if I work with it some more it could potentially be the answer nut it just isn't yet...

Share this post


Link to post
Share on other sites

You'll need to look through the autocomplete code to see exactly what it's doing. It may add support for its own new events or callbacks.

Share this post


Link to post
Share on other sites
http://docs.jquery.c....8/Autocompleteautocompleteselect event? => http://docs.jquery.com/UI/API/1.8/Autocomplete#event-select Edited by thescientist
  • Like 1

Share this post


Link to post
Share on other sites

This code is quite functional. I really like it. Thank you thescientist for pointing this out to me.

 <!DOCTYPE html><html><head><link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script>$(document).ready(function() {$("input#autocomplete").autocomplete({source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]});});</script> </head><body style="font-size:62.5%;"> <input id="autocomplete" /> <script>$( "input#autocomplete" ).autocomplete({   select: function(event, ui) { alert("Alert!"); }});</script></body></html>

Edited by sepoto

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...