calcluation of average and show different results in two text boxes - javascript

while calculating the average i have to show different results in two different text boxes..But the results come same in only one text box...how to display the average in two different text box..here is my code
function calcAvg() {
//Get all elements with 'class="select"'
var selects = document.getElementsByClassName("select");
//Initialize vars
var avg = 0;
var count = 0;
//Calculate average
for (var i = 0; i < selects.length; i++) {
if (selects[i].value != "N/A") {
count++;
avg += Number(selects[i].value);
//Alert for debugging purposes
//alert(selects[i].value+" "+avg);
}
}
avg = avg / count;
//Output average
document.getElementById("bpover").value = avg;
}
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<input type="text" name="Average" id="bpover" readonly>
<hr>
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg();" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<input type="text" name="Average" id="bpover" readonly>


while calculating the average i have to show different results in two
different text boxes..But the results come same in only one text box
it's not working because you have two id attributes which have the same value. That is NOT valid HTML. In this case, it would be better to use class attribute as that would allow you to target multiple elements.
change id to class attributes.
step 1 - change the first input element:
<input type="text" name="Average" id="bpover" readonly>
to this:
<input type="text" name="Average" class="bpover" readonly>
step 2 - change the second input element:
<input type="text" name="Average" id="bpover" readonly>
to this:
<input type="text" name="Average" class="bpover" readonly>
then within your javascript:
change this:
document.getElementById("bpover").value = avg;
to this:
var array = document.getElementsByClassName("bpover");
array[0].value = avg;
array[1].value = avg;
further reading:
Why is it a bad thing to have multiple HTML elements with the same id
attribute?
Document.getElementsByClassName()


On your javascript function, you have to be able to specify where the input is coming from and where it's going.
function calcAvg(input_id, output_id) {
//Get all elements with 'class="select"'
var selects = document.getElementsByClassName(input_id);
//Initialize vars
var avg = 0;
var count = 0;
//Calculate average
for (var i = 0; i < selects.length; i++) {
if (selects[i].value != "N/A") {
count++;
avg += Number(selects[i].value);
//Alert for debugging purposes
//alert(selects[i].value+" "+avg);
}
}
avg = avg / count;
//Output average
document.getElementById(output_id).value = avg;
}
Great! Now we have to differentiate the inputs and the outputs just a little bit by grouping their class names.
<select class="select1" name="Value[]" onChange="calcAvg('select1','bpover1');" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select1" name="Value[]" onChange="calcAvg('select1','bpover1');" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select1" name="Value[]" onChange="calcAvg('select1','bpover1');" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select1" name="Value[]" onChange="calcAvg('select1','bpover1');" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select1" name="Value[]" onChange="calcAvg('select1', 'bpover1');" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<input type="text" name="Average" id="bpover1" readonly>
Notice that in the calcAvg() function, we now pass in the class names of both the input and the output so we know where to write to once the average is calculated.
We apply this same logic to the second row, something like
<select class="select2" name="Value[]" onChange="calcAvg('select2', 'bpover2');" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select2" name="Value[]" onChange="calcAvg('select2', 'bpover2');" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select2" name="Value[]" onChange="calcAvg('select2', 'bpover2');" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select2" name="Value[]" onChange="calcAvg('select2', 'bpover2');" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select2" name="Value[]" onChange="calcAvg('select2', 'bpover2');" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<input type="text" name="Average" id="bpover2" readonly>
Try these changes and see how that works for you.
Here is what I did in codepen.io: http://codepen.io/anon/pen/vxMLjK?editors=1010
APPENDIX:
IDs in HTML are supposed to be unique, you cannot have more than one element share the same ID. Class names on the other hand are shareable. I'm sure there are other ways to go about grouping the Select element together, I just can't think of anything of the top of my head at the moment.


Problem: Both input have same ID.
Solution: try this code
simply passed id value to identify which input you are trying to point here.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<script type="text/javascript">
function calcAvg(Input_choice) {
//Get all elements with 'class="select"'
var selects = document.getElementsByClassName("select");
//Initialize vars
var avg = 0;
var count = 0;
//Calculate average
for (var i = 0; i < selects.length; i++) {
if (selects[i].value != "N/A") {
count++;
avg += Number(selects[i].value);
//Alert for debugging purposes
//alert(selects[i].value+" "+avg);
}
}
avg = avg / count;
//Output average
if(Input_choice == 1){
document.getElementById("bpover1").value = avg;
}
else {
document.getElementById("bpover2").value = avg;
}
}
</script>
<select class="select" name="Value[]" onChange="calcAvg(1);" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg(1);" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg(1);" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg(1);" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg(1);" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<input type="text" name="Average" id="bpover1" readonly>
<hr>
<select class="select" name="Value[]" onChange="calcAvg(2);" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg(2);" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg(2);" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg(2);" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select class="select" name="Value[]" onChange="calcAvg(2);" style="width:100px">
<option name="N/A">N/A</option>
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<input type="text" name="Average" id="bpover2" readonly>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>


You are missing the point with ID. ID's are unique. One page can have only one element with ID "bpover".


You can not use same "name" or same "id" for multiple input
element's though, It might not show any errors on the client side but
it's a serious mistake.

Related

Javascript global variable vs. HTML data attribute

When we use $(this).data('options',$('#send1 option').clone());, it works, but when I use a global variable to store list data, it does not work. What is the difference between these two methods?
First method (works): This code clones data to the data attribute and then filters and copies to both send1 and send2.
$("#receiver").change(function() {
if ($(this).data('options') == undefined) {
/* Takes an array of all options-2 and kind of embeds it in select1 */
$(this).data('options',$('#send1 option').clone());
}
if ($(this).data('options-2') == undefined) {
$(this).data('options-2',$('#send2 option').clone());
}
var id1 = $(this).val();
console.log(id1);
var options1 = $(this).data('options').filter('[value=' + id1 + ']');
var options2 = $(this).data('options-2').filter('[value=' + id1 + ']');
$('.send1 ').html(options1);
$('.send2 ').html(options2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<h5>Hello ListBox</h5>
<div>
<select name="Receiver" id="receiver">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select class="send1" name="ShipFrom1" id="send1">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
<select class="send2" name="ShipFrom2" id="send2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
</div>
Second method (doesn't work): This code uses a Javascript global variable. I am trying to clone the send1 options to a and then filter the global variable according to the value of receiver. Then, I copy the a result to both send1 and send2.
var a = $('#send1 option').clone();
$("#receiver").change(function() {
var id1 = $(this).val();
console.log(id1);
var options1 = a.filter('[value=' + id1 + ']');
$('.send1 ').html(options1);
$('.send2 ').html(options1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div>
<select name="Receiver" id="receiver">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select class="send1" name="ShipFrom1" id="send1">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
<select class="send2" name="ShipFrom2" id="send2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
</div>

I don't think you are using the best method for this ...
I suggest:
function setOption() {
var receiverVal = $('#receiver').val()
$('#send1 option:not(.'+receiverVal+')').hide();
$('#send2 option:not(.'+receiverVal+')').hide();
$('#send1 option.'+receiverVal).show();
$('#send2 option.'+receiverVal).show();
$('#send1 option:visible').first().attr('selected', 'selected');
$('#send2 option:visible').first().attr('selected', 'selected');
}
setOption();
$("#receiver").change(setOption)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<select name="Receiver" id="receiver">
<option value="fruit" >Fruit</option>
<option value="animal">Animal</option>
<option value="bird" >Bird</option>
<option value="car" >Car</option>
</select>
<select class="send1" name="ShipFrom1" id="send1">
<option value="10" class="fruit" >Banana </option>
<option value="11" class="fruit" >Apple </option>
<option value="12" class="fruit" >Orange </option>
<option value="21" class="animal" >Wolf </option>
<option value="22" class="animal" >Fox </option>
<option value="23" class="animal" >Bear </option>
<option value="31" class="bird" >Eagle </option>
<option value="32" class="bird" >Hawk </option>
<option value="41" class="car" >BWM <option>
</select>
<select class="send2" name="ShipFrom2" id="send2" class="bird">
<option value="10" class="fruit" >Banana </option>
<option value="11" class="fruit" >Apple </option>
<option value="12" class="fruit" >Orange </option>
<option value="21" class="animal" >Wolf </option>
<option value="22" class="animal" >Fox </option>
<option value="23" class="animal" >Bear </option>
<option value="31" class="bird" >Eagle </option>
<option value="32" class="bird" >Hawk </option>
<option value="41" class="car" >BWM <option>
</select>

Replace value from select inside hidden input

The main mission was to add the values from two select dropdowns to one hidden input. That works great but now if a user decides to choose another input, it adds to the hidden input value rather than replace it.
Live Code: DEMO
$('#expireMM').change(function() {
var theMonth = $(this).val();
$("#expiry").val( theMonth )
})
$('#expireYY').change(function() {
var theYear = $(this).val();
$('#expiry').val($('#expiry').val() + "/" + theYear );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="expireMM" id="expireMM" >
<option value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="expireYY" id="expireYY" >
<option value="">Year</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" />

You can update the value of the #expiry input in an external function, and not based on the current value:
function getExpirationDate() {
var monthVal = $('#expireMM').val();
var yearVal = $('#expireYY').val();
if (monthVal && yearVal) {
$('#expiry').val(`${monthVal}/${yearVal}`);
} else if (monthVal) {
$('#expiry').val(monthVal);
}
console.log($('#expiry').val());
}
$('#expireMM').change(getExpirationDate)
$('#expireYY').change(getExpirationDate)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="expireMM" id="expireMM" >
<option value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="expireYY" id="expireYY" >
<option value="">Year</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" />

$("#expiry").val($("#expireMM").val() + "/" + $("#expireYY").val())

Why not generate you expiry input value on form submit?
Here is the code.
jQuery(document).ready(function($) {
$("#my-form").submit(function() {
var monthYearVal = $('#expireMM').val() + "/" + $('#expireYY').val();
$("#expiry").val(monthYearVal);
$(this).submit();
return false;
});
});
<form id="my-form" method="POST">
<table class="table">
<tr>
<td>
<select name="expireMM" id="expireMM">
<option value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="expireYY" id="expireYY">
<option value="">Year</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" /></tr>
</td>
<tr>
<tr>
<td colspan="2" align=center>
<input type="hidden" name="cvv">
<input class="right-col-inner-box" type="submit" value="Submit">
</td>
</tr>
</table>
</form>

when any of dropdown menus and radio button changes do something

I have here one radio button class="gender" and 3 dropdown menus class="type","model","acc" and one button class="query".
How to click query button when any of values of three dropdown menus changes but not change to empty value and the value of radiobutton is query?
$(document).ready(function(){
$('.type , .model , .acc').change(function(){
if($(".type select option[value='selectionKey']").attr('selected') == 'selected' && $(".model select option[value='selectionKey']").attr('selected') == 'selected' && $(".acc select option[value='selectionKey']").attr('selected') == 'selected'&& $('.gender input[type="radio"]').attr("value")=="male"){
$('.query').click();
alert('123')
}else{
}
})
})
* {
margin:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input calss="gender" type="radio" name="gender" value="male"> Male<br>
<input calss="gender" type="radio" name="gender" value="female"> Female<br>
<br>
<select calss="type">
<option value=""></option>
<option value="option1">option1</option>
<option value="option1">option2</option>
<option value="option1">option3</option>
<option value="option1">option4</option>
<option value="option1">option5</option>
</select>
<select calss="model">
<option value=""></option>
<option value="option1">option1</option>
<option value="option1">option2</option>
<option value="option1">option3</option>
<option value="option1">option4</option>
<option value="option1">option5</option>
</select>
<select calss="acc">
<option value=""></option>
<option value="option1">option1</option>
<option value="option1">option2</option>
<option value="option1">option3</option>
<option value="option1">option4</option>
<option value="option1">option5</option>
</select>
<br>
<input class="query" type="button" value="Query">

Try this:
$('input[type="radio"], select').click(function(){
alert('hello');
});
Working Fiddle

First of all you need to correct your code :
Change calss to class also for each class of type,model,account you have used same value="option1" which needs to be changed accordingly as
Change this:
<select calss="acc">
<option value=""></option>
<option value="option1">option1</option>
<option value="option1">option2</option>
<option value="option1">option3</option>
<option value="option1">option4</option>
<option value="option1">option5</option>
</select>
To this
<select class="acc">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
Now answer to your question is :
$(document).ready(function(){
$('.type , .model , .acc').change(function(){
if($(".type :selected").val() != '' || $(".model :selected").val() != '' || $(".acc :selected").val() != ''){
$('.query').click();
alert('123')
}else{
alert('no option is selected);
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input calss="gender" type="radio" name="gender" value="male"> Male<br>
<input calss="gender" type="radio" name="gender" value="female"> Female<br>
<br>
<select calss="type">
<option value=""></option>
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<select calss="model">
<option value=""></option>
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<select calss="acc">
<option value=""></option>
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<br>
<input class="query" type="button" value="Query">

1)You need to use .is(':selected') property.
.is() selector check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.
2)If you want to get value from radio button you need to use :checked property like this:
if($('.gender:checked').val()=="male"){}
Here is solution :
$('.type , .model , .acc').change(function(){
if($(".type option[value='option1']").is(':selected') && $(".model option[value='option2']").is(':selected') && $(".acc option[value='option3']").is(':selected') && $('.gender:checked').val()=="male"){
$('.query').click();
alert('123');
}else{
}
});
* {
margin:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="gender" type="radio" name="gender" value="male"> Male<br>
<input class="gender" type="radio" name="gender" value="female"> Female<br>
<br>
<select class="type">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<select class="model">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<select class="acc">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<br>
<input class="query" type="button" value="Query">

You can do that by checking the selected data value length like this- if (this.value.length > 0) and after that, trigger a click on the button :)
Demo code is given here-
$(document).ready(function()
{
$('#query').click(function()
{
alert("Query Clicked");
});
$('input[type=radio][name=gender], select').on('change', function()
{
if (this.value.length > 0)
{
$('#query')[0].click();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input calss="gender" type="radio" name="gender" value="male"> Male<br>
<input calss="gender" type="radio" name="gender" value="female"> Female<br>
<br>
<select calss="type">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<select calss="model">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<select calss="acc">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<br>
<input id="query" type="button" value="Query">

Display value in input field from multiple select field

<select name="place_have" class="form-control" multiple>
<option value="locker">locker</option>
<option value="storage">storage</option>
<option value="bathroom">bathroom</option>
<option value="food">food</option>
<option value="parking">parking</option>
<option value="play ground">play ground</option>
<option value="smoking room">smoking room</option>
</select>
Values selected above should display in another input text field below. Any help?

Using jQuery:
$("select[name='place_have']").change(function(){
var value = $(this).val();
$("input#optionOutput").val(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="place_have" class="form-control" multiple>
<option value="locker">locker</option>
<option value="storage">storage</option>
<option value="bathroom">bathroom</option>
<option value="food">food</option>
<option value="parking">parking</option>
<option value="play ground">play ground</option>
<option value="smoking room">smoking room</option>
</select>
<input type="text" id="optionOutput">

add 2 values and total them in one innerHTML

I am still learning js, and am stuck once again, I am trying to add 2 drop down menu values and total them in one innerHTML.
I am trying to take the value2 from Phones/Devices (item) then add the value from the New Activation (item1) drop down and total them in the Commission innerHTML. In the js, the commission line is cost.
I have tried adding the element in the cost line, and that did not work. also tried adding the item itself to the cost line.
here is the html and js
<table width="50%" border="0">
<tr>
<td width="20%"><div align="center">item</div></td>
<td width="20%"><div align="center">New Activation</div></td>
<td width="20%"><div align="center">Commission</div></td>
<td width="20%"><div align="center">Price</div></td>
<td width="20%"><div align="center">MEID</div></td>
<td width="20%"><div align="center">Number</div></td>
</tr>
<td><div class="styled" align="center">
<select name="item" id="item">
<option value="">Phones/Devices</option>
<option value="">-----APPLE-----</option>
<option value="200.00" value2="20.00" value3="iPhone4">iPhone 4 8GB</option>
<option value="225.00" value2="20.00" value3="iPhone416">iPhone 4 16GB</option>
<option value="250.00" value2="20.00" value3="iPhone432">iPhone 4 32GB</option>
<option value="275.00" value2="20.00" value3="iPhone464">iPhone 4 64GB</option>
<option value="300.00" value2="20.00">iPhone 4S 8GB</option>
<option value="325.00" value2="20.00">iPhone 4S 16GB</option>
<option value="350.00" value2="20.00">iPhone 4S 32GB</option>
<option value="375.00" value2="20.00">iPhone 4S 64GB</option>
<option value="400.00" value2="20.00">iPhone 5</option>
<option value="500.00" value2="30.00">iPhone 5C</option>
<option value="625.00" value2="30.00">iPhone 5S</option>
<option value="">-----BlackBerry-----</option>
<option value="75.00" value2="5.00">Curve</option>
<option value="100.00" value2="5.00">Bold</option>
<option value="225.00" value2="10.00">Q10</option>
<option value="250.00" value2="10.00">Z10</option>
<option value="">-----HTC-----</option>
<option value="100.00" value2="5.00">Incredible</option>
<option value="150.00" value2="5.00">Incredible 2</option>
<option value="150.00" value2="5.00">Evo</option>
<option value="125.00" value2="5.00">Evo Shift</option>
<option value="200.00" value2="10.00">Evo LTE</option>
<option value="175.00" value2="10.00">Rhyme</option>
<option value="225.00" value2="10.00">Rezound</option>
<option value="400.00" value2="20.00">DNA</option>
<option value="450.00" value2="20.00">HTC One</option>
<option value="600.00" value2="20.00">HTC One M8</option>
<option value="">-----Huawei-----</option>
<option value="100.00" value2="5.00">Ascend Y</option>
<option value="150.00" value2="5.00">Ascend Plus</option>
<option value="">-----LG-----</option>
<option value="50.00" value2="5.00">Optimus Dynamic</option>
<option value="100.00" value2="5.00">Optimus Zip</option>
<option value="75.00" value2="5.00">Vortex</option>
<option value="100.00" value2="5.00">Enlighten</option>
<option value="250.00" value2="10.00">Lucid</option>
<option value="200.00" value2="10.00">Revolution</option>
<option value="250.00" value2="10.00">Spectrum</option>
<option value="450.00" value2="20.00">G2</option>
<option value="">-----Motorola-----</option>
<option value="100.00" value2="5.00">Droid 2</option>
<option value="175.00" value2="5.00">Droid 3</option>
<option value="200.00" value2="10.00">Droid 4</option>
<option value="225.00" value2="10.00">Bionic</option>
<option value="250.00" value2="10.00">Razr</option>
<option value="275.00" value2="10.00">Razr Maxx</option>
<option value="300.00" value2="10.00">Razr HD</option>
<option value="350.00" value2="20.00">Moto X</option>
<option value="300.00" value2="20.00">Moto G</option>
<option value="350.00" value2="20.00">Droid Ultra</option>
<option value="">-----SAMSUNG-----</option>
<option value="200.00" value2="10.00">Galaxy Stellar</option>
<option value="250.00" value2="10.00">Galaxy Stratosphere 2</option>
<option value="225.00" value2="10.00">Galaxy Nexus</option>
<option value="225.00" value2="5.00">Epic 4G</option>
<option value="250.00" value2="10.00">Galaxy S2</option>
<option value="300.00" value2="20.00">Galaxy S3</option>
<option value="450.00" value2="20.00">Galaxy S4</option>
<option value="650.00" value2="30.00">Galaxy S5</option>
<option value="450.00" value2="20.00">Galaxy Note ll</option>
<option value="600.00" value2="30.00">Galaxy Note lll</option>
</select>
</div></td>
<td><div class="styled" align="center">
<select name="item1" id="item1">
<option value="">New Activation?</option>
<option value="5.00">YES</option>
<option value="0.00">NO</option>
</select>
</div></td>
<span style="visibility:hidden;display:none;" id="phones"></span>
<td><div align="center">
<span id="cost"></span>
</div></td>
<td><div align="center">
<span id="price"></span>
</div></td>
<td>
<div align="center">
<input name="meid" type="Text" id="meid"/>
</div>
</td>
<td>
<div align="center">
<input name="number" type="Text" id="number"/>
</div>
</td>
</tr>
and the javascript
var item = document.getElementById('item');
var item1 = document.getElementById('item1');
item.onchange = function() {
price.innerHTML = "$" + this.value;
cost.innerHTML = "$" + (this[this.selectedIndex].getAttribute('value2'));
phone.innerHTML = "" + (this[this.selectedIndex].getAttribute('value3'));
};
and here is a jsfiddle
after messing around with this modified script i think that this is the line that is not working properly
var commission = +phoneEl.getAttribute("value2");
I cant figure out what is wrong. http://jsfiddle.net/3zf8G/4/

Here:
var phoneEl = document.getElementById('item');
var activationEl = document.getElementById('item1');
function updatePrice() {
var phonePrice = +phoneEl.value;
price.innerHTML = "$"+phonePrice;
}
function updateCommission() {
var commission = +phoneEl.options[phoneEl.selectedIndex].getAttribute("value2"),
activationPrice = +activationEl.value,
totalCommission = commission + activationPrice;
cost.innerHTML = "$" + totalCommission;
}
phoneEl.onchange = function() {
updatePrice();
updateCommission();
};
activationEl.onchange = function() {
updatePrice();
updateCommission();
};
fiddle: http://jsfiddle.net/3zf8G/5/
You're not converting the values stored in your value and value2 attributes to numbers; you can parse a string into a number by preceding it with a +. And you're not watching for changes to the activation drop down. Also the variable phone is not defined. I changed your variable names for the sake of clarity.

Categories

Resources