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>
Web ServersJavaScript

Avatar of undefined
Last Comment
coldchillin

8/22/2022 - Mon
hielo

fillForm(this.options[this.options.selectedIndex].value)
basicinstinct

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

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;
}


All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
hielo

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>
hielo

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

ASKER
coldchillin

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.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
basicinstinct

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.  
ASKER
coldchillin

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.
hielo

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.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
hielo

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>
ASKER
coldchillin

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
hielo

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?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
coldchillin

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
hielo

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
coldchillin

I don't have gmail...i'm available on AIM and MSN...
hielo

I use only the web interface at http://google.com/talk. Let me know if you create an account.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
ASKER
coldchillin

I've got an account, what do you need?
hielo

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.
ASKER
coldchillin

To be continued
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.