Social Buttons
  1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Updating AJAX form field instantly - onChange or other trigger?

Discussion in 'JavaScript' started by Kadence, Dec 27, 2007.

0
  1. #1
    How do you update a form field using AJAX instantly on typing?
    SEMrush
    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?
     
    Kadence, Dec 27, 2007 IP
    SEMrush
  2. MMJ

    MMJ Guest

    Messages:
    460
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Most likely onkeyup.
     
    MMJ, Dec 28, 2007 IP
  3. dataman

    dataman Peon

    Messages:
    94
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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):
     
    dataman, Dec 28, 2007 IP
  4. MMJ

    MMJ Guest

    Messages:
    460
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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);
     
    MMJ, Dec 28, 2007 IP
  5. Kadence

    Kadence Active Member

    Messages:
    139
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #5
    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):
     
    Kadence, Dec 29, 2007 IP
  6. dataman

    dataman Peon

    Messages:
    94
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #6
    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
     
    dataman, Dec 29, 2007 IP
  7. MMJ

    MMJ Guest

    Messages:
    460
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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.
     
    MMJ, Dec 29, 2007 IP
  8. Kadence

    Kadence Active Member

    Messages:
    139
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #8
    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.
     
    Kadence, Jan 1, 2008 IP
  9. Kadence

    Kadence Active Member

    Messages:
    139
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #9
    Good read, though I'm still uncertain as to which event handler assignment method is preferred :confused:

    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(...);]?
     
    Kadence, Jan 1, 2008 IP
  10. MMJ

    MMJ Guest

    Messages:
    460
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Inline, for your needs, is fine.
     
    MMJ, Jan 1, 2008 IP
  11. Kadence

    Kadence Active Member

    Messages:
    139
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #11
    Is there a 'best practice' standard out there though?
     
    Kadence, Jan 2, 2008 IP
  12. MMJ

    MMJ Guest

    Messages:
    460
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Yeah, its preferable to separate the js from the content.
     
    MMJ, Jan 2, 2008 IP
  13. Kadence

    Kadence Active Member

    Messages:
    139
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #13
    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.
     
    Kadence, Jan 4, 2008 IP
  14. MMJ

    MMJ Guest

    Messages:
    460
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #14
    MMJ, Jan 5, 2008 IP
  15. Kadence

    Kadence Active Member

    Messages:
    139
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #15
    Interesting. More complex choices :)

    What method do the big frameworks like Prototype, Dojo, YUI, etc. tend to use/advise using?
     
    Kadence, Jan 5, 2008 IP
  16. MMJ

    MMJ Guest

    Messages:
    460
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #16
    The latter (DOMContentLoaded, etc.).

    If you don't have anything too heavy on the page than you can just use window.onload.
     
    MMJ, Jan 5, 2008 IP