Known Participant

Question

population on same page

Forum|Forum|5 years ago
July 9, 2020
5 replies
748 views

Is there a way that I can use two textboxes on a page to perform a math function and populate a third box?

This topic has been closed for replies.

WolfShade

Legend

Button removed, function happens when the cursor blurs from qty. Number formatting included.

<html>
	<head>
        <title>test math</title>
        <meta charset="utf-8" />
    </head>
	<body>
		<input type="text" name="prc" id="prc" value="" /> Price <br />
		<input type="text" name="qty" id="qty" value="" /> Qty <br />
		<input type="text" name="tot" id="tot" /> Total <br />
		<!-- <button type="button" name="calc" id="calc">Calculate</button> --><!-- Button is removed -->
		<script>
			var prc = document.getElementById("prc"),
			    qty = document.getElementById("qty"),
			    tot = document.getElementById("tot")/*,
			    calc = document.getElementById("calc")*/;
			qty.addEventListener('blur',function(){
			    if(!isNaN(prc.value) && !isNaN(qty.value)){
			        var total = ""+Number.parseFloat(prc.value * qty.value).toFixed(2)+"",
                        tArray = total.split("."),
                        iArray = ""+tArray[0]; iArray = iArray.split("").reverse(); l = iArray.length;
                    for(i = l-1; i >= 0; i--){
                        if((i % 3 === 0) && (i !== 0)){iArray.splice(i,0,',');}
                        }
                    iArray = iArray.reverse().join("");
                    tot.value = iArray + "." + tArray[1];
			        }
			    else{
			        alert('at least one of the values is not a number');
			        }
			    });
		</script>
	</body>
</html>

HTH,

^ _ ^

BKBK

Community Expert

<script type="text/javascript">
function getResult(num1, num2) {
    //converts a blank, space, null, NaN, etc. to 0
    var num1 = num1 || 0;
    var num2 = num2 || 0;

    // Decimal numbers, to 2 decimal places
	return (parseFloat(num1)*parseFloat(num2)).toFixed(2);
}
</script>

<cfform>
        <!--- Pre tag to align the text fields --->
	<pre>
    Price per unit (format $0.00): <cfinput type="text" name="price" required="yes" ><br>
                         Quantity: <cfinput type="text" name="quantity" required="yes"><br>
    <!--- I have added the 'keyup' event to the last parameter to ensure the result appears immediately, on key-up.--->
        Total Sale (format $0.00): <cfinput type="text" name="sale" bind="javascript&colon; getResult({price},{quantity@keyup})" bindonload="true">
	</pre>
</cfform>

johng58900177Author

Known Participant

I get a debug error when the page loads. States that the variables do not exist. I get one for each variable

Bind failed, element not found: Containers [Enable debugging by adding 'cfdebug' to your URL parameters to see more information]

BKBK

Community Expert

Hi johng58900177 ,

That is because the forum software converts ":" to "&colon;" after the word "javascript".

Sorry about that. Use ":" in place of "&colon;"

WolfShade

Legend

Also.. this is just the fundamental. If you want 2 decimal place and number formatting that includes the comma for thousands separation, that's a little more detailed.

HTH,

^ _ ^

WolfShade

Legend

JavaScript, it is. Easier than creating a cfc and using AJaX to post to it and return a result.

<input type="text" name="prc" id="prc" /> Price <br />
<input type="text" name="qty" id="qty" /> Qty <br />
<input type="text" name="tot" id="tot" /> Total <br />
<button type="button" name="calc" id="calc">Calculate</button>
<script>
var prc = document.getElementById("prc"),
    qty = document.getElementById("qty"),
    tot = document.getElementById("tot"),
    calc = document.getElementById("calc");
calc.addEventListener('click',function(){
    if(!isNaN(prc.value) && !isNaN(qty.value)){
        tot.value = prc.value * qty.value;
        }
    else{
        alert('at least one of the values is not a number');
        }
    });
</script>

I haven't tested it, but it should work.

HTH,

^ _ ^

johng58900177Author

Known Participant

Any way to do this without using a button? like clicking into the textbox?

WolfShade

Legend

New to developing. 🙂 Welcome!

<input type="text" name="prc" id="prc" /> Price <br />
<input type="text" name="qty" id="qty" /> Qty <br />
<input type="text" name="tot" id="tot" /> Total <br />
<script>
var prc = document.getElementById("prc"),
    qty = document.getElementById("qty"),
    tot = document.getElementById("tot");

qty.addEventListener('blur',function(){ // Performs function when quantity field is left/exited/blurred
    if(!isNaN(prc.value) && !isNaN(qty.value)){
        tot.value = prc.value * qty.value;
        }
    else{
        alert('at least one of the values is not a number');
        }
    });
</script>

HTH,

^ _ ^

WolfShade

Legend

With CF??? Or JavaScript?

CF - Maybe.

Javascript - Most likely.

What, specifically, are you attempting to calculate with two textareas?

V/r,

^ _ ^

johng58900177Author

Known Participant

either one. qnty * price = total sale. Currently I am performing this by posting the form. The end user wants it on the first page.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded