/    Sign up×
Community /Pin to ProfileBookmark

Calculation from a selectbox

Copy linkTweet thisAlerts:
Sep 03.2008

What I need is once the selection has been made, the value is multiplied by the value in textbox “val” and the result to populate textbox “add”

[code=html]<html>
<head>
</head>
<body>
<br><br>

<select>
<option value=”0″>None</option>
<option value=”1″>L</option>
<option value=”1″>R</option>
<option value=”2″>L & R</option>
</select>
<br>
<input type=”text” name=”add” id=”add”><br>
<input type=”text” name=”val” id=”val” value=”19″ readonly>

</body>
</html>[/code]

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangSep 03.2008 — &lt;select onchange="document.getElementById('add').value=parseInt(this.value)*parseInt(document.getElementById('val').value)"&gt;
Copy linkTweet thisAlerts:
@JodarecodeauthorSep 04.2008 — Ok, another question,

Im multiplying two text boxes on select change and populating textbox with result. I would like it to do "Math.round" to the nearest whole number. Given what I have writtin below, It seems to do what I want anyway.

Currently as is below I select "L" or "R" and my result is "40" instead of 40.25.

I select "L & R" and my result is "80" instead of 80.5 (of course I need it to round 40.25 before doubling to result to 80 and not 81)

Why is this working this way? I want to make sure I get the correct numbers rounded to the nearest whole number.

[code=html]
<html>
<head>
</head>
<body>
<br><br>

<select onchange="document.getElementById('add').value=parseInt(this.value)*parseInt(document.getElementById('val').value*document.getElementById('val2').value)">
<option value="0">None</option>
<option value="1">L</option>
<option value="1">R</option>
<option value="2">L & R</option>
</select>

<br>
<input type="text" name="add" id="add"><br>
<input type="text" name="val" id="val" value="23" readonly>
<input type="text" name="val2" id="val2" value="1.75" readonly>

</body>
</html>[/code]
Copy linkTweet thisAlerts:
@JodarecodeauthorSep 04.2008 — This seems to work!! Thanks a bunch!

[code=html]<html>
<body>

<br><br>
<select onchange="document.getElementById('add').value=parseFloat(this.value)*parseFloat(Math.round(document.getElementById('val').value*document.getElementById('val2').value))">
<option value="0">None</option>
<option value="1">L</option>
<option value="1">R</option>
<option value="2">L & R</option>
</select>

<br>
<input type="text" name="add" id="add"><br>
<input type="text" name="val" id="val" value="23" readonly>
<input type="text" name="val2" id="val2" value="1.75" readonly>

</body>
</html>[/code]
Copy linkTweet thisAlerts:
@JodarecodeauthorSep 04.2008 — ok next,

I need "add" value and "add1" value to add up in the "total" text box at the same time.

[code=html]<html>
<head>
</head>
<body>
<br><br>
<select onchange="document.getElementById('add').value=parseFloat(this.value)*parseFloat(Math.round(document.getElementById('val1').value*document.getElementById('val2').value))">
<option value="0">None</option>
<option value="1">L</option>
<option value="1">R</option>
<option value="2">L & R</option>
</select>

<br>
<input type="text" name="add" id="add"><br>
<input type="text" name="val1" id="val1" value="23" readonly>
<input type="text" name="val2" id="val2" value="1.75" readonly>

<br><br>
<select onchange="document.getElementById('add1').value=parseFloat(this.value)*parseFloat(Math.round(document.getElementById('val3').value*document.getElementById('val4').value))">
<option value="0">None</option>
<option value="1">L</option>
<option value="1">R</option>
<option value="2">L & R</option>
</select>

<br>
<input type="text" name="add1" id="add1"><br>
<input type="text" name="val3" id="val3" value="19" readonly>
<input type="text" name="val4" id="val4" value="2.04" readonly>

<br><br>

add + add1 value =<input type="text" name="total" id="total">

</body>
</html>

[/code]
Copy linkTweet thisAlerts:
@FangSep 04.2008 — Add a similar statement to the one in the onchange event. Give it a try.
Copy linkTweet thisAlerts:
@JodarecodeauthorSep 04.2008 — Kinda like this?

Seems to work, I just want to make sure I did it right.

[code=html]<html>
<head>
</head>
<body>
<br><br>
<select onchange="document.getElementById('add').value=parseFloat(this.value)*parseFloat(Math.round(document.getElementById('val1').value*document.getElementById('val2').value));document.getElementById('total').value=parseFloat(document.getElementById('add').value)+parseFloat(document.getElementById('add1').value)">
<option value="0">None</option>
<option value="1">L</option>
<option value="1">R</option>
<option value="2">L & R</option>
</select>

<br>
<input type="text" name="add" id="add" value="0"><br>
<input type="text" name="val1" id="val1" value="23" readonly>
<input type="text" name="val2" id="val2" value="1.75" readonly>

<br><br>
<select onchange="document.getElementById('add1').value=parseFloat(this.value)*parseFloat(Math.round(document.getElementById('val3').value*document.getElementById('val4').value));document.getElementById('total').value=parseFloat(document.getElementById('add').value)+parseFloat(document.getElementById('add1').value)">
<option value="0">None</option>
<option value="1">L</option>
<option value="1">R</option>
<option value="2">L & R</option>
</select>

<br>
<input type="text" name="add1" id="add1" value="0"><br>
<input type="text" name="val3" id="val3" value="19" readonly>
<input type="text" name="val4" id="val4" value="2.04" readonly>

<br><br>

add + add1 value =<input type="text" name="total" id="total">

</body>
</html>

[/code]
Copy linkTweet thisAlerts:
@JodarecodeauthorSep 04.2008 — ok, now a quantity question,

At anytime I enter a quantity amount in the textbox, even if its the first box or the last box to be entered, I need it to constantly update the total box multiplyied by what ever is entered in "qty".

How would I go about doing this so it stays constant?

I know I can do an onchange but what if it is entered first?

[code=html]<html>
<head>
</head>
<body>
<br><br>
<input type="text" name="qty" id="qty">
<br><br>
<select onchange="document.getElementById('add').value=parseFloat(this.value)*parseFloat(Math.round(document.getElementById('val1').value*document.getElementById('val2').value));document.getElementById('total').value=parseFloat(document.getElementById('add').value)+parseFloat(document.getElementById('add1').value)">
<option value="0">None</option>
<option value="1">L</option>
<option value="1">R</option>
<option value="2">L & R</option>
</select>

<br>
<input type="text" name="add" id="add" value="0"><br>
<input type="text" name="val1" id="val1" value="23" readonly>
<input type="text" name="val2" id="val2" value="1.75" readonly>

<br><br>
<select onchange="document.getElementById('add1').value=parseFloat(this.value)*parseFloat(Math.round(document.getElementById('val3').value*document.getElementById('val4').value));document.getElementById('total').value=parseFloat(document.getElementById('add').value)+parseFloat(document.getElementById('add1').value)">
<option value="0">None</option>
<option value="1">L</option>
<option value="1">R</option>
<option value="2">L & R</option>
</select>

<br>
<input type="text" name="add1" id="add1" value="0"><br>
<input type="text" name="val3" id="val3" value="19" readonly>
<input type="text" name="val4" id="val4" value="2.04" readonly>

<br><br>

add + add1 value =<input type="text" name="total" id="total"> * qty

</body>
</html>[/code]
Copy linkTweet thisAlerts:
@JodarecodeauthorSep 04.2008 — can anyone help?

Basically I want to keep the total box with the quantity updated on the fly
Copy linkTweet thisAlerts:
@JMRKERSep 04.2008 — I know I can do an onchange but what if it is entered first?[/QUOTE]
What is being entered first?

If a textbox, consider using an "onblur()" event to call the summation function.
×

Success!

Help @Jodarecode spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...