asked on

Javascript Multiplication and IF / Else

I want to do multiplication in Javascript but I'm not sure how to write the If Else part:

<script>

function findSum(){
	var myBox1 = document.getElementById('qty1').value;	
	var myBox2 = document.getElementById('qty2').value;
	var myBox2a = if(myBox2 != '') { myBox2 } else { 1 };
	var myBox3 = document.getElementById('qty3').value;
	var myBox3a = if(myBox3 != '') { myBox3 } else { 1 };
	var result = document.getElementById('result');	
     var myResult = myBox1 * myBox2a * myBox3a;
		result.value = myResult;
}
</script>

Open in new window

Gary

Whats the problem you are having, code looks OK

Robert Granlund

ASKER

Is there a way to tighten it up? When I run it, it does not do anything . It adds up nothing.

Robert Granlund

ASKER

The whole thing:

<script>

function findSum(){
	var myBox1 = document.getElementById('qty1').value;	
	var myBox2 = <?php echo $a; ?>;
	var myBox3 = <?php echo $b; ?>;
	var result = document.getElementById('result');	
     var myResult = myBox1 * myBox2 * myBox3;
		result.value = myResult;
}
</script>
?>
<script>

function findSum(){
	var myBox1 = document.getElementById('qty1').value;	
	var myBox2 = document.getElementById('qty2').value;
	var myBox2a = if(myBox2 != '') { myBox2 } else { 1 };
	var myBox3 = document.getElementById('qty3').value;
	var myBox3a = if(myBox3 != '') { myBox3 } else { 1 };
	var result = document.getElementById('result');	
     var myResult = myBox1 * myBox2a * myBox3a;
		result.value = myResult;
}
</script>

<title>HTML5 Page With JavaScript Form Input Control Summation</title>
</head>
<body>

<form>
Qty1 : 	<input name="qty1" id="qty1" class="qty" value="183.60" autocomplete="off" /><br>
Qty2 : 	<select name="qty2" id="qty2" class="qty" autocomplete="off" >
			<option value="">Select an option...</option>
			<option value="1">1</option>
			<option value=".925">.925</option>
			<option value=".85">.85</option>
			<option value=".80">.80</option>
		</select>
		
	<br>
Qty3 : <select name="qty3" id="qty3" class="qty" autocomplete="off" >
			<option value="">Select an option...</option>
			<option value="1.00">1.00</option>
			<option value="1.00">1.00</option>
			<option value=".85">.85</option>
			<option value=".80">.80</option>
		</select>
<br>
Total : <input readonly type="text" name="total" id="result"/>
<input type="button" value="Preview" onclick="findSum()" />
</form>

Open in new window

Ray Paseur

See if this makes sense. It sets a default value for the select controls.

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />

<script>

function findSum(){
    var myBox1 = document.getElementById('qty1').value;
    var myBox2 = document.getElementById('qty2').value;
    var myBox3 = document.getElementById('qty3').value;
    var result = document.getElementById('result');
    var myResult = myBox1 * myBox2 * myBox3;
    result.value = myResult;
}
</script>

<title>HTML5 Page With JavaScript Form Input Control Summation</title>
</head>
<body>

<form>
Qty1 : <input name="qty1" id="qty1" class="qty" value="183.60" autocomplete="off" /><br>
Qty2 : <select name="qty2" id="qty2" class="qty" autocomplete="off" >
            <option value="1">Select an option...</option>
            <option value="1">1</option>
            <option value=".925">.925</option>
            <option value=".85">.85</option>
            <option value=".80">.80</option>
        </select>
    <br>
Qty3 : <select name="qty3" id="qty3" class="qty" autocomplete="off" >
            <option value="1">Select an option...</option>
            <option value="1.00">1.00</option>
            <option value="1.00">1.00</option>
            <option value=".85">.85</option>
            <option value=".80">.80</option>
        </select>
<br>
Total : <input readonly type="text" name="total" id="result"/>
<input type="button" value="Preview" onclick="findSum()" />
</form>

</body>
</html>

Open in new window

Gary

Change your script to the following, I assume the double script was just a pasting error

<script>
function findSum(){
	var myBox1 = document.getElementById('qty1').value;	
	var myBox2 = document.getElementById('qty2').value;

	var myBox2a = myBox2 != '' ? myBox2 : 1;

	var myBox3 = document.getElementById('qty3').value;

	var myBox3a = myBox3 != '' ? myBox3 : 1;

	var result = document.getElementById('result');	
	var myResult = myBox1 * myBox2a * myBox3a;
	result.value = myResult;
}
</script>

Open in new window

Edit
Rays makes more sense if you are just defaulting to 1

Robert Granlund

ASKER

This is all making great sense to me now. Both answers are perfect for what I am trying to do. However, I have one last piece that I am trying to understand and the script follows. The second script findSum() works perfect. However, I'm hug up on the first function findSubSum().

What I want it to do is to follow the class sum and multiply as it goes. As it stands right now, it adds everything up as it goes. What I want it to do is multiple by the values, (qty) not add.

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />

<script>
function findSubSum(){
    var arr = document.getElementsByClassName('qty');
    var tot = 0;
    for(var i=0;i<arr.length;i++){
        if(parseInt(arr[i].value))
            tot += parseInt(arr[i].value);
    }
    document.getElementById('sum').value = tot;
}

function findSum(){
	var myBox1 = document.getElementById('qty1').value;	
	var myBox2 = document.getElementById('qty2').value;

	var myBox2a = myBox2 != '' ? myBox2 : 1;

	var myBox3 = document.getElementById('qty3').value;

	var myBox3a = myBox3 != '' ? myBox3 : 1;

	var result = document.getElementById('result');	
	var myResult = myBox1 * myBox2a * myBox3a;
	result.value = myResult;
}
</script>

<title>HTML5 Page With JavaScript Form Input Control Summation</title>
</head>
<body>

<form method="POST" action="">
Qty1 : 	<input name="qty1" id="qty1" class="qty" onblur="findSubSum()" autocomplete="off" /><br>
Qty2 : 	<select name="qty2" id="qty2" class="qty" onblur="findSubSum()" autocomplete="off" >
			<option value="">Select an option...</option>
			<option value="1">1</option>
			<option value=".925">.925</option>
			<option value=".85">.85</option>
			<option value=".80">.80</option>
		</select>
		
	<br>
Qty3 : <select name="qty3" id="qty3" class="qty" onblur="findSubSum()" autocomplete="off" >
			<option value="">Select an option...</option>
			<option value="1.00">1.00</option>
			<option value="1.00">1.00</option>
			<option value=".85">.85</option>
			<option value=".80">.80</option>
		</select>
<br>
SUM So Far: <input readonly type="text" name="sum" id="sum"/><br /><br />
<input type="button" value="Preview" onclick="findSubSum()" /><br /><br /><br />
Total : <input readonly type="text" name="total" id="result"/>
<input type="button" value="Preview" onclick="findSum()" />

</form>

</body>
</html>

Open in new window

I'm going to get this!

Gary

function findSubSum(){
	arr = document.getElementsByClassName('qty');
	tot = 1;
	for(var i=0;i<arr.length;i++){
	        tot *= arr[i].tagName === 'SELECT' ? parseFloat(arr[i].options[arr[i].selectedIndex].value) || 1 :parseFloat(arr[i].value)||1
	}
	document.getElementById('sum').value = tot;
}

Open in new window

Robert Granlund

ASKER

@Gary but what if they are not just select , maybe there is a combination of Select, radio buttons, input boxes, that all have a value.

Ray Paseur

CodeAvengers JavaScript Class. Be sure you're up to speed on HTML first. Just sayin'

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Ray Paseur

It's traditional to award at least some of the points to the first correct answer, so I have to assume that you accidentally overlooked the code snippet here, which was a tested and working example showing exactly how to solve the problem. In particular, line 14 of the snippet shows how to do multiplication in JavaScript.
https://www.experts-exchange.com/questions/28484523/Javascript-Multiplication-and-IF-Else.html?anchorAnswerId=40221743#a40221743