Results 1 to 6 of 6

Thread: Populate Form Fields From What Is Selected in Select Box

  1. #1
    Join Date
    May 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Populate Form Fields From What Is Selected in Select Box

    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>

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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:
    1. That #SomeObject.SomeValue# is a ColdFusion-inserted value;
    2. that <cfoutput> causes the code to be looped over some unknown value; and that
    3. 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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    May 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  4. #4
    Join Date
    May 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>

  5. #5
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  6. #6
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Quote Originally Posted by Twey View Post
    Also, you've succeeded in putting me off ColdFusion for life
    you mean you used coldfusion to begin with? haha

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •