Member Avatar for mbarandao

good day:

I'm using an ajax script that receives a value into an input box and thus performs a function. I need to invoke the function immediately after the input box has a value. Currently the box has to lose focus in order for the function to work.

What is the correct event handler for this to work?

I have this now

onkeyup="showResult2(this.value)"

which is obviously not what I need.

This is the ajax

<script type="text/javascript">
function showResult2(strs)
{
if (strs.length==0)
  { 
  document.getElementById("livesearch2").innerHTML="";
  document.getElementById("livesearch2").style.border="0px";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("livesearch2").innerHTML=xmlhttp.responseText;
    document.getElementById("livesearch2").style.border="1px solid #A5ACB2";
    }
  }
xmlhttp.open("GET","getOilChangeDate.php?q="+strs,true);
xmlhttp.send();
}
</script>

Any thoughts on this!
Mossa

Edited by mbarandao because: n/a
  • 2 Contributors
  • 6 Replies
  • 293 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by mbarandao
Member Avatar for vsmash

onblur is the lose focus event.

Why is onkeyup not what you need? Seems perfect for what you want.

Member Avatar for mbarandao

Thank you for the responses and the suggestion. Unfortunately, that option does not works.

onblur works in the same manner as the onkeyup, whereas the function is invoke only after the input box has been populated and loses its focus.

I have tried also the onchange handler, this cause the function to be totally unresponsive.

I should note that these input boxes are dynamically populated with values from db. So it is not actually user inputted --not sure if that matters!

Shoud I modify anything within the ajax function itself--function include in earlier post?

Again, I want to fire the function as soon as there is value in the box not after it is exited.


Any other thoughts on this!

Edited by mbarandao because: n/a
Member Avatar for vsmash

"I should note that these input boxes are dynamically populated with values from db. So it is not actually user inputted --not sure if that matters!"

YES! That totally matters. onkeyup is referring to the user's keyboard. It isn't working because the user's keyboard isn't being touched. Ideally you run your code at the same time the db populates the field if possible.

Otherwise you need to monitor the field(s) using setTimeOut().
eg:

<script language=javascript>
	// initialize your field variable
	var foofield='';

	// monitoring function
	function checkfoofield(){
		var currentval = document.myform.foo.value;
		if(currentval!=foofield){
			// field has changed
			foofield=currentval; // update the foofield var so it doesn't trigger until it's changed again
			// this is where you call your showresult2() function
			}
	}
	
	//	also using onload, or jquery document ready function set the timeout to monitor the field
</script>
	<body onload="setTimeOut('checkfoofield,200');">
<form name=myform id=myform>
FooField:&nbsp;&nbsp;<input type=text name=foo value="" id=foo size=40>
</form>
Member Avatar for vsmash

setTimeOut syntax above is not quite right:

setTimeOut('checkfoofield',200)
Member Avatar for mbarandao

Thank you very much for the help above. If may ask the following:

I have three fields each associated with a different function:

clientid associated with function showResult2(strs)
clientid2 associated with function showResult2(strs)
clientid3 associated with function showResult3(strss)

My apology but I'm not quite sure how I would implement this within the example you provided. Could you touch on this if possible?

Member Avatar for mbarandao

Issue Resolved! Great thanks to Airshow.

Final solution below:
My populating code, --decided it was better to put everything in JQuery.

var currentClientID = false;
function getClientData() {
	var clientId = $('#clientID').val().replace(/[^0-9|a-z|A-Z]/g,'');//here to incorporate the client id with numbers and letters
	if(clientId.length >0 && clientId!=currentClientID){//here to change the client id length
		$.ajax({
			url: 'getClient.php?getClientId=' + clientId,
			type: "GET",
			success: function showClientData(response) {
				var formObj = document.forms["clientForm"];
				eval(response);
				currentClientID = clientId;
			}
		});
	}
}

to call the functions, I did this:

$(document).ready(function() {
	<!-- for auto suggest for typing license plate number-->
	$("#clientID").autocomplete("autocomplete_list.php", {
		width: 260,
		matchContains: true,
		selectFirst: false
			}).keyup(function() {
		//showHint(this.value);//invokes showHint on population--no keyboard action required
	}).blur(function() {
		getClientData();
		showHint(this.value);//invokes showHint on population--no keyboard action required
		showResult(this.value);//invokes showHint on population--no keyboard action required
		showResult3(this.value);//invokes showHint on population--no keyboard action required
	}).focus();

	$("#clientid3").blur(function() {
		showResult3(this.value);
	}).blur();
	
	$("#clientid").blur(function() {
		showResult(this.value);
	}).blur();

Hope this helps someone else!

Thanks for all of the thoughtful posts!
Mossa--

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.