Highlighted

set variable from text entered in a text box

Engaged ,
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

Adobe Community Professional
Correct answer by BKBK | Adobe Community Professional

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>

Views

2.5K

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

set variable from text entered in a text box

Engaged ,
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

Adobe Community Professional
Correct answer by BKBK | Adobe Community Professional

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>

Views

2.5K

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
Sep 02, 2015 0
Adobe Community Professional ,
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
Reply
Loading...
Sep 03, 2015 0
Engaged ,
Sep 03, 2015

Copy link to clipboard

Copied

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
Reply
Loading...
Sep 03, 2015 0