Search code examples
javascriptcoldfusiondom-events

Passing DropDown selected value along with other selected query result set


I have a form "test.cfm" It passes values to an action page "testAction.cfm"!

test.cfm does the following:-

  1. A drop down box “fruitsList”.

  2. A query “qryFruits” that pulls data and then displays the query-result set

  3. “Add” button for every query-result set

How it should work:-

  1. The dropdown “fruitsList” is to be selected.

  2. Once the “Add” button in the result list is selected the “query-result set -CurrentRow” value is to be passed.

Add button is passing the “query-resultset -CurrentRow” value but NOT the "Drop down" Value.

How to pass the “dropdown- selected-value”?

    <!--- test.cfm --->
    <script type="text/javascript" >
          function assign_fruits()
         //  
         {
           var a = document.fruitsForm.fruitsList.selectedIndex;
           document.getElementById('salesForce').value = document.fruitsForm.fruitsList.options[a].value; 
           }
        </script>
    
    <form name="fruitsForm" >
    <table>
      <tr>
       <td>
        <select name="fruitsList" onChange="assign_fruits()">
         <option disabled="true">select One
         <option value="m1">apple
         <option value="m2" selected>orange
         <option value="m3">banana
         <option value="m4">grape
         <option value="m5">mango
        </select> 
       </td>
<!--- Trying to assign the DD-value to an input field --->
 <input  name="salesForce" value=""> 
      </tr> 
     <cfquery name="qryFruits" datasoure="#dsn#">
      Select values from Fruits_Table
     </cfquery>
     <cfloop startrow="1" endrow="#qryFruits.recordcount#" query="qryFruits">
      <cfoutput>
      <tr> 
       <td><a href="testAction.cfm">Add</a></td>     
      </tr>   
      </cfoutput>
     </cfloop>
    </table>
    
    </form>

Solution

  • You are going about this a bit unconventionally but I believe the following does what you're looking for:

     <cfdump var="#form#">
    
    <!--- test.cfm --->
    <cfset qryFruits = queryNew("fruitID,fruitName")>
    <cfset queryAddRow(qryFruits, 2)>
    <cfset querySetCell(qryFruits, "fruitID", 1, 1)>
    <cfset querySetCell(qryFruits, "fruitName", "Kiwi", 1)>
    <cfset querySetCell(qryFruits, "fruitID", 2, 2)>
    <cfset querySetCell(qryFruits, "fruitName", "Lime", 2)>
    
    <script type="text/javascript" >
        function assign_fruits() {
            var a = document.fruitsForm.fruitsList.selectedIndex;
            document.getElementById('salesForce').value = document.fruitsForm.fruitsList.options[a].value; 
        }
        function submit(id) {
            document.getElementById('fruitClicked').value = id;
            document.forms["fruitsForm"].submit();
        }
    </script>
    
    <form name="fruitsForm" id="fruitsForm" action="index.cfm" method="post">
        <p>
            <select name="fruitsList" onChange="assign_fruits();">
                <option value="">select One</option>
                <option value="m1">apple</option>
                <option value="m2" selected>orange</option>
                <option value="m3">banana</option>
                <option value="m4">grape</option>
                <option value="m5">mango</option>
            </select>
        </p>
    
        <!--- Trying to assign the DD-value to an input field --->
        <p>Fruit Slected from List Above: <input name="salesForce" id="salesForce" value=""></p>
        <p>Fruit Clicked Below: <input name="fruitClicked" id="fruitClicked" value=""></p>
        <cfloop startrow="1" endrow="#qryFruits.recordcount#" query="qryFruits">
        <cfoutput>
            <div></div><a href="##" onclick="submit(#qryFruits.fruitID#);">#qryFruits.fruitName#</a></div>
        </cfoutput>
        </cfloop>
    </form>
    

    Note that you are missing "id" attributes in some of your elements which was causing your JavaScript to fail.