set variable from text entered in a text box

Engaged ,
Sep 02, 2015 Sep 02, 2015

Copy link to clipboard

Copied

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

Views

2.7K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Sep 03, 2015 Sep 03, 2015
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(o...

Likes

Translate

Translate
Adobe Community Professional ,
Sep 03, 2015 Sep 03, 2015

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Sep 03, 2015 Sep 03, 2015

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines