Skip to main content
D
drux13013
Participant
January 29, 2010
Question

Multiple CFFORMs in a page w/ binding CFSELECTS

  • January 29, 2010
  • 1 reply
  • 794 views

Howdy all.

I have a page that has two CFFORMs, each uniquely named (form1 & form2 for example).

Each form is essentially the same - each one has a cfselect with States pulled from a common query and also has a bound cfselect that shows the Area Codes for that chosen state. Both cfselect elements are called "State" and "AreaCode" respectively. I do not wish to change the name of the cfselect elements.

{cfform name="form1"}

     {cfselect name="State" bind="cfc:path.to.cfc.getStates()" bindonload="yes" }

     {cfselect name="AreaCode" bind="cfc:path.to.cfc.getAreaCodes(state={form1:State})" bindonload="yes" }

{ /cfform }

{cfform name="form2"}

     {cfselect name="State" bind="cfc:path.to.cfc.getStates()" bindonload="yes" }

     {cfselect name="AreaCode" bind="cfc:path.to.cfc.getAreaCodes(state={form2:State})" bindonload="yes" }

{ /cfform }

The problem is, if I switch the state select in form2, *form1*'s AreaCode gets the bound response instead of form2.

Is there a way to expressly tell CF to "stay within its own form" for the binding?

Thanks in advance,

Andrew

    This topic has been closed for replies.

    1 reply

    -
    -__cfSearching__-
    Inspiring
    January 29, 2010

    Try assigning the cfselects a unique "id" (State1, AreaCode1, State2, AreaCode2). Then use the "id" instead of the "name" in the binds.

    D
    drux13013Author
    Participant
    January 29, 2010

    Thanks! This seems to have resolved the issue.


    D
    drux13013Author
    Participant
    January 29, 2010

    I spoke too soon. It works for the latest FireFox, but not with IE8.

    I've modified the form slightly to:

    {cfform name="form1"}

         {cfselect id="State" name="State" bind="cfc:path.to.cfc.getStates()" bindonload="yes" }

         {cfselect id="AreaCode" name="AreaCode" bind="cfc:path.to.cfc.getAreaCodes(state={form1:State})" bindonload="yes" }

    { /cfform }

    {cfform name="form2"}

         {cfselect id="State2" name="State" bind="cfc:path.to.cfc.getStates()" bindonload="yes" }

         {cfselect id="AreaCode2" name="AreaCode" bind="cfc:path.to.cfc.getAreaCodes(state={form2:State2})" bindonload="yes" }

    { /cfform }

    I fired up the AJAX Logger on IE8 to try to see what's going on.

    If I switch the state on form1, the AreaCode field in form1 is NOT populated correctly, and the logger seems to indicate that it's pushing the values to the second form.

    If I switch the state on form2, AreaCode2 IS populated correctly.

    Darn you, Internet Explorer!

    Any further suggestions would be most welcome. Thanks in advance.

    -Andrew

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices