Link to home
Avatar of coldchillin
coldchillin

asked on

Pass variable from query in select box onchange event

I'm trying to pass the applicantID through the onchange event in the fillForm function, how do I do that???

<select name="applicantList" onchange="fillForm(this.value)">
      <option value="">--choose an applicant--</option>
      <optgroup label="Applicant List">
      <cfoutput query="applicantResultset">
            <option value="#applicantID#">#fname# #lname#</option>
      </cfoutput>
      </optgroup>
</select>
Avatar of hielo
hielo
Flag of Wallis and Futuna image

fillForm(this.options[this.options.selectedIndex].value)
onchange="fillForm(this.options[this.selectedIndex].value);"
Avatar of coldchillin
coldchillin

ASKER

the value I am getting is "undefined"


<select name="applicantList" onchange="fillForm(this.options[this.selectedIndex].value);">
      <option value="">--choose an applicant--</option>
      <optgroup label="Applicant List">
      <cfoutput query="applicantResultset">
            <option value="#applicantID#">#fname# #lname#</option>
      </cfoutput>
      </optgroup>
</select>

function fillForm(applicantID){
      alert(applicantID);
        document.getElementById("licenseNum").value=applicantID;
}


make sure the id elements you are referring to exist on the document. Here is a complete working example:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript"><!--
function fillForm(applicantID){
      //alert(applicantID);
        document.getElementById("licenseNum").innerHTML=applicantID;
         document.getElementById("y").value=applicantID;
}
//--></script>
<form>
<select name="applicantList" onchange="fillForm(this.options[this.selectedIndex].value);">
      <option value="">--choose an applicant--</option>

     
            <option value="">#fname# #lname#</option>
            <option value="1">#fname# #lname#</option>

</select>
<input type="text" name="x" id="y" value=""/>
</form>
<div id="licenseNum"></div>

</body>
</html>
Also, make sure that your <option> tags have the following format:
<option value="someValue">somelabel</option>
as opposed to
<option>somelabel</option>

I understand that but what I am doing is this.

Client Side call to Server Side query returns to client which then calls again to the server to return to the client.

I'm just having problems with returning a query result to a javascript function.
what you are doing and what you think you are doing may be two very different things...

javascript is all client side... your client side select element is calling your client side fillForm function.  
Basically this is ColdFusion and AJAX so it is both.

Here's the revised process:

Search form taking first and last name to javascript function which loads page containing Server Side query for information. Instead of a call back function I am going to populate the option value with all of the data, pass that as a comma separated list.

Once passed to fillForm I will parse the list and set the relevant form tags. I just don't know how to identify individual elements in a list via javascript.
The process goes like this:
a. user types your page's url (at this point the user still does not have any html from your page)
b. browser contacts your server (at this point the user still does not have any html from your page)
c. server accepts your request and executes your cold fusion script. The important part here is "executes".
In the following code:
<select name="applicantList" onchange="fillForm(this.value)">
      <option value="">--choose an applicant--</option>
      <optgroup label="Applicant List">
      <cfoutput query="applicantResultset">
            <option value="#applicantID#">#fname# #lname#</option>
      </cfoutput>
      </optgroup>
</select>

the tags:
<cfoutput query="applicantResultset">  and   </cfoutput> are not html tags. Thus your server invokes the cold fusion engine to execute that portion. I query is performed that is supposed to return values.
Let's assume the query returns the following two records:
1 John Doe
2 Mrs. Doe

<select name="applicantList" onchange="fillForm(this.value)">
      <option value="">--choose an applicant--</option>
      <optgroup label="Applicant List">
      <cfoutput query="applicantResultset">
            <option value="1">John Doe</option>
            <option value="2">Mrs. Doe</option>
      </cfoutput>
      </optgroup>
</select>

Once the server is done processing the script, it begins sending the HTML result to the browser.
d. Browser receives the HTML
e. browser closes the connection to the server.
f. browser displays/renders the received HTML for the user

Under what circumstances could you get "undefined"? If your query is not returning any results or even if the returned results are literally 'undefined'. In such case you could end up with something like:
<select name="applicantList" onchange="fillForm(this.value)">
      <option value="">--choose an applicant--</option>
      <optgroup label="Applicant List">
      <cfoutput query="applicantResultset">
            <option value="undefined">John Doe</option>
            <option value="undefined">Mrs. Doe</option>
      </cfoutput>
      </optgroup>
</select>
but that is a server issue, not Javascript. Javascript is correctly reporting what is in between the value attribute of the option tag. You need to open the page in a browser, and then examine the source code that is being generated by the server-side script.  It would be nice if you had a url to look at.
NOTE: the following code needs to be on the same cfm file:
<form ...>
<select name="applicantList" onchange="fillForm(this.options[this.selectedIndex].value);">
      <option value="">--choose an applicant--</option>
      <optgroup label="Applicant List">
      <cfoutput query="applicantResultset">
            <option value="#applicantID#">#fname# #lname#</option>
      </cfoutput>
      </optgroup>
</select>
<input type="text" name="licenseNum" id="licenseNum" value=""/>

</form>
<script type="text/javascript">
function fillForm(applicantID){
      alert(applicantID);
        document.getElementById("licenseNum").value=applicantID;
}
</script>
hey hielo, this is basically the same question as the other one you're answering it seems. as in the last one, the formFill does not work on the same page
The last time you said:
"That's actually why it wasn't working. I initially had the formFill on the search-applicants.cfm page, and it wouldn't work. I moved it to form.cfm, and now it works."

and later on you said

"...I'm just having problems with returning a query result to a javascript function."

Piecing everything together, if I undestand you correctly, at this point you can get/see the applicantID or at least are able determine which option the use selected, but your trouble is getting the data an populate some form with the details for the selected user/option, right?
I have been able to get everything to work, but it iis a hack. I simply received the query result, than passed it as a list through a select box onchange event, then parsed it client-side on the page, filling out the form. i do not like this method and know that it will cause problems once the record sets become large.
ASKER CERTIFIED SOLUTION
Avatar of hielo
hielo
Flag of Wallis and Futuna image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
I don't have gmail...i'm available on AIM and MSN...
I use only the web interface at http://google.com/talk. Let me know if you create an account.
I've got an account, what do you need?
Put your gmail account on your profile. Next time I log on I'll look you up to see if you are online. Perhaps I'll find you online later on.
To be continued