Populate Form Fields From What Is Selected in Select Box

**FSUKXAZ** · 05-21-2007, 01:41 PM

Goal: Populate the form based on what is selected in a select box.
Language: JavaScript, HTML, Access, and ColdFusion
Query: Dynamic query pulling from an Access DB pulling back the values you would see in the input boxes

FYI: This is not actual code, but a subset of it with the variable names changed to protect the innocent

. Therefore, I may have left out some stuff so sue me. Also, don't say you don't know ColdFusion because this is a JavaScript question.

<HEAD>
<CFOUTPUT>
<SCRIPT LANGUAGE="JavaScript">
function PopulateMe()
{
document.RecurringAnnouncements.AnnouncementTitle.value = GetElementByID('#GetAnnouncements.AnnouncementTitle#');
document.RecurringAnnouncements.AnnouncementBody.value = GetElementByID('#GetAnnouncements.AnnouncementBody#');
document.RecurringAnnouncements.AnnouncementLink.value = GetElementByID('#GetAnnouncements.AnnouncementLink#');
document.RecurringAnnouncements.AnnouncementLinkText.value = GetElementByID('#GetAnnouncements.AnnouncementLinkText#');
document.RecurringAnnouncements.AnnouncementPostDate.value = GetElementByID('#GetAnnouncements.AnnouncementPostDate#');
document.RecurringAnnouncements.AnnouncementExpiresDate.value = GetElementByID('#GetAnnouncements.AnnouncementExpiresDate#');
}
</SCRIPT>
</CFOUTPUT>
</HEAD>

<BODY>

<FORM ACTION="AnnounceEditor.cfm" NAME="RecurringAnnouncements" METHOD="post">

<SELECT NAME="Announcement" ID="Announcement" ONCHANGE="PopulateMe(this)">
<CFOUTPUT QUERY="GetAnnouncements">
<OPTION VALUE="#AnnouncementID#">#AnnouncementTitle#</OPTION>
</CFOUTPUT>
</SELECT>

<CFOUTPUT>
<INPUT TYPE="text" NAME="Title" VALUE="#GetAnnouncements.AnnouncementTitle#">
<INPUT TYPE="text" NAME="Body" VALUE="#GetAnnouncements.AnnouncementBody#>
<INPUT TYPE="text" NAME="Link" VALUE="#GetAnnouncements.AnnouncementLink#
<INPUT TYPE="text" NAME="LinkText" VALUE="#GetAnnouncements.AnnouncementLinkText#>
<INPUT TYPE="text" NAME="PostDate" VALUE="#GetAnnouncements.AnnouncementPostDate#>
<INPUT TYPE="text" NAME="ExpiresDate" VALUE="#GetAnnouncements.AnnouncementExpiresDate#>
</CFOUTPUT>

</FORM>

</BODY>

**Twey** · 05-21-2007, 02:20 PM

Also, don't say you don't know ColdFusion because this is a JavaScript question.

It is, but it's heavily tied in with ColdFusion, so is difficult for me to work with with no knowledge of ColdFusion. I'm going to make some assumptions:

That #SomeObject.SomeValue# is a ColdFusion-inserted value;
that <cfoutput> causes the code to be looped over some unknown value; and that
GetElementById() is a (poorly-named) ColdFusion-generated client-side function.

Code:

<head>
  <title>Some Title</title>
  <script type="text/javascript"> 
    function populateFromMe(el, frm) {
      frm = frm.elements;
      for(var i = 0, e; e = frm.elements[i]; ++i)
        if(e.name.indexOf("Announcement") !== 0)
          continue;
        else
          frm[e.name].value = GetElementByID('#GetAnnouncements.' + e.name + '#');
    }
  </script>
</head>
<body>
  <form action="AnnounceEditor.cfm" id="RecurringAnnouncements" method="post"> 
 
    <select name="Announcement" id="Announcement" onchange="populateFromMe(this, this.form);"> 
      <cfoutput query="GetAnnouncements"> 
        <option value="#AnnouncementID#">#AnnouncementTitle#</option> 
     </cfoutput>
    </select> 
 
    <cfoutput>
      <input type="text" name="Title" value="#GetAnnouncements.AnnouncementTitle#"> 
      <input type="text" name="Body" value="#GetAnnouncements.AnnouncementBody#">
      <input type="text" name="Link" value="#GetAnnouncements.AnnouncementLink#"> 
      <input type="text" name="LinkText" value="#GetAnnouncements.AnnouncementLinkText#"> 
      <input type="text" name="PostDate" value="#GetAnnouncements.AnnouncementPostDate#"> 
      <input type="text" name="ExpiresDate" value="#GetAnnouncements.AnnouncementExpiresDate#> 
    </cfoutput>
  </form>
</body>

This is the way I'd do it, ignoring the ColdFusion as much as possible. If it doesn't work, it's most likely ColdFusion to blame, and you should get someone versed in ColdFusion to look at it.

**FSUKXAZ** · 05-21-2007, 03:06 PM

Yes to number 1 - it is basically "queryname.fieldname" inside of the ColdFusion hash marks.

No to number 2 - <CFOUTPUT> doesn't loop (that would be <CFLOOP>), the tag <CFOUTPUT> just outputs the manipulated data to the screen.

Sort of to number 3 - GetElementById is not a CF function, but is a function the DOM understands.
Purpose: Returns the element whose ID is specified.
Syntax: element = document.getelementbyid(id);

So anyways, I put in all the code you gave and removed my code.
It gave me the following error when the page loads:
A CF variable name cannot end with a "." The line number of the error is coming from the line after the "else" in your JavaScript. I assume it's having some issue with how it's doing the concatenation. Any ideas?

**FSUKXAZ** · 05-21-2007, 07:33 PM

I got tired of messing with all this complex JavaScript and wrote it with ColdFusion instead... and it works. I used 2 forms... code below. P.S. I did add a nice JS validation routine in afterwards.

<CFQUERY NAME="GetAnnouncements" Datasource="#strDatasource#">
SELECT *
FROM RecurringAnnouncements
</CFQUERY>

<CFIF isDefined("ChangeMe")>
<CFSET TheID = #Val("Form.Announcement")#>
<CFQUERY NAME="TheAnnouncement" Datasource="#strDatasource#" maxrows ="1">
SELECT *
FROM RecurringAnnouncements
WHERE RecurringAnnouncementID = #TheID#
</CFQUERY>
</CFIF>

<CFIF isDefined("form.submit")>
<CFQUERY NAME="TheAnnouncement" Datasource="#strDatasource#">
INSERT INTO RecurringAnnouncements (Title, Body, LinkText, Link, PostDate, ExpiresDate, Recurring)
VALUES ('#Form.Title#', '#Form.Body#', '#Form.LinkText#', '#Form.Link#', '#Form.PostDate#', '#Form.ExpiresDate#', '#Form.Recurring#')
WHERE RecurringAnnouncementID = #TheID#
</CFQUERY>

<CFSET message = "You have successfully created a new announcement">
<SCRIPT LANGUAGE ="JavaScript"> <CFOUTPUT>#message#</CFOUTPUT></SCRIPT>
</CFIF>

<BODY>

<FORM ACTION="AnnounceEditor.cfm?ChangeMe" NAME="Change" METHOD="post">

<SELECT NAME="Announcement" ID="Announcement" ONCHANGE="PopulateMe(this.form.submit)">
<CFOUTPUT QUERY="GetAnnouncements">
<OPTION VALUE="#AnnouncementID#">#AnnouncementTitle#</OPTION>
</CFOUTPUT>
</SELECT>

</FORM>

<FORM ACTION="AnnounceEditor.cfm" NAME="RecurringAnnouncements" METHOD="post">

<CFOUTPUT>
<INPUT TYPE="text" NAME="Title" VALUE="#TheAnnouncement.AnnouncementTitle#">
<INPUT TYPE="text" NAME="Body" VALUE="#TheAnnouncement.AnnouncementBody#>
<INPUT TYPE="text" NAME="Link" VALUE="#TheAnnouncement.AnnouncementLink#
<INPUT TYPE="text" NAME="LinkText" VALUE="#TheAnnouncement.AnnouncementLinkText#>
<INPUT TYPE="text" NAME="PostDate" VALUE="#TheAnnouncement.AnnouncementPostDate#>
<INPUT TYPE="text" NAME="ExpiresDate" VALUE="#TheAnnouncement.AnnouncementExpiresDate#>
</CFOUTPUT>

</FORM>

</BODY>

**Twey** · 05-22-2007, 05:03 PM

Sort of to number 3 - GetElementById is not a CF function, but is a function the DOM understands.
Purpose: Returns the element whose ID is specified.
Syntax: element = document.getelementbyid(id);

No, that's document.getElementById(), not GetElementById(). document is not part of the scope chain (usually) and Javascript is case-sensitive.

Your HTML needs work -- see http://validator.w3.org/. Also, you've succeeded in putting me off ColdFusion for life