How do you update a form field using AJAX instantly on typing? I tried using onChange as the trigger for the javascript function, but that didn't update the contents immediately after each letter was typed - instead I also had to mouse click or change the focus using tab or something in order for the contents to be updated via the function call. Whereas something like Google Suggest updates the form contents immediately after each letter is typed. How is that accomplished?
As MMJ said "onkeyup", if it's an event listener for firefox, mozilla, opera it's "keyup", IE it's always "onkeyup" Add an event... var frm = document.getElementById('id_of_element_to_listen_to'); if(window.addEventListener) { frm.addEventListener('keyup', function_name_the_event_fires, false); } else { frm.attachEvent('onkeyup', function_name_the_event_fires); } Code (markup): Remove an event... var frm = document.getElementById('id_of_element_to_remove_event_listener'); if(window.removeEventListener) { frm.removeEventListener('keyup', function_name_the_event_fires, false); } else { frm.detachEvent('onkeyup', function_name_the_event_fires); } Code (markup):
If you use dataman's code than you will have to put it in the onload or after the element's markup. You could also use the ternary operator. window.addEventListener ? frm.addEventListener('keyup', function_name_the_event_fires, false) : frm.attachEvent('onkeyup', function_name_the_event_fires);
Thanks for the help Is the window.addEventListener condition really necessary though? onkeyup worked for me in both FireFox and IE, and keyup worked in neither. Here's how I was doing it: <form><input type=text id="id1" onkeyup="test1()">Text within ID1 is here.</input></form> <div id="id2">Text here is within ID2.</div> Code (markup): And the javascript (changes contents of id2 into uppercased contents of what is typed into the id1 form): function test1(){ try { xmlHttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } var var1 = document.getElementById("id1").value; // ajax-do.php simply returns an strtoupper() of the pass variable var url = "ajax-do.php?var1="+escape(var1); xmlHttp.open("GET", url, true); xmlHttp.onreadystatechange = updatePage; xmlHttp.send(null); } function updatePage(){ if (xmlHttp.readyState == 4) { var response = xmlHttp.responseText; document.getElementById("id2").innerHTML = response; } } Code (markup): Is there something wrong or not robust with the way I did it? And if onkeyup doesn't work in some browsers, can one simply add both onkeyup and keyup triggers, e.g.: <form><input type=text id="id1" onkeyup="test1()" keyup="test1()">Text within ID1 is here.</input></form> Code (markup):
on+name (onkeyup) is fine for HTML element assignments, event listeners are different, to support all browsers you need two sets of rules. So this works for all browsers... <input type=text id="id1" onkeyup="test1()"> // event assigned to the element But for event listener... <input type=text id="id1"> mozilla, firefox, opera, safari, netscape (addEventListener, removeEventListener) keyup only IE, opera[8 understands this] (attachEvent, detachEvent) onkeyup only
I think you are confusing Kadence. @Kadence: There are three different ways to assign an event listener. Inline (as an attribute), element.onclick, and element.addEventListener (attachEvent for IE). Although each one is a bit different each one reaches almost the same solution. An excellent read on this subject is http://www.quirksmode.org/js/introevents.html. It is quite lengthy though.
Thanks, I got this to work: <body onload="load()"> <form><input type=text id="id1">Text within ID1 is here.</input></form> Code (markup): With the JavaScript: function load(){ frm = document.getElementById("id1"); // For FireFox and Opera : For IE window.addEventListener ? frm.addEventListener('keyup', test1, false) : frm.attachEvent('onkeyup', test1); } Code (markup): Note that apparently capitalization matters, which was causing problems for me - both 'keyup' and 'onkeyup' have to be lowercase it seems.
Good read, though I'm still uncertain as to which event handler assignment method is preferred He says: But he also says the inline model is bad because behavior and structure should be separated, and the traditional model is bad because it "has some nasty problems as soon as you want to add more than one event handler to the same event on the same element." So which model should one actually use? Inline, traditional [element.onclick], or the conditional W3C/Microsoft method [window.addEventListener ? element.addEventListener(...) : element.attachEvent(...);]?
Thanks. Considering that though, what do people think is the best method of doing this? Is it the conditional addEventListener/attachEvent way used above? Since that article didn't seem to endorse that method either.
Window.onload is pretty good: window.onload=function(){ function1() function2() } Although it has it's drawbacks: http://dean.edwards.name/weblog/2005/09/busted/ http://peter.michaux.ca/article/553
Interesting. More complex choices What method do the big frameworks like Prototype, Dojo, YUI, etc. tend to use/advise using?
The latter (DOMContentLoaded, etc.). If you don't have anything too heavy on the page than you can just use window.onload.