2 Replies Latest reply on Sep 3, 2015 10:06 AM by jamie61880

    set variable from text entered in a text box

    jamie61880 Level 1

      Hi. I have 2 text boxes in a form the user can type numbers into. I just want to add the numbers they type in together and output the answer. I'm starting off simple and will get more complicated with my calculations later. I actually have the calculations working if they are entered into a database, but we need this to work on the fly depending on what the user typed into the text boxes.

      I am only able to set the text box values and output them, but I cannot get them to add together. I have some javascript that outputs what was typed into the boxes by using CFSet. Is this the way I should write this? Is there a way to condense the javascript, or do I need to separate each set of text box code out? Is there a different way to do this simple calculation with just Cold Fusion, or do I need the javascript to grab the numbers that are entered into the text boxes? Here's the code I have below. If you remove the CFset price and the output of Price, you'll see that this code outputs the X and Y text boxes. Thanks for your help.

       

       

      <cfparam name="url.X" default="">

      <cfparam name="url.Y" default="">

      <cfoutput>

      <script type="text/javascript">

              var pageSubmit = '#jsStringFormat(url.X)#';

              function appenX(){

                  document.getElementById('submitLink').href = '?X=' +

                  encodeURIComponent(

                  (pageSubmit.length?pageSubmit + ', ':'') +

                      document.getElementById('X').value);

              }

       

        var pageSubmit = '#jsStringFormat(url.Y)#';

              function appenY(){

                  document.getElementById('submitLink').href = '?Y=' +

                  encodeURIComponent(

                  (pageSubmit.length?pageSubmit + ', ':'') +

                      document.getElementById('Y').value);

              }

          </script>

         

          <cfform name="theForm" action="##" method="get">

              <cfinput type ="text" name="X" id="X" value=""><br />

              <cfinput type ="text" name="Y" id="Y" value="">

              <input type="submit" id="submitLink" onclick="appenX();" onclick="appenY();" value="Update">

          </cfform>

         

          <cfset X = #url.X#>

          <cfset Y = #url.Y#>

          <cfset Price = X + Y>

         

          #X#<br />

          #Y#

          #Price#

         

      </cfoutput>

       

      Andy

        • 1. Re: set variable from text entered in a text box
          BKBK Adobe Community Professional & MVP

          Mixing Javascript with Coldfusion is unnecessarily complex. If all you need is to add the value of two form fields, then just Google javascript add form fields and you will get plenty of suggestions.

           

          For example, http://stackoverflow.com/questions/5074073/how-can-i-add-form-values-using-javascript

           

          <head>

          <script type="text/javascript">

          function startCalc(){

            interval = setInterval("calc()",1);

          }

          function calc(){

            one = document.form1.quantity.value;

            two = document.form1.price.value;

            c = parseFloat(one) + parseFloat(two)

            document.form1.total.value = (c);

          }

          function stopCalc(){

            clearInterval(interval);

          }

          </script>

           

          </head>

          <body>

          <form name="form1">

          X: <input name="x" id="quantity" ><br>

          Y: <input name="y" id="price"><br>

          Total: <input name="total" readonly=true><br>

          <input onclick="startCalc();" onmouseout="stopCalc()" type="button" value="Submit">

          </form>

           

          </body>

          • 2. Re: set variable from text entered in a text box
            jamie61880 Level 1

            BKBK,

                Yes, this does work! Thank you. I was able to figure out a way to get this to work using just Cold Fusion also like this below. I just tested with a different calculation. I was just having problems with getting the text I was typing into the boxes to be used in my calculations. Thanks for your help!

             

            <cfif NOT isDefined("form.submit")>

             

            <cfif isDefined('form.Part')>

            <cfset page.select_Part = form.Part>

            </cfif>

             

            <cfif isDefined('form.X')>

            <cfset page.select_X = form.X>

            </cfif>

             

            <cfif isDefined('form.Y')>

            <cfset page.select_Y = form.Y>

            </cfif>

             

            </cfif>

             

             

            <cfoutput>

            <form name="DropDown" method="post">

             

            <tr>

            <td> </td>

            <td><table>

             

            </tr>

             

            <tr>

            <td align=right>Shin-Etsu Part Number:</td>

            <td align=left>

              <cfif Not isDefined('form.select_Part')>

                <select name="Part">

                <option selected value="">Part Number</option>

                <option value="MT0.1Px50x50x0.75T">MT0.1Px50x50x0.75T</option>

              <option value="MT4x0.05Px50x50x0.5T">MT4x0.05Px50x50x0.5T</option>

              <option value="MTP4x0.05Px15x50x0.25T">MTP4x0.05Px15x50x0.25T</option>

              <option value="MT0.1Px56x56x0.5T">MT0.1Px56x56x0.5T</option>

              </select>

                </cfif>

                </td>

            </tr>

             

            <tr>

            <td class="edit" align="right">X_mm:</td>

            <td>

            <cfif Not isDefined('form.select_X')>

            <input type="text" name="X" size="50">

            </cfif>

            </td>

            </tr>

             

            <tr>

            <td class="edit" align="right">Y_mm:</td>

            <td>

            <cfif Not isDefined('form.select_Y')>

            <input type="text" name="Y" size="50">

            </cfif>

            </td>

            </tr>

             

            <tr>

            <td> </td>

            <td>

             

            <!------------------ SUBMIT/RESET FORM ------------------>

            <input type="submit" onChange="this.form.submit()" value="Add"> 

            <input type="reset" value="Reset">

            </td>

            </tr>

             

            </table>

             

            </form>

             

             

            <cfif isDefined('page.select_Part') and isDefined('page.select_X') and isDefined('page.select_Y')>

            <tr>

            <td> </td>

            <td><table cellpadding="4"> <td>Info:</td>

            <td>#X#</td>

            <td>#Y#</td>

            <td>#Part#</td>

             

            <cfset Price = Int(50/X)>

            <td>#Price#</td>

             

            </tr>

            </cfif>

            </CFOUTPUT>

             

            Andy