27 Replies Latest reply: Jul 4, 2012 5:29 PM by itisdesign RSS

    Bind in form works with cfinput, how to with cfselect and a href

    goodychurro1 Community Member

      Hi all

      This code workks binding a cfinput in an HTML cfform:

      Name:<cfinput type="text" name="FIRSTNAME" label="Name" required="yes" width="150" bind="{UsersGrid.FIRSTNAME}" >

       

      However this href doesn't seem to bind correctly:

      <a  href="http://www.google.com/search?hl=en&output=search&sclient=psy-ab&q={UsersGrid.COMPANY}&btnK=" bind="{UsersGrid.COMPANY}">Google.com</a>

       

      This cfselect doesn't either:
      Department: <cfselect name="DEPARTMENT1" width="100" size="1" label="Department" required="yes" bind="UsersGrid.DEPARTMENT1">
      <option></option><cfoutput query="dNames"><option value="#DEPARTMENTIDS#">#DEPARTMENTNOM#</option></cfoutput>
      </cfselect> 

       

      How can I make them both work? Thank you

        • 1. Re: Bind in form works with cfinput, how to with cfselect and a href
          itisdesign MVP

          goodychurro1 wrote:

           

          [...]

          this href doesn't seem to bind correctly:
          [...]

          This cfselect doesn't either:

          [...]

          How can I make them both work? Thank you

           

          Hi goodychurro1,

           

          The tag you're looking for is cfajaxproxy.  Here is a example to get you started (if you're on CF9, just remove the 3rd attribute from the queryNew() and then populate the query using a queryAddRow() and three querySetCell()s):

           

          <cfset q = queryNew("myID,myString", "integer,varchar", [[1,"one"],[2,"two"],[3,"three"]]) />

          <cfajaxproxy bind="javascript:myHandler({myGrid.myID})" />

          <script type="text/javascript">

            function myHandler(myID) {

                //update the link's href

                document.getElementById('myLink').href = 'http://www.coldfusion.com?q=' + myID;

                //update the select's selected

                var theField = document.getElementById('mySelect');

                for(var i=0; i<theField.options.length; i++) {

                    if(theField.options[i].value==myID) {

                        theField.options[i].selected = true;

                    } else {

                        theField.options[i].selected = false;

                    }

                }

            }

          </script>

          <cfform>

            <cfgrid name="myGrid" format="html" width="200" query="q">

              <cfgridcolumn name="myID" />

              <cfgridcolumn name="myString" />

            </cfgrid>

            <cfselect name="mySelect" query="q" display="myString" value="myID" />

          </cfform>

          <a href="" id="myLink" target="_blank">text</a>

           

          Selecting a row in the grid changes the link's href and the select's selected option.

           

          References:

          - cfaxaxproxy

          - Binding data to form fields

          - a blog post that might be of help

           

          Thanks,

          -Aaron

          • 2. Re: Bind in form works with cfinput, how to with cfselect and a href
            goodychurro1 Community Member

            Thanks Aaron really appreciated, I'll play around with it!!

            • 3. Re: Bind in form works with cfinput, how to with cfselect and a href
              goodychurro1 Community Member

              Hi Aaron

              I put this code before my cfform tag, and changed the mygrid to the name of my grid (usersgrid):

               

              <cfajaxproxy bind="javascript:myHandler({UsersGrid.myID})" />

              <script type="text/javascript">

                function myHandler(myID) {

                    //update the link's href

                    document.getElementById('myLink').href = 'http://www.coldfusion.com?q=' + myID;

                    //update the select's selected

                    var theField = document.getElementById('mySelect');

                    for(var i=0; i<theField.options.length; i++) {

                        if(theField.options[i].value==myID) {

                            theField.options[i].selected = true;

                        } else {

                            theField.options[i].selected = false;

                        }

                    }

                }

              </script>

               

              I then added this code in the cfform, but the link is shown as http://www.coldfusion.com?q=undefined - why is this? Thanks:

               

               

              <a href="" id="myLink" target="_blank">text</a>

              • 4. Re: Bind in form works with cfinput, how to with cfselect and a href
                itisdesign MVP

                goodychurro1 wrote:

                 

                <cfajaxproxy bind="javascript:myHandler({UsersGrid.myID})" />

                [...]

                I then added this code in the cfform, but the link is shown as http://www.coldfusion.com?q=undefined - why is this? Thanks:

                Hi goodychurro1,

                 

                In the {UsersGrid.myID}, the 'myID' corresponds to <cfgridcolumn name="myID" />.

                 

                Meaning, you should change the 'myID' to be the same name as one of your grid columns.  If you currently don't have a grid column w/ the name 'myID', then the href's resultant URL would end w/ 'undefined'.

                 

                Thanks,

                -Aaron

                • 5. Re: Bind in form works with cfinput, how to with cfselect and a href
                  goodychurro1 Community Member

                  Hi Aaaron

                  I changed it to my cfgrid column name, COMPANY but it is still showing "undefined" and none of the other fields bind anymore :

                   

                  <cfajaxproxy bind="javascript:myHandler({UsersGrid.myID})" />

                  <script type="text/javascript">

                    function myHandler(COMPANY) {

                        //update the link's href

                        document.getElementById('myLink').href = 'http://www.coldfusion.com?q=' + COMPANY;

                        //update the select's selected

                        var theField = document.getElementById('mySelect');

                        for(var i=0; i<theField.options.length; i++) {

                            if(theField.options[i].value==COMPANY) {

                                theField.options[i].selected = true;

                            } else {

                                theField.options[i].selected = false;

                            }

                        }

                    }

                  </script>

                  • 6. Re: Bind in form works with cfinput, how to with cfselect and a href
                    itisdesign MVP

                    goodychurro1 wrote:

                     

                    I changed it to my cfgrid column name, COMPANY but it is still showing "undefined" and none of the other fields bind anymore :

                     

                    Hi goodychurro1,

                     

                    Did you try changing {UsersGrid.myID} to {UsersGrid.COMPANY} ?

                     

                    Thanks,

                    -Aaron

                    • 7. Re: Bind in form works with cfinput, how to with cfselect and a href
                      goodychurro1 Community Member

                      Hi Aaron yes but that doesn't work.

                       

                      <cfajaxproxy bind="javascript:myHandler({UsersGrid.COMPANY})" />

                      <script type="text/javascript">

                        function myHandler(COMPANY) {

                            //update the link's href

                            document.getElementById('myLink').href = 'http://www.coldfusion.com?q=' + COMPANY;

                            //update the select's selected

                            var theField = document.getElementById('SECTORS1');

                            for(var i=0; i<theField.options.length; i++) {

                                if(theField.options[i].value==SECTORS1) {

                                    theField.options[i].selected = true;

                                } else {

                                    theField.options[i].selected = false;

                                }

                            }

                        }

                      </script>

                      • 8. Re: Bind in form works with cfinput, how to with cfselect and a href
                        goodychurro1 Community Member

                        I got rid of all the cfajaxproxy code and just tried to bind the cfselect directly, but I get this error: Bind failed for select box SECTORS1 bind value is not a 2D array or valid serialized query

                         

                        <td>Sector:<cfselect class="input" name="SECTORS1"  size="1" label="Sector" required="yes" bind="{UsersGrid.SECTORS1}">

                        <option></option><cfoutput query="industries"><option value="#SECTORSIDS#">#SECTORSNOM#</option></cfoutput>

                        </cfselect>   </td>

                        • 9. Re: Bind in form works with cfinput, how to with cfselect and a href
                          itisdesign MVP

                          Hi goodychurro1,

                           

                          Regarding the href (we'll discuss the cfselect next), could you please try this:

                           

                          <cfajaxproxy bind="javascript:myHandler({UsersGrid.COMPANY})" />

                          <script type="text/javascript">

                            function myHandler(COMPANY) {

                                //update the link's href

                                document.getElementById('myLink').href = 'http://www.coldfusion.com?q=' + COMPANY;

                            }

                          </script>

                          <a href="" id="myLink" target="_blank">text</a>

                           

                          Thanks,

                          -Aaron

                          • 10. Re: Bind in form works with cfinput, how to with cfselect and a href
                            goodychurro1 Community Member

                            Great Aaaron the link works a treat! Thanks

                            • 11. Re: Bind in form works with cfinput, how to with cfselect and a href
                              itisdesign MVP

                              Excellent!  Now we'll try adding the cfselect.  Could you try this?

                               

                              <cfajaxproxy bind="javascript:myHandler({UsersGrid.COMPANY},{UsersGrid.SECTORS1})" />

                              <script type="text/javascript">

                                function myHandler(COMPANY,SECTORS1) {

                                    //update the link's href

                                    document.getElementById('myLink').href = 'http://www.coldfusion.com?q=' + COMPANY;

                                    //update SECTORS1's selected

                                    var theField = document.getElementById('SECTORS1');

                                    for(var i=0; i<theField.options.length; i++) {

                                        if(theField.options[i].value==SECTORS1) {

                                            theField.options[i].selected = true;

                                        } else {

                                            theField.options[i].selected = false;

                                        }

                                    }

                                }

                              </script>

                              Sector:<cfselect class="input" name="SECTORS1" size="1" label="Sector" required="yes">

                              <option></option><cfoutput query="industries"><option value="#SECTORSIDS#">#SECTORSNOM#</option></cfoutput></cfselect>

                              <a href="" id="myLink" target="_blank">text</a>

                               

                              Thanks,

                              -Aaron

                              • 12. Re: Bind in form works with cfinput, how to with cfselect and a href
                                goodychurro1 Community Member

                                Thanks aaron that works perfectly. I have another cfselect which I have now formatted in the same way:

                                 

                                <cfselect class="input" name="DEPARTMENT1" size="1" label="Department" required="yes">

                                <option></option><cfoutput query="dNames"><option value="#DEPARTMENTIDS#">#DEPARTMENTNOM#</option></cfoutput></cfselect>

                                 

                                 

                                I copied the script code that works for the one cfselect and changed it but it doesn't seem to bind, it must be a script issue?:

                                 

                                  //update DEPARTMENT1's selected

                                      var theField = document.getElementById('DEPARTMENT1');

                                      for(var i=0; i<theField.options.length; i++) {

                                          if(theField.options[i].value==DEPARTMENT1) {

                                              theField.options[i].selected = true;

                                          } else {

                                              theField.options[i].selected = false;

                                          }

                                      }

                                  }

                                • 13. Re: Bind in form works with cfinput, how to with cfselect and a href
                                  itisdesign MVP

                                  Hi goodychurro1,

                                   

                                  Excellent that it is working!  For additional cfselects, just be sure to also add those grid column names to the cfajaxproxy and the myHandler function.  Like so:

                                   

                                  change <cfajaxproxy bind="javascript:myHandler({UsersGrid.COMPANY},{UsersGrid.SECTORS1})" /> to <cfajaxproxy bind="javascript:myHandler({UsersGrid.COMPANY},{UsersGrid.SECTORS1},{UsersGrid.DEPARTMENT1})" />

                                   

                                  and change

                                   

                                  function myHandler(COMPANY,SECTORS1) to function myHandler(COMPANY,SECTORS1,DEPARTMENT1)

                                   

                                  B/c cfajaxproxy needs to know about those grid column names, so it can pass the values of each to myHandler().  And myHandler() itself needs to know about the values, so that it can use them.

                                   

                                  Thanks,

                                  -Aaron

                                  • 14. Re: Bind in form works with cfinput, how to with cfselect and a href
                                    goodychurro1 Community Member

                                    Thanks Aaaron I tried the code but there seems to be an error in the //update DEPARTMENT1's selected -something with the js conditions?

                                     

                                     

                                    <cfajaxproxy bind="javascript:myHandler({UsersGrid.COMPANY},{UsersGrid.SECTORS1},{UsersGrid.DEPARTMENT 1})" />

                                    <script type="text/javascript">

                                      function myHandler(COMPANY,SECTORS1,DEPARTMENT1) {

                                          //update the link's href

                                          document.getElementById('myLink').href = 'http://www.google.com/search?q=' + COMPANY;

                                    document.getElementById('Linkedin').href = 'http://www.google.com/search?q=linkedin+' + COMPANY;

                                          //update SECTORS1's selected

                                          var theField = document.getElementById('SECTORS1');

                                          for(var i=0; i<theField.options.length; i++) {

                                              if(theField.options[i].value==SECTORS1) {

                                                  theField.options[i].selected = true;

                                              } else {

                                                  theField.options[i].selected = false;

                                              }

                                          }

                                      }

                                    //update DEPARTMENT1's selected

                                          var theField = document.getElementById('DEPARTMENT1');

                                          for(var i=0; i<theField.options.length; i++) {

                                              if(theField.options[i].value==DEPARTMENT1) {

                                                  theField.options[i].selected = true;

                                              } else {

                                                  theField.options[i].selected = false;

                                              }

                                          }

                                      }

                                    </script>

                                    • 15. Re: Bind in form works with cfinput, how to with cfselect and a href
                                      itisdesign MVP

                                      Hi goodychurro1,

                                       

                                      The issue was created when copying/pasting the '//update SECTORS1's selected' section of code.  The myHandler()'s closing '}' was selected during the copy.  And the copied code was pasted outside of the myHandler() function.  Please try this:

                                       

                                      <cfajaxproxy bind="javascript:myHandler({UsersGrid.COMPANY},{UsersGrid.SECTORS1},{UsersGrid.DEPARTMENT 1})" />

                                      <script type="text/javascript">

                                        function myHandler(COMPANY,SECTORS1,DEPARTMENT1) {

                                            //update the link's href

                                            document.getElementById('myLink').href = 'http://www.google.com/search?q=' + COMPANY;

                                            document.getElementById('Linkedin').href = 'http://www.google.com/search?q=linkedin+' + COMPANY;

                                            //update SECTORS1's selected

                                            var theField = document.getElementById('SECTORS1');

                                            for(var i=0; i<theField.options.length; i++) {

                                                if(theField.options[i].value==SECTORS1) {

                                                    theField.options[i].selected = true;

                                                } else {

                                                    theField.options[i].selected = false;

                                                }

                                            }

                                            //update DEPARTMENT1's selected

                                            var theField = document.getElementById('DEPARTMENT1');

                                            for(var i=0; i<theField.options.length; i++) {

                                                if(theField.options[i].value==DEPARTMENT1) {

                                                    theField.options[i].selected = true;

                                                } else {

                                                    theField.options[i].selected = false;

                                                }

                                            }

                                        }

                                      </script>

                                       

                                      Thanks,

                                      -Aaron

                                      • 16. Re: Bind in form works with cfinput, how to with cfselect and a href
                                        goodychurro1 Community Member

                                        Hi Aaaron it still isn't binding, maybe it's something to do with the fact that the cfgridcolumn name is different?

                                        <cfgridcolumn name="DEPARTMENTNOM" width="150" header="Department">

                                         

                                        Code:

                                        <cfajaxproxy bind="javascript:myHandler({UsersGrid.COMPANY},{UsersGrid.SECTORS1},{UsersGrid.DEPARTMENT NOM})"/>
                                        <script type="text/javascript">
                                          function myHandler(COMPANY,SECTORS1,DEPARTMENT1) {
                                              //update the link's href
                                              document.getElementById('myLink').href = 'http://www.google.com/search?q=' + COMPANY;
                                              document.getElementById('Linkedin').href = 'http://www.google.com/search?q=linkedin' + COMPANY;

                                              //update SECTORS1's selected
                                              var theField = document.getElementById('SECTORS1');
                                              for(var i=0; i<theField.options.length; i++) {
                                                  if(theField.options[i].value==SECTORS1) {
                                                      theField.options[i].selected = true;
                                                  } else {
                                                      theField.options[i].selected = false;
                                                  }
                                              }
                                              //update DEPARTMENT1's selected
                                              var theField = document.getElementById('DEPARTMENT1');
                                              for(var i=0; i<theField.options.length; i++) {
                                                  if(theField.options[i].value==DEPARTMENT1) {
                                                      theField.options[i].selected = true;
                                                  } else {
                                                      theField.options[i].selected = false;
                                                  }
                                              }
                                          }
                                        </script>

                                        • 17. Re: Bind in form works with cfinput, how to with cfselect and a href
                                          itisdesign MVP

                                          goodychurro1 wrote:

                                           

                                          <cfajaxproxy bind="javascript:myHandler({UsersGrid.COMPANY},{UsersGrid.SECTORS1},{UsersGrid.DEPARTMENT NOM})"/>

                                          [...]

                                          <cfgridcolumn name="DEPARTMENTNOM" width="150" header="Department">

                                          [..]

                                          <cfselect class="input" name="DEPARTMENT1" size="1" label="Department" required="yes">

                                          <option></option><cfoutput query="dNames"><option value="#DEPARTMENTIDS#">#DEPARTMENTNOM#</option></cfoutput></cfselect >

                                           

                                          Hi goodychurro1,

                                           

                                          Please see that I've made DEPARTMENTNOM and DEPARTMENTIDS bold.  When selecting a row in the UsersGrid, the grid's DEPARTMENTNOM column value must match one of the DEPARTMENT1's option values.

                                           

                                          Question 1: Does <cfgridcolumn name="DEPARTMENTNOM" grid column display a department name in each grid row, or does it display a department ID in each grid row?

                                          Question 2: Does the DEPARTMENT1 cfselect have a single ID for each option's value, or something else for each option's value?

                                          Question 3: Are there any matches between what the grid's DEPARTMENTNOM column is displaying and any of the select's option values?

                                           

                                          Thanks,

                                          -Aaron

                                          • 18. Re: Bind in form works with cfinput, how to with cfselect and a href
                                            goodychurro1 Community Member

                                            <cfquery name="qNames" datasource="salesdb">

                                                select * from company, industries, division

                                            where company.SECTORS1 = industries.SECTORSIDS

                                            <cfif structKeyExists(url,"sectorid")>

                                            and industries.SECTORSIDS = #url.sectorid#</cfif>

                                            and division.DEPARTMENTIDS = company.DEPARTMENT1

                                            and company.WHEN = 2

                                            ORDER BY company</cfquery>

                                             

                                            <cfquery name="dNames" datasource="salesdb">

                                                select DEPARTMENTIDS, DEPARTMENTNOM

                                                from division

                                            order by DEPARTMENTNOM</cfquery>

                                             

                                             

                                            Question 1: Does <cfgridcolumn name="DEPARTMENTNOM" grid column display a department name in each grid row, or does it display a department ID in each grid row?

                                            It displays a department name in each grid row, it outputs this from the qName query

                                             

                                            Question 2: Does the DEPARTMENT1 cfselect have a single ID for each option's value, or something else for each option's value?

                                            A single ID for each option's value

                                             

                                            Department:<cfselect class="input" name="DEPARTMENT1" size="1" label="Department" required="yes">

                                            <option></option><cfoutput query="dNames"><option value="#DEPARTMENTIDS#">#DEPARTMENTNOM#</option></cfoutput></cfselect>

                                             

                                             

                                            Question 3: Are there any matches between what the grid's DEPARTMENTNOM column is displaying and any of the select's option values?

                                            There are but they are not being shown in the html form. In the cfflash form the bind happened with:

                                             

                                            <cfselect name="DEPARTMENT1" width="100" size="1" label="Department" required="yes" onchange="UsersGrid.dataProvider.editField(UsersGrid.selectedIndex, 'DEPARTMENT1', DEPARTMENT1.selectedItem.data);">

                                            <option></option><cfoutput query="dNames"><option value="#DEPARTMENTIDS#">#DEPARTMENTNOM#</option></cfoutput>

                                            </cfselect>

                                            • 19. Re: Bind in form works with cfinput, how to with cfselect and a href
                                              itisdesign MVP

                                              goodychurro1 wrote:

                                               

                                              <cfquery name="qNames" datasource="salesdb">

                                              [...]

                                              and division.DEPARTMENTIDS = company.DEPARTMENT1

                                              [...]

                                              </cfquery>

                                              In the cfflash form the bind happened with:

                                              [...]

                                              onchange="UsersGrid.dataProvider.editField(UsersGrid.selectedIndex, 'DEPARTMENT1', DEPARTMENT1.selectedItem.data);"

                                               

                                              Hi goodychurro1,

                                               

                                              It sounds like you actually want to bind the cfselect to the grid's DEPARTMENT1 column.  In that case, could you please change the cfaxaxproxy to this:

                                               

                                              <cfajaxproxy bind="javascript:myHandler({UsersGrid.COMPANY},{UsersGrid.SECTORS1},{UsersGrid.DEPARTMENT 1})"/>

                                               

                                              Thanks,

                                              -Aaron

                                              • 20. Re: Bind in form works with cfinput, how to with cfselect and a href
                                                goodychurro1 Community Member

                                                Hmm no that doesn't work, it doesn't give an error but it just doesn't bind the DEPARTMENT1 field. In the flash cfform I also had this on the cfgrid onchange which may be relevant?:

                                                for (var i:Number = 0; i<DEPARTMENT1.length; i++) {if (DEPARTMENT1.getItemAt([i]).data == UsersGrid.selectedItem.DEPARTMENT1) DEPARTMENT1.selectedIndex = i}

                                                 

                                                 

                                                Here the updated code:

                                                 

                                                <cfajaxproxy bind="javascript:myHandler({UsersGrid.COMPANY},{UsersGrid.SECTORS1},{UsersGrid.DEPARTMENT 1})"/>
                                                <script type="text/javascript">
                                                  function myHandler(COMPANY,SECTORS1,DEPARTMENT1) {
                                                      //update the link's href
                                                      document.getElementById('myLink').href = 'http://www.google.com/search?q=' + COMPANY;
                                                      document.getElementById('Linkedin').href = 'http://www.google.com/search?q=linkedin' + COMPANY;

                                                      //update SECTORS1's selected
                                                      var theField = document.getElementById('SECTORS1');
                                                      for(var i=0; i<theField.options.length; i++) {
                                                          if(theField.options[i].value==SECTORS1) {
                                                              theField.options[i].selected = true;
                                                          } else {
                                                              theField.options[i].selected = false;
                                                          }
                                                      }
                                                      //update DEPARTMENT1's selected
                                                      var theField = document.getElementById('DEPARTMENT1');
                                                      for(var i=0; i<theField.options.length; i++) {
                                                          if(theField.options[i].value==DEPARTMENT1) {
                                                              theField.options[i].selected = true;
                                                          } else {
                                                              theField.options[i].selected = false;
                                                          }
                                                      }
                                                  }
                                                </script>

                                                • 21. Re: Bind in form works with cfinput, how to with cfselect and a href
                                                  itisdesign MVP

                                                  Hi goodychurro1,

                                                   

                                                  Does the cfgrid tag use the qNames query you posted above? (ex: <cfgrid query="qNames")

                                                   

                                                  Thanks,

                                                  -Aaron

                                                  • 22. Re: Bind in form works with cfinput, how to with cfselect and a href
                                                    goodychurro1 Community Member

                                                    Hi Aaron, yes it does:

                                                     

                                                    <cfform name="SFORM" FORMAT="html"  width="1000" height="400" style="margin-left:140px;">
                                                    <cfgrid name="UsersGrid"
                                                               FORMAT="html"
                                                               query="QNAMES" width="920" height="200" rowheaders="No" striperows="yes" striperowcolor="fefefe">

                                                    <cfgridcolumn name="RANKING" width="40"header="Rank">
                                                    <cfgridcolumn name="COMPANY" width="170" header="Company">
                                                    <cfgridcolumn name="FIRSTNAME"  header="Contact Name">
                                                    <cfgridcolumn name="POS" width="160" header="Position">
                                                    <cfgridcolumn name="DEPARTMENTNOM" width="150" header="Department">
                                                    <cfgridcolumn name="SECTORSNOM" width="120" header="Sectors">
                                                    <cfgridcolumn name="ABUNDANCE" width="120" header="Action date">
                                                    <cfgridcolumn name="SECTORS1" width="120" header="Action date" display="no">
                                                    <cfgridcolumn name="PRICE" width="120" header="Action date" display="no">
                                                    <cfgridcolumn name="PHONE" width="120" header="Action date" display="no">
                                                    <cfgridcolumn name="EMAIL" width="120" header="Action date" display="no">
                                                    <cfgridcolumn name="MOBILE" width="120" header="Action date" display="no">
                                                    <cfgridcolumn name="ADDRESS" width="120" header="Action date" display="no">
                                                    <cfgridcolumn name="CITY" width="120" header="Action date" display="no">
                                                    <cfgridcolumn name="COMMENTS" width="120" header="Action date" display="no">
                                                    <cfgridcolumn name="MTGT" width="120" header="Action date" display="no">
                                                       </cfgrid>

                                                    • 23. Re: Bind in form works with cfinput, how to with cfselect and a href
                                                      itisdesign MVP

                                                      Hi goodychurro1,

                                                       

                                                      If you can post the entire .cfm for this, I can try to help further.  I have your database tables setup per your other thread here: http://forums.adobe.com/thread/1031327

                                                       

                                                      Thanks!,

                                                      -Aaron

                                                       

                                                      Message was edited by: itisdesign

                                                      • 24. Re: Bind in form works with cfinput, how to with cfselect and a href
                                                        goodychurro1 Community Member

                                                        Sure, Aaaron here it is, it uses the same database tables and datasource as in the other thread:

                                                         

                                                        <cfquery name="QNAMES" datasource="tester">
                                                            select * from company, industries, division
                                                        where company.SECTORS1 = industries.SECTORSIDS
                                                        <cfif structKeyExists(url,"sectorid")>
                                                        and industries.SECTORSIDS = #url.sectorid#</cfif>
                                                        and division.DEPARTMENTIDS = company.DEPARTMENT1
                                                        and company.WHEN = 2
                                                        ORDER BY company</cfquery>

                                                        <cfquery name="dNames" datasource="tester">
                                                            select DEPARTMENTIDS, DEPARTMENTNOM
                                                            from division
                                                        order by DEPARTMENTNOM</cfquery>

                                                        <CFQUERY name="industries" datasource="tester">
                                                        SELECT * FROM industries
                                                        </CFQUERY>

                                                        <CFQUERY name="salesstep" datasource="tester">
                                                        SELECT * FROM sales
                                                        </CFQUERY>

                                                        <CFQUERY name="xity" datasource="tester">
                                                        SELECT * FROM ciudad
                                                        </CFQUERY>

                                                        <CFQUERY name="hols" datasource="tester">
                                                        SELECT * FROM holidays
                                                        </CFQUERY>

                                                        <!--- UPDATE QUERY --->
                                                        <cfif isDefined("FORM.UPDATEADDBTN")>
                                                        <cfif FORM.ENTID GTE 1>
                                                        <cfset isCOMPANYNull = iif(len(trim(FORM.COMPANY)) EQ 0, true, false)>
                                                        <cfset isSECTORS1Null = iif(len(trim(FORM.SECTORS1)) EQ 0, true, false)>
                                                        <cfset isRANKINGNull = iif(len(trim(FORM.RANKING)) EQ 0, true, false)>
                                                        <cfset isPRICENull = iif(len(trim(FORM.PRICE)) EQ 0, true, false)>
                                                        <cfset isDEPARTMENT1Null = iif(len(trim(FORM.DEPARTMENT1)) EQ 0, true, false)>
                                                        <cfset isFIRSTNAMENull = iif(len(trim(FORM.FIRSTNAME)) EQ 0, true, false)>
                                                        <cfset isPOSNull = iif(len(trim(FORM.POS)) EQ 0, true, false)>
                                                        <cfset isPHONENull = iif(len(trim(FORM.PHONE)) EQ 0, true, false)>
                                                        <cfset isEMAILNull = iif(len(trim(FORM.EMAIL)) EQ 0, true, false)>
                                                        <cfset isMOBILENull = iif(len(trim(FORM.MOBILE)) EQ 0, true, false)>
                                                        <cfset isADDRESSNull = iif(len(trim(FORM.ADDRESS)) EQ 0, true, false)>
                                                        <cfset isCITYNull = iif(len(trim(FORM.CITY)) EQ 0, true, false)>
                                                        <cfset isCOMMENTSNull = iif(len(trim(FORM.COMMENTS)) EQ 0, true, false)>
                                                        <cfset MEETINGDATE = trim(FORM.ABUNDANCE)>

                                                        <!--- DATECFM--->

                                                        <cfset isMTGTNull = iif(len(trim(FORM.MTGT)) EQ 0, true, false)>
                                                        <cfset isSTATE1Null = iif(len(trim(FORM.STATE1)) EQ 0, true, false)>

                                                        <CFQUERY name="updatecompany" datasource="tester">
                                                        update COMPANY
                                                        SET COMPANY = <cfqueryparam cfsqltype="cf_sql_longvarchar" value="#trim(FORM.COMPANY)#" null="#isCOMPANYNull#" />,
                                                           SECTORS1 = <cfqueryparam cfsqltype="cf_sql_integer" value="#trim(FORM.SECTORS1)#" null="#isSECTORS1Null#" />,
                                                           RANKING = <cfqueryparam cfsqltype="cf_sql_integer" value="#trim(FORM.RANKING)#" null="#isRANKINGNull#" />,
                                                           PRICE = <cfqueryparam cfsqltype="cf_sql_integer" value="#trim(FORM.PRICE)#" null="#isPRICENull#" />,
                                                           DEPARTMENT1 = <cfqueryparam cfsqltype="cf_sql_integer" value="#trim(FORM.DEPARTMENT1)#" null="#isDEPARTMENT1Null#" />,
                                                           FIRSTNAME = <cfqueryparam cfsqltype="cf_sql_longvarchar" value="#trim(FORM.FIRSTNAME)#" null="#isFIRSTNAMENull#" />,
                                                           POS = <cfqueryparam cfsqltype="cf_sql_longvarchar" value="#trim(FORM.POS)#" null="#isPOSNull#" />,
                                                           PHONE = <cfqueryparam cfsqltype="cf_sql_longvarchar" value="#trim(FORM.PHONE)#" null="#isPHONENull#" />,
                                                           EMAIL = <cfqueryparam cfsqltype="cf_sql_longvarchar" value="#trim(FORM.EMAIL)#" null="#isEMAILNull#" />,
                                                           MOBILE= <cfqueryparam cfsqltype="cf_sql_longvarchar" value="#trim(FORM.MOBILE)#" null="#isMOBILENull#" />,
                                                           ADDRESS = <cfqueryparam cfsqltype="cf_sql_longvarchar" value="#trim(FORM.ADDRESS)#" null="#isADDRESSNull#" />,
                                                           CITY = <cfqueryparam cfsqltype="cf_sql_integer" value="#trim(FORM.CITY)#" null="#isCITYNull#" />,
                                                           COMMENTS = <cfqueryparam cfsqltype="cf_sql_longvarchar" value="#trim(FORM.COMMENTS)#" null="#isCOMMENTSNull#" />,
                                                           ABUNDANCE = <cfqueryparam cfsqltype="cf_sql_timestamp" value="#MEETINGDATE#" />,
                                                           MTGT = <cfqueryparam cfsqltype="cf_sql_longvarchar" value="#trim(FORM.MTGT)#" null="#isMTGTNull#" />,
                                                           STATE1 = <cfqueryparam cfsqltype="cf_sql_integer" value="#trim(FORM.STATE1)#" null="#isSTATE1Null#" />
                                                        WHERE ENTID = #FORM.ENTID#
                                                        </CFQUERY>

                                                        <CFLOCATION URL="testht.cfm?begin=1">

                                                         


                                                        <cfelse>
                                                        <cfset isCOMPANYNull = iif(len(trim(FORM.COMPANY)) EQ 0, true, false)>
                                                        <cfset isSECTORS1Null   = iif(len(trim(FORM.SECTORS1)) EQ 0, true, false)>
                                                        <cfset isRANKINGNull = iif(len(trim(FORM.RANKING)) EQ 0, true, false)>
                                                        <cfset isPRICENull = iif(len(trim(FORM.PRICE)) EQ 0, true, false)>
                                                        <cfset isDEPARTMENT1Null = iif(len(trim(FORM.DEPARTMENT1)) EQ 0, true, false)>
                                                        <cfset isFIRSTNAMENull = iif(len(trim(FORM.FIRSTNAME)) EQ 0, true, false)>
                                                        <cfset isPOSNull = iif(len(trim(FORM.POS)) EQ 0, true, false)>
                                                        <cfset isPHONENull = iif(len(trim(FORM.PHONE)) EQ 0, true, false)>
                                                        <cfset isEMAILNull = iif(len(trim(FORM.EMAIL)) EQ 0, true, false)>
                                                        <cfset isMOBILENull = iif(len(trim(FORM.MOBILE)) EQ 0, true, false)>
                                                        <cfset isADDRESSNull = iif(len(trim(FORM.ADDRESS)) EQ 0, true, false)>
                                                        <cfset isCITYNull = iif(len(trim(FORM.CITY)) EQ 0, true, false)>
                                                        <cfset isCOMMENTSNull = iif(len(trim(FORM.COMMENTS)) EQ 0, true, false)>
                                                        <cfset isMTGTNull = iif(len(trim(FORM.MTGT)) EQ 0, true, false)>
                                                        <cfset isSTATE1Null = iif(len(trim(FORM.STATE1)) EQ 0, true, false)>
                                                        <cfset MEETINGDATE = trim(FORM.ABUNDANCE)>

                                                        <!--- DATECFM --->

                                                        <!--- ADD COMPANY QUERY --->
                                                        <CFQUERY name="addcompany" datasource="tester">
                                                        INSERT INTO COMPANY(
                                                        COMPANY,
                                                        SECTORS1,
                                                        RANKING,
                                                        PRICE,
                                                        DEPARTMENT1,
                                                        FIRSTNAME,
                                                        POS,
                                                        PHONE,
                                                        EMAIL,
                                                        MOBILE,
                                                        ADDRESS,
                                                        CITY,
                                                        COMMENTS,
                                                        ABUNDANCE,
                                                        MTGT,
                                                        STATE1

                                                        VALUES (
                                                        <cfqueryparam cfsqltype="cf_sql_longvarchar" value="#trim(FORM.COMPANY)#" null="#isCOMPANYNull#" />,
                                                        <cfqueryparam cfsqltype="cf_sql_integer" value="#trim(FORM.SECTORS1)#" null="#isSECTORS1Null#" />,
                                                        <cfqueryparam cfsqltype="cf_sql_integer" value="#trim(FORM.RANKING)#" null="#isRANKINGNull#" />,
                                                        <cfqueryparam cfsqltype="cf_sql_integer" value="#trim(FORM.PRICE)#" null="#isPRICENull#" />,
                                                        <cfqueryparam cfsqltype="cf_sql_integer" value="#trim(FORM.DEPARTMENT1)#" null="#isDEPARTMENT1Null#" />,
                                                        <cfqueryparam cfsqltype="cf_sql_longvarchar" value="#trim(FORM.FIRSTNAME)#" null="#isFIRSTNAMENull#" />,
                                                        <cfqueryparam cfsqltype="cf_sql_longvarchar" value="#trim(FORM.POS)#" null="#isPOSNull#" />,
                                                        <cfqueryparam cfsqltype="cf_sql_longvarchar" value="#trim(FORM.PHONE)#" null="#isPHONENull#" />,
                                                        <cfqueryparam cfsqltype="cf_sql_longvarchar" value="#trim(FORM.EMAIL)#" null="#isEMAILNull#" />,
                                                        <cfqueryparam cfsqltype="cf_sql_longvarchar" value="#trim(FORM.MOBILE)#" null="#isMOBILENull#" />,
                                                        <cfqueryparam cfsqltype="cf_sql_longvarchar" value="#trim(FORM.ADDRESS)#" null="#isADDRESSNull#" />,
                                                        <cfqueryparam cfsqltype="cf_sql_integer" value="#trim(FORM.CITY)#" null="#isCITYNull#" />,
                                                        <cfqueryparam cfsqltype="cf_sql_longvarchar" value="#trim(FORM.COMMENTS)#" null="#isCOMMENTSNull#" />,
                                                        <cfqueryparam cfsqltype="cf_sql_timestamp" value="#MEETINGDATE#" />,
                                                        <cfqueryparam cfsqltype="cf_sql_longvarchar" value="#trim(FORM.MTGT)#" null="#isMTGTNull#" />,
                                                        <cfqueryparam cfsqltype="cf_sql_integer" value="#trim(FORM.STATE1)#" null="#isSTATE1Null#" />
                                                        )
                                                        </CFQUERY>
                                                        <!---DATE_FORMAT(datetime_field_name,'%Y-%m-%d');--->
                                                        <CFLOCATION URL="testht.cfm?begin=1">
                                                        </cfif>
                                                        </cfif>

                                                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
                                                        <html xmlns="http://www.w3.org/1999/xhtml"> 
                                                        <head> 
                                                        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

                                                        <title>Sales</title> 

                                                        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
                                                        <link rel="stylesheet" href="formst.css" type="text/css" media="screen" />

                                                        </head>


                                                        <cfdump var=#qnames#>


                                                        <cfajaxproxy bind="javascript:myHandler({UsersGrid.COMPANY},{UsersGrid.SECTORS1},{UsersGrid.DEPARTMENT 1})"/>
                                                        <script type="text/javascript">
                                                          function myHandler(COMPANY,SECTORS1,DEPARTMENT1) {
                                                              //update the link's href
                                                              document.getElementById('myLink').href = 'http://www.google.com/search?q=' + COMPANY;
                                                              document.getElementById('Linkedin').href = 'http://www.google.com/search?q=linkedin' + COMPANY;

                                                              //update SECTORS1's selected
                                                              var theField = document.getElementById('SECTORS1');
                                                              for(var i=0; i<theField.options.length; i++) {
                                                                  if(theField.options[i].value==SECTORS1) {
                                                                      theField.options[i].selected = true;
                                                                  } else {
                                                                      theField.options[i].selected = false;
                                                                  }
                                                              }
                                                          }
                                                        </script>

                                                         

                                                        <!--- TOP --->
                                                        <body>

                                                        <div>
                                                        <cfform name="SFORM" FORMAT="html"  width="1000" height="400" style="margin-left:140px;">
                                                        <cfgrid name="UsersGrid"
                                                                   FORMAT="html"
                                                                   query="QNAMES" width="920" height="200" rowheaders="No" striperows="yes" striperowcolor="fefefe">

                                                        <cfgridcolumn name="RANKING" width="40"header="Rank">
                                                        <cfgridcolumn name="COMPANY" width="170" header="Company">
                                                        <cfgridcolumn name="FIRSTNAME"  header="Contact Name">
                                                        <cfgridcolumn name="POS" width="160" header="Position">
                                                        <cfgridcolumn name="DEPARTMENTNOM" width="150" header="Department">
                                                        <cfgridcolumn name="SECTORSNOM" width="120" header="Sectors">
                                                        <cfgridcolumn name="ABUNDANCE" width="120" header="Action date">
                                                        <cfgridcolumn name="SECTORS1" width="120" header="Action date" display="no">
                                                        <cfgridcolumn name="PRICE" width="120" header="Action date" display="no">
                                                        <cfgridcolumn name="PHONE" width="120" header="Action date" display="no">
                                                        <cfgridcolumn name="EMAIL" width="120" header="Action date" display="no">
                                                        <cfgridcolumn name="MOBILE" width="120" header="Action date" display="no">
                                                        <cfgridcolumn name="ADDRESS" width="120" header="Action date" display="no">
                                                        <cfgridcolumn name="CITY" width="120" header="Action date" display="no">
                                                        <cfgridcolumn name="COMMENTS" width="120" header="Action date" display="no">
                                                        <cfgridcolumn name="MTGT" width="120" header="Action date" display="no">
                                                           </cfgrid>

                                                        <!---FIRST--->

                                                        <table width="880" class="stat" >
                                                        <tr><td><cfoutput>#QNAMES.RecordCount# Companies</cfoutput></td></tr>
                                                        <tr>
                                                        <td>Company:<cfinput class="input" type="text" name="COMPANY" size="20" label="Company" required="yes"  bind="{UsersGrid.COMPANY}" ></td>

                                                        <td>
                                                        Sector:<cfselect class="input" name="SECTORS1" size="1" label="Sector" required="yes">
                                                        <option></option><cfoutput query="industries"><option value="#SECTORSIDS#">#SECTORSNOM#</option></cfoutput></cfselect>
                                                        </td>

                                                        <td>Ranking:<cfinput class="input"  type="TEXT" name="RANKING" size="3" label="Ranking" bind="{UsersGrid.RANKING}" ></td>
                                                        <td>Price:<cfinput class="input" type="TEXT" name="PRICE" size="3" label="Price" bind="{UsersGrid.PRICE}" >
                                                        <a href="" id="myLink" target="_blank">Google</a>
                                                        <a href="" id="Linkedin" target="_blank">Linkedin</a></td>
                                                        </tr>


                                                        <tr>
                                                        <td>Department:<cfselect class="input" name="DEPARTMENT1" size="1" label="Department" required="yes">
                                                        <option></option><cfoutput query="dNames"><option value="#DEPARTMENTIDS#">#DEPARTMENTNOM#</option></cfoutput></cfselect>

                                                        </td>
                                                        <td>Name:<cfinput class="input" type="text" name="FIRSTNAME" label="Name" required="yes" width="150" bind="{UsersGrid.FIRSTNAME}" ></td>
                                                        <td>Position:<cfinput class="input" type="text" name="POS" label="Position" width="150" bind="{UsersGrid.POS}" ></td>
                                                        <td>Phone:<cfinput class="input" type="text" name="PHONE" label="Phone" width="150" bind="{UsersGrid.PHONE}" ></td>
                                                        </tr>

                                                        <!--- THIRD--->
                                                        <tr><td>Email:<cfinput class="input" type="text" name="EMAIL" label="Email" width="150" bind="{UsersGrid.EMAIL}" ></td>
                                                        <td>Mobile:<cfinput class="input" type="text" name="MOBILE" label="Mobile"  bind="{UsersGrid.MOBILE}" ></td>
                                                        <td>Address:<cfinput class="input" type="text" name="ADDRESS" label="Address"  bind="{UsersGrid.ADDRESS}" ></td>
                                                        <td><cfselect class="input" name="CITY" width="80" size="1" >
                                                        <cfoutput query="xity"><option value="#CITYID#">#CITYNOM#</option></cfoutput>
                                                        </cfselect></td>
                                                        </tr> 

                                                         

                                                        <!--- FOURTH --->
                                                        <tr><td>Comments:<cftextarea class="input" name="COMMENTS" height="60"  label="Comments" bind="{UsersGrid.COMMENTS}" /> </td>

                                                        <td>Action:<cfinput type="DateField" class="input" size="10" name="ABUNDANCE" label="Action"  bind="{UsersGrid.ABUNDANCE}" ></td>

                                                        <td>Time:<cfselect class="input" name="MTGT" width="90" label="Time"><option>7:00AM</option></cfselect></td>

                                                        <td><cfselect class="input" name="STATE1"  size="1" label="Action" >
                                                        <cfoutput query="salesstep"><option value="#SALESID#">#SALESNOM#</option></cfoutput>
                                                        </cfselect>  </td>

                                                        <cfinput type="hidden" name="ENTID" label="ENTID" bind="{UsersGrid.ENTID}" >
                                                        </tr>

                                                        <tr> <td> 
                                                        <cfinput type="submit" name="DELCOM" value="delete" class="button" >
                                                        <cfinput type="submit" name="UPDATEADDBTN" value="UPDATE or ADD NEW" class="button"></td>
                                                        </tr>
                                                        </table>


                                                        </cfform>

                                                        <cfif isDefined("FORM.DELCOM")>
                                                        <CFQUERY name="deletecompany" datasource="tester">
                                                        DELETE FROM COMPANY
                                                        WHERE ENTID = #FORM.ENTID#
                                                        </CFQUERY>
                                                        <CFLOCATION URL="testht.cfm">

                                                        </cfif>
                                                        </div>
                                                        </body>
                                                        </html>

                                                        • 25. Re: Bind in form works with cfinput, how to with cfselect and a href
                                                          itisdesign MVP

                                                          Hi goodychurro1,

                                                           

                                                          Just add this grid column: <cfgridcolumn name="DEPARTMENT1" display="no">.  Then the bind will work w/ this:

                                                           

                                                          <cfajaxproxy bind="javascript:myHandler({UsersGrid.COMPANY},{UsersGrid.SECTORS1},{UsersGrid.DEPARTMENT 1})"/>

                                                          <script type="text/javascript">

                                                            function myHandler(COMPANY,SECTORS1,DEPARTMENT1) {

                                                                //update the link's href

                                                                document.getElementById('myLink').href = 'http://www.google.com/search?q=' + COMPANY;

                                                                document.getElementById('Linkedin').href = 'http://www.google.com/search?q=linkedin' + COMPANY;

                                                           

                                                                //update SECTORS1's selected

                                                                var theField = document.getElementById('SECTORS1');

                                                                for(var i=0; i<theField.options.length; i++) {

                                                                    if(theField.options[i].value==SECTORS1) {

                                                                        theField.options[i].selected = true;

                                                                    } else {

                                                                        theField.options[i].selected = false;

                                                                    }

                                                                }

                                                               

                                                                //update DEPARTMENT1's selected

                                                                var theField = document.getElementById('DEPARTMENT1');

                                                                for(var i=0; i<theField.options.length; i++) {

                                                                    if(theField.options[i].value==DEPARTMENT1) {

                                                                        theField.options[i].selected = true;

                                                                    } else {

                                                                        theField.options[i].selected = false;

                                                                    }

                                                                }

                                                            }

                                                          </script>

                                                           

                                                          Basically, a bind needs matching values.  The grid's new DEPARTMENT1 column contains the numeric values that match up to the DEPARTMENT1 cfselect's values.  The reason the DEPARTMENTNOM grid column isn't a good candidate for the bind, is b/c it contains the string values of the department names.

                                                           

                                                          Thanks,

                                                          -Aaron

                                                          • 27. Re: Bind in form works with cfinput, how to with cfselect and a href
                                                            itisdesign MVP

                                                            goodychurro1 wrote:

                                                             

                                                            Thanks aaron!

                                                            You're welcome!