Solved

Javascript Multiplication and IF / Else

Posted on 2014-07-26
11
247 Views
Last Modified: 2014-07-29
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

0
Comment
Question by:rgranlund
  • 4
  • 4
  • 3
11 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40221700
Whats the problem you are having, code looks OK
0
 
LVL 7

Author Comment

by:rgranlund
ID: 40221710
Is there a way to tighten it up?  When I run it, it does not do anything . It adds up nothing.
0
 
LVL 7

Author Comment

by:rgranlund
ID: 40221713
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

0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 109

Expert Comment

by:Ray Paseur
ID: 40221743
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

0
 
LVL 58

Expert Comment

by:Gary
ID: 40221746
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
0
 
LVL 7

Author Comment

by:rgranlund
ID: 40221761
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!
0
 
LVL 58

Expert Comment

by:Gary
ID: 40221786
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

0
 
LVL 7

Author Comment

by:rgranlund
ID: 40221834
@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.
0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 40221849
CodeAvengers JavaScript Class. Be sure you're up to speed on HTML first.  Just sayin'
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40221850
The code is for dropdowns or inputs - doesn't matter

But for radios and to make it a bit more readable

function findSubSum(){
	arr = document.getElementsByClassName('qty');
	tot = 1;
	for(var i=0;i<arr.length;i++){
		if(arr[i].type=="text"){
			v=parseFloat(arr[i].value)||1
		}
		else if(arr[i].tagName === 'SELECT'){
			v=parseFloat(arr[i].options[arr[i].selectedIndex].value) || 1
		}
		else if(arr[i].checked){
			v=arr[i].value||1
		}
	        tot *= v
	}
	document.getElementById('sum').value = tot;
}

Open in new window

0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 40227608
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.
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28484523.html#a40221743
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question