Sunday, May 12, 2024
 Popular · Latest · Hot · Upcoming
38
rated 0 times [  42] [ 4]  / answers: 1 / hits: 6717  / 11 Years ago, sat, january 18, 2014, 12:00:00

In my html file I have 2select boxes and 4 input text boxes.



From the first select you can choose how many numbers (textboxes) would you like to use.
From the second select you can choose a mathematical operation (+,-,*,/)
According to users choice in first select, number of input boxes will appear.
Now you add numbers to these inputs and based on what you have selected and what you have in inputs, the result should appear in a particular div.



Then, when I change anything the result should be updated.



This is what I have so far:



First select:



 <select id=quantity name=qua onchange=selectQuantity(this.value)>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
</select>


first select js:



 function selectQuantity(selectedValue){
var e = document.getElementById(quantity);
var quantity = e.options[e.selectedIndex].value;

if ( quantity==='1') {
$('#nt').fadeIn();
} else if ( quantity==='2') {
$('#nt').fadeIn();
$('#nt1').fadeIn();
} else if ( quantity==='3') {
$('#nt').fadeIn();
$('#nt1').fadeIn();
$('#nt2').fadeIn();
} else {
$('#nt').fadeIn();
$('#nt1').fadeIn();
$('#nt2').fadeIn();
$('#nt3').fadeIn()
}
}


Second select html:



 <select id=operation name=ope onchange=selectOperation(this.value)>
<option value=+>+</option>
<option value=->-</option>
<option value=*>*</option>
<option value=/>/</option>
</select>


Second select js:



 function selectOperation(selectedValue){
var e = document.getElementById(operation);
var operation = e.options[e.selectedIndex].value;
}


Input text example:



 <input type=text id=nt  onchange=checkField(this.value)>


js:



 function checkField(val)
{

}


And the result div:



 <div id=result></div>


So, where and how should I put my calculations to achieve this dynamicly updated result? To a separate function?
All of my js functions are in separate js file.
Thank you.



-FIDDLE example


More From » jquery

 Answers
3

Here is a suggestion:



function calculator() {
var val1 = parseInt($('#quantity').val());
var op = $('#operation').val();

for (var i = 0; i < val1; i++) {
var incr = i ? i : '';
$('#nt' + incr).fadeIn();
}
var sum = 0;
function values2() {
var internalSum = 0;
$('[id^=nt').each(function () {
internalSum += parseInt(this.value == '' ? 0 : this.value);
});
return internalSum;
}

switch (op) {
case '+':
sum = val1 + values2();
break;
case '-':
sum = val1 - values2();
break;
case '*':
sum = val1 * values2();
break;
case '/':
sum = val1 / values2();
break;
default:
console.log('Missing parameters');
}
$('#result').html(sum);
}
$('select, input').on('change', calculator);


Demo


[#48581] Friday, January 17, 2014, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
kylanalis

Total Points: 438
Total Questions: 85
Total Answers: 102

Location: Barbados
Member since Sun, Nov 27, 2022
1 Year ago
kylanalis questions
Sat, Oct 2, 21, 00:00, 3 Years ago
Tue, Oct 13, 20, 00:00, 4 Years ago
Thu, Feb 13, 20, 00:00, 4 Years ago
Tue, Jan 7, 20, 00:00, 4 Years ago
;