Autofill form fields, almost working

[acoder]

What values does the getcustnum query return? In other words, what values do you have for the options for the select drop-down? View the source in your browser.

[bonneylake]

Hey Acoder,

According to it i have 1 and 1024 in there. i viewed the drop down and looked at the source.

<option value="222">222</option>

<option value="777">777</option>

<option value="555">555</option>

<option value="333">333</option>

<option value="32">32</option>

<option value="234">234</option>

<option value="324">324</option>

<option value="3">3</option>

<option value="1024">1024</option>

<option value="666">666</option>

<option value="444">444</option>

<option value="1">1</option>

<option value="1111">1111</option>

<option value="3333">3333</option>

i am baffled.

Thank you,
Rach

[acoder]

The most likely cause is that values need to be sorted, so modify your query to return the values in order.

[bonneylake]

Hey Acoder,

Alrighty i got that right so now 1 comes up before the other (yay). But still running into another problem *sigh*. When i try to type something into customer number that doesn't exist in the drop down an go to another field it complete deletes what i had tried to type before.

heres the html

Customer Number*:<input type="text" name="custnum" id="clientID" value=""  ONKEYUP="autoComplete(this,this.form.customer,'value',false)"  />
<SELECT NAME="customer" id="options"
onChange="this.form.custnum.value=this.options[this.selectedIndex].value;javascript:initFormEvents();">
<cfoutput query="getcustnum">
<option value="#fk_custNum#">#fk_custNum#</option>
</cfoutput>
</SELECT>

heres the javascript that appears with the html

var ajax = new sack();
	var currentClientID=false;
	function getClientData()
	{
		var clientId = document.getElementById('clientID').value;
			currentClientID = clientId
			ajax.requestFile = 'getClient.cfm?custnum='+clientId;	// Specifying which file to get
			ajax.onCompletion = showClientData;	// Specify function that will be executed after file has been found
			ajax.runAJAX();		// Execute AJAX function			
		
	}
	
	function showClientData()
	{
		var formObj = document.forms['page1'];	
		eval(ajax.response);
	}
	
	
	function initFormEvents()
	{
		document.getElementById('clientID').onblur = getClientData;
		document.getElementById('clientID').focus();
		document.getElementById("options").onchange = getClientData;
	}
	
	
	window.onload = initFormEvents;

Thank you,
Rach

[acoder]

Why are you calling initFormEvents( ) in the onchange?

[bonneylake]

Hey Acoder,

well i did that so that when i click on the drop down box it will auto fill the form fields instead of when i type in the value into the input box an then click enter or go to click into another field. Could that be causing the problem?

Thank you,
Rach

[acoder]

In that case, you just need to call getClientData() instead of initFormEvents.

[bonneylake]

Hey Acoder,

alrighty did that but i am still getting errors. When i did it on internet explorer i got unterminated string constant as the error. an when i did it in firefox i got this error
unterminated string literal an then this line

formObj.notes.value = "notes

heres the javascript that is on the form.

<SCRIPT LANGUAGE="JavaScript" SRC="autocomplete.js"></SCRIPT>
	<script type="text/javascript" src="ajax.js"></script>
	<script type="text/javascript">

var ajax = new sack();
	var currentClientID=false;
	function getClientData()
	{
		var clientId = document.getElementById('clientID').value;
			currentClientID = clientId
			ajax.requestFile = 'getClient.cfm?custnum='+clientId;	// Specifying which file to get
			ajax.onCompletion = showClientData;	// Specify function that will be executed after file has been found
			ajax.runAJAX();		// Execute AJAX function			
		
	}
	
	function showClientData()
	{
		var formObj = document.forms['page1'];	
		eval(ajax.response);
	}
	
	
	function initFormEvents()
	{
		document.getElementById('clientID').onblur = getClientData;
		document.getElementById('clientID').focus();
		document.getElementById("options").onchange = getClientData;
	}
	
	
	window.onload = initFormEvents;
	</script>

an here is the form itself

Customer Number*:<input type="text" name="custnum" id="clientID" value=""  ONKEYUP="autoComplete(this,this.form.customer,'value',false)"  />
<SELECT NAME="customer" id="options"
onChange="this.form.custnum.value=this.options[this.selectedIndex].value;javascript:getClientData();">
<cfoutput query="getcustnum">
<option value="#fk_custNum#">#fk_custNum#</option>
</cfoutput>
</SELECT>

Thank you,
Rach

[acoder]

That's a line in your Coldfusion code. Check that it's returning the correct data by running the Coldfusion page with the customer number that you're testing with. See what the output is.

[bonneylake]

Hey Acoder,

Yep i am getting the right information. i was messing with it earlier an somehow got the error to go away (not sure what i did). But now it is working correctly. I thought i had information in customer number 1024, but i guess i didn't which is why nothing was working right (blond moment).

but i got one more question. how would i make it so instead of if auto populating after i type the number in an try to do something else. how could i make it so that it will only autopopulate once i select the option that auto populated in the drop down box?

Thank you again for all the help :),
Rach

[acoder]

Remove this line:
[CODE=javascript]document.getEle mentById('clien tID').onblur = getClientData;[/code]

[bonneylake]

Hey Acoder,

Alrighty i did that but i got one last problem. When i type in a number in the customer number. an the drop down box says the same number as the customer number. when i go to click on it, it wont autofill. if i choose another option it will autofill with that customer number information. an if i go back to the number that i was trying to autofill in the first place it will. but when i go to click on it when i first tell it to autopopulate it wont. any suggestions?

	function initFormEvents()
	{
		  <!---document.getElementById('clientID').onblur = getClientData;--->
        document.getElementById('clientID').focus();
        document.getElementById("options").onchange = getClientData
	
	}

Thank you,
Rach

[acoder]

You could try adding this line to initFormEvents:
[code=javascipt]document.getEle mentById("optio ns").onblur = getClientData;[/code]The only problem with it is that it could result in a lot of unnecessary Ajax calls. To avoid that, you could check that a request has not already been made via onchange.

[bonneylake]

Hey Acoder,

is there anyway i could do something besides onblur?because when i do onblur it wont autofill the form until i click on another field. an well i don't got the smartest tools in the shed where i work an they would think it was not working.so was just wondering if i could use something else? trying to think of an easy way that it will do it an not confuse the people who use it. i was thinking of doing onclick. but if you do onclick then it will show all the dropdown fields an then it might confuse them on which number they actually choose. so if you got a suggestion on something i could use that would do the job an not confuse them that be great :).

here is what i got in the function intFormEvents

function initFormEvents()
	{
		<!---  document.getElementById('clientID').onblur = getClientData;--->
		document.getElementById("options").onblur = getClientData;
        document.getElementById('clientID').focus();
        document.getElementById("options").onchange = getClientData;
		
	
	}

but thank you for all the help :),
Rach

[acoder]

What you can do is use a button and call the function onclick.