javascript - Why is my JavaScript code not changing the values using the onChange method?

Question

My code is below. For some reason, the code is not changing the fields when the category and ad size like it should. Their are corresponding numbers for the categories, as sizes, etc. Any ideas as to why this isn't working?

<cfparam name="product_category" default="1">

<cfquery name="getFlyerInfo" datasource="mydatasource">
      select * from flyer_cost where fcid = #product_category#
</cfquery>

<cfquery name="getFlyerCat" datasource="mydatasource">
      select * from flyer_category
</cfquery>

<cfquery name="getFlyerSize" datasource="mydatasource">
      select * from flyer_size
</cfquery>

<cfoutput>
<script language="JavaScript">
function PopulateMe()
{

document.flyer.product_category.value = GetElementByID('#getFlyerInfo.fcid#');
document.flyer.page_size.value = GetElementByID('#getFlyerInfo.fsid#');
document.flyer.max_products.value = GetElementByID('#getFlyerInfo.max_products#');
document.flyer.max_images.value = GetElementByID('#getFlyerInfo.max_images#');
document.flyer.price.value = GetElementByID('#getFlyerInfo.price#');

}

</script>
</cfoutput>
<cfquery name="getFlyerDate" datasource="mydatasource">
      select * from flyer_campaign
</cfquery>
<cfoutput>

<p><strong>FLYER SUBMISSION PERIOD CLOSES #DateFormat(getFlyerDate.penddate, 'mm/dd/yyyy')#</strong>
You may return to this form and make changes anytime during the submission period.</p>

<p><strong>FLYER PUBLICATION DATES</strong>
Net Prices offered during this promotion will be effective <em>#DateFormat(getFlyerDate.startdate, 'mm/dd/yyyy')# - #DateFormat(getFlyerDate.enddate, 'mm/dd/yyyy')#</em>
<br />
      You may return to this form and make changes anytime during the submission period.</p>
</cfoutput>
<cfquery name="getVendorInfo" datasource="mydatasource">
      select * from flyer_vendor_campaigns where vcode = '#vcode#'
</cfquery>

<cfoutput>
<cfform method="post" action="flyer_step3.cfm" name="flyer">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50%"></td>
    <table width="100%" height="133" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td width="50%" align="left" valign="top" class="selAdTypeTxtCopy">
            <table width="100%" border="0" align="left" cellpadding="3" cellspacing="1" class="page2Table">
              <tr>
                <td width="11%">Company</td>
                <td width="89%">#getVendorInfo.contact#</td>
              </tr>
              <tr>
                <td>Name</td>
                <td>#getVendorInfo.fullname#</td>
              </tr>
              <tr>
                <td>Email</td>
                <td>#getVendorInfo.email#</td>
              </tr>
              <tr>
                <td>Title</td>
                <td>#getVendorInfo.title#</td>
              </tr>
              <tr>
                <td>Phone</td>
                <td>#INSERT("-", INSERT("-", getVendorInfo.phone, 3), 7)#</td>
              </tr>
              <tr>
                <td>Fax</td>
                <td>#INSERT("-", INSERT("-", getVendorInfo.fax, 3), 7)#</td>
              </tr>
              <tr>
                <td>Freight Terms</td>
                <td>#getVendorInfo.freight_policy#</td>
              </tr>
              <tr>
                <td>Comments</td>
                <td>#getVendorInfo.comments#</td>
              </tr>
            </table></td>
            <td width="50%" align="left" valign="middle"><table width="60%" border="0" align="center" cellpadding="2" cellspacing="5">
              <tr>
                <td>Product Category</td>
                <td><cfselect name="product_category" id="product_category" onchange="javascript:PopulateMe(this)">
                  <option value="">-- Select Product Category --</option>
                  <cfloop query="getFlyerCat">
                  <option value="#getFlyerCat.fcid#"<cfif len(getFlyerInfo.fcid) gt 0 and getFlyerInfo.fcid is "#getFlyerInfo.fcid#"> selected</cfif>>#getFlyerCat.flyer_category#</option>
                  </cfloop>
                </cfselect></td>
              </tr><tr>
                <td>Ad Size</td>
                <td><cfselect name="page_size" id="page_size" onchange="javascript:PopulateMe(this)">
                  <option value="">-- Select Ad Size --</option>
                  <cfloop query="getFlyerSize">
                  <option value="#getFlyerSize.fsid#"<cfif len(getFlyerInfo.fsid) gt 0 and getFlyerInfo.fsid is "#getFlyerSize.fsid#"> selected</cfif>>#getFlyerSize.ad_size#</option>
                  </cfloop>
                </cfselect></td>
              </tr>
              <tr>
                              <td>Max Products</td>
                              <td><input type="text" name="max_products" value="#getFlyerInfo.max_products#" size="30"></td>
                        </tr>
                        <tr>
                              <td>Max Graphics</td>
                              <td><input type="text" name="max_images" value="#getFlyerInfo.max_images#" size="30"></td>
                        </tr>
                        <tr>
                              <td>Price</td>
                              <td><input type="text" name="price" value="#getFlyerInfo.price#" size="30"></td>
                        </tr>
              <tr>
                <td colspan="2" align="center"><cfinput type="submit" name="submit" value="Next ->>" /></td>
              </tr>
            </table></td>
          </tr>
      </table>
  </cfform>
 </cfoutput>