Solved

Need to calculate total amount from 3 select statements?

Posted on 2013-06-10
5
347 Views
Last Modified: 2013-06-15
Hi,
I would like to get the total values from the 3 select statements below and then calculate and display the total points as well as a percentage score in the total_score div?

What is the best way to do this?



<div class="inputname">Production</div>
<div class="inputfield">
 
        <select style="width:50px" name="upd_application[rate_production]" id="rate_production">
          	  <option value="0"  >0</option>
		  <option value="1"  >1</option>
		  <option value="2"  >2</option>
		  <option value="3"  >3</option>
		  <option value="4"  >4</option>
		  <option value="5"  >5</option>
		  <option value="6"  >6</option>
		  <option value="7"  >7</option>
		  <option value="8"  >8</option>
		  <option value="9"  >9</option>
		  <option value="10"  >10</option>

        </select>
</div>

<div class="inputname">Entertainment</div>
<div class="inputfield">
 
        <select style="width:50px" name="upd_application[rate_entertainment]" id="rate_entertainment">
          	  <option value="0"  >0</option>
		  <option value="1"  >1</option>
		  <option value="2"  >2</option>
		  <option value="3"  >3</option>
		  <option value="4"  >4</option>
		  <option value="5"  >5</option>
		  <option value="6"  >6</option>
		  <option value="7"  >7</option>
		  <option value="8"  >8</option>
		  <option value="9"  >9</option>
		  <option value="10"  >10</option>
        </select>
</div>

<div class="inputname">Commercial Potential</div>
<div class="inputfield">
 
        <select style="width:50px" name="upd_application[rate_commercial_potential]" id="rate_commercial_potential">
          	  <option value="0"  >0</option>
		  <option value="1"  >1</option>
		  <option value="2"  >2</option>
		  <option value="3"  >3</option>
		  <option value="4"  >4</option>
		  <option value="5"  >5</option>
		  <option value="6"  >6</option>
		  <option value="7"  >7</option>
		  <option value="8"  >8</option>
		  <option value="9"  >9</option>
		  <option value="10"  >10</option>
        </select>
</div>



<div class="inputfield" style="height:80px">
<div id="total_score"></div>
</div>

Open in new window

0
Comment
Question by:sabecs
  • 2
5 Comments
 
LVL 42

Accepted Solution

by:
sedgwick earned 250 total points
ID: 39234043
	var total = parseInt($('#rate_production').val(),10) + parseInt($('#rate_entertainment').val(),10)+ parseInt($('#rate_commercial_potential').val(),10);
	var percentage = total/30*100;
	$("#total_score").text(total + " (%" + percentage + ")");

Open in new window

0
 
LVL 15

Assisted Solution

by:Jagadishwor Dulal
Jagadishwor Dulal earned 250 total points
ID: 39234047
Try this example:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#Submit").click(function(){
		var val1=$("#rate_production").val();
		var val2=$("#rate_entertainment").val();
		var val3=$("#rate_commercial_potential").val();
		var total = parseFloat(val1)+parseFloat(val2)+parseFloat(val3);
		$('#total_score').text(total);
	});
});
</script>
</head>

<body>
<div class="inputname">Production</div>
<div class="inputfield">
 
  <select style="width:50px" name="rate_production" id="rate_production">
          	  <option value="0"  >0</option>
		  <option value="1"  >1</option>
		  <option value="2"  >2</option>
		  <option value="3"  >3</option>
		  <option value="4"  >4</option>
		  <option value="5"  >5</option>
		  <option value="6"  >6</option>
		  <option value="7"  >7</option>
		  <option value="8"  >8</option>
		  <option value="9"  >9</option>
		  <option value="10"  >10</option>

        </select>
</div>

<div class="inputname">Entertainment</div>
<div class="inputfield">
 
  <select style="width:50px" name="rate_entertainment" id="rate_entertainment">
          	  <option value="0"  >0</option>
		  <option value="1"  >1</option>
		  <option value="2"  >2</option>
		  <option value="3"  >3</option>
		  <option value="4"  >4</option>
		  <option value="5"  >5</option>
		  <option value="6"  >6</option>
		  <option value="7"  >7</option>
		  <option value="8"  >8</option>
		  <option value="9"  >9</option>
		  <option value="10"  >10</option>
        </select>
</div>

<div class="inputname">Commercial Potential</div>
<div class="inputfield">
 
  <select style="width:50px" name="rate_commercial_potential" id="rate_commercial_potential">
    <option value="0"  >0</option>
		  <option value="1"  >1</option>
		  <option value="2"  >2</option>
		  <option value="3"  >3</option>
		  <option value="4"  >4</option>
		  <option value="5"  >5</option>
		  <option value="6"  >6</option>
		  <option value="7"  >7</option>
		  <option value="8"  >8</option>
		  <option value="9"  >9</option>
		  <option value="10"  >10</option>
        </select>
</div>
<div class="inputfield">
  <input type="submit" name="Submit" id="Submit" value="Submit">
</div>
<div class="inputfield" style="height:80px"></div>
<div id="total_score"></div>
</body>
</html>

Open in new window

0
 
LVL 42

Expert Comment

by:sedgwick
ID: 39234269
@sabecs
you should have at least split the points cause i posted the correct answer first.
Moreover, @jagadishdulal didn't provide the 2nd requirement of the question which is the percentage score.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Google map not loading in Bootstrap 3 modal 7 30
jquery auto complete 11 15
Question about JQuery and asp.net 3 24
Javascript Form Change 5 16
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
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)

786 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