how to get sum of dropdown value on each change - javascript

I want to sum of dropdown value on each change. I want to sum of selected experience value. This is my code. Please anyone help me
$(document).ready(function () {
var selects = $('select[name^=exp_year]');
selects.change(function () {
var value = 0;
selects.each(function () {
value += +this.value;
});
alert(value);
$('#dis').val(value);
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="exp_year[]" id="exp_year" class="form-control">
<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></select>
<div id="dis"></div>


This is what you need to do define var value = 0; above var selects = $('select[name^=exp_year]'); and Change $('#dis').val(value); to $('#dis').text(value);
$(document).ready(function () {
var value = 0;
var selects = $('select[name^=exp_year]');
selects.change(function () {
selects.each(function () {
value += +this.value;
});
alert(value);
$('#dis').text(value);
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="exp_year[]" id="exp_year" class="form-control">
<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></select>
<div id="dis"></div>


If I understood your question correctly, there were couple of issues with your code. You have value variable inside the change function, you need to have it outside and second you are setting the $('#dis').val(value); instead set $('#dis').html(value); Check the code snippet
$(document).ready(function () {
var value = 0;
var selects = $('select[name^=exp_year]');
selects.change(function () {
selects.each(function () {
value += +this.value;
});
alert(value);
$('#dis').html(value);
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="exp_year[]" id="exp_year" class="form-control">
<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></select>
<div id="dis"></div>


If I understand you correctly, this is what you are searching for:
<script>
$(document).ready(function () {
var value = 0;
$('#exp_year').change(function () {
value += parseInt(this.value);
alert(value);
$('#dis').text(value);
});
});
</script>
Initialize the variable value outside the change event.

Related

sum selected from html select

Tried several ways, lot of research (maybe I miss something but can't get it done) so, I was wonder if I can sum selected values of a html select
this is my code
<select id="m4r1InfoMrP" name="m4r1InfoMrP">
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="8">8</option>
</select>
And the other one
<select id="m4r1InfoMrS" name="m4r1InfoMrS" >
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="8">8</option>
</select>
my JS code
<script type="text/javascript">
var m4r1InfoMrP = document.getElementById( "m4r1InfoMrP" ),
m4r1InfoMrPValue = m4r1InfoMrP.value;
var m4r1InfoMrS = document.getElementById( "m4r1InfoMrS" ),
m4r1InfoMrSValue = m4r1InfoMrS.value;
var sum = 0;
var a = m4r1InfoMrPValue;
var b = m4r1InfoMrSValue;
sum = a + b;
document.getElementById("m4r1InfoMrPS").value = sum;
</script>
what I'm looking for is to sum the selected values and show it on m4r1InfoMrPS
thanks in advance

You need to use the change event for each <select> element. Also, you need to convert to number for addition as below.
var m4r1InfoMrP = document.getElementById("m4r1InfoMrP"),
m4r1InfoMrPValue = m4r1InfoMrP.value;
var m4r1InfoMrS = document.getElementById("m4r1InfoMrS"),
m4r1InfoMrSValue = m4r1InfoMrS.value;
m4r1InfoMrP.onchange = () => calculate();
m4r1InfoMrS.onchange = () => calculate();
function calculate() {
m4r1InfoMrPValue = m4r1InfoMrP.value;
m4r1InfoMrSValue = m4r1InfoMrS.value;
var sum = 0;
var a = +m4r1InfoMrPValue;
var b = +m4r1InfoMrSValue;
sum = a + b;
document.getElementById("m4r1InfoMrPS").value = sum;
}
calculate()
<select id="m4r1InfoMrP" name="m4r1InfoMrP">
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="8">8</option>
</select>
<select id="m4r1InfoMrS" name="m4r1InfoMrS">
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="8">8</option>
</select>
<input id="m4r1InfoMrPS" />

Change the value of label with change in drop-down value using JQuery

I am trying to change the value of label with change in drop-down value using jQuery but its not working. Please help me fix this.
<select id="myselect">
<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>
</select>
<br/>
<label id="label"></label>
<br/>
$("label").val("150.000.000");
$(("#myselect").val()).on('change', function() {
if ($("#myselect").val() == '1') {
$("#label").val("150.000.000");
} else {
$("#label").val("350.000.000");
}
});

Your selector attached to the change event is incorrect, you need to provide the id of the element as a string, not the value of the element itself. Also, label elements don't have a value you need to use text() to change them, and you can use this within the changehandler to refer to the select element. Try this:
$("label").text("150.000.000");
$("#myselect").on('change', function() {
if ($(this).val() == '1') {
$("#label").text("150.000.000");
} else {
$("#label").text("350.000.000");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect">
<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>
</select>
<br/>
<label id="label"></label>
<br/>
You can even shorten the JS code to this:
$("label").text("150.000.000");
$("#myselect").on('change', function() {
$("#label").text(function() {
return $(this).val() == '1' ? "150.000.000" : "350.000.000";
})
});

You can save all values in an array and can use value to compute index of value to be selected.
Following snippet depicts the same:
var data = ["150.000.000", "350.000.000", "550.000.000", "750.000.000"];
$("#myselect").on("change", function() {
var selectedVal = $("option:selected",this).val();
var newValue = data[parseInt(selectedVal)-1];
$("#label").text(newValue);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="myselect">
<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>
</select>
<br/>
<label id="label"></label>
<br/>

Try this code:
$(document).ready(function() {
$("label").text("150.000.000");
$("#myselect").on('change', function() {
if ($("#myselect").text() == '1') {
$("#label").text("150.000.000");
} else {
$("#label").text("350.000.000");
}
});
});

Add input fields in form when dropdown option selected

How to add fields in form dynamically
so my form looks like :
<form action="/reservation-add" method="post">
<select id="dropdownlist">
<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>
</select>
<input></input>
</form>
If selected e.g 3 it should append 3 new inputs (could be array to take all of values ) I know that I have to use javascript but I don't know how.

Use this way:
$("#dropdownlist").change(function () {
var numInputs = $(this).val();
for (var i = 0; i < numInputs; i++)
$("#inputArea").append('<input name="inputs[]" />');
});
Have another div, with the ID "inputArea":
<div id="inputArea"></div>
Snippet
$("#dropdownlist").change(function () {
var numInputs = $(this).val();
for (var i = 0; i < numInputs; i++)
$("#inputArea").append('<input name="inputs[]" />');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="dropdownlist">
<option>Select...</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>
</select>
<div id="inputArea"></div>

<form action="/reservation-add" method="post" id="appendform">
<select id="dropdownlist">
<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>
</select>
<input></input>
</form>
Jquery Code
$(document).ready(function ()
{
$('#dropdownlist').on('change',function ()
{
var howmuch = $(this).val();
var appendhtml = '';
for (i = 0; i < howmuch; i++)
{
appendhtml+= "<input name="+i+" value="">";
}
$('.appendform').append(appendhtml);
});
});

$("#dropdownlist").on("change",function(e){
for(i=0; i < $(this).val() ;i++){
$("form").append($("<input type='text'/>"));
}
})

try this
<script>
function fireChange(val) {
var form = document.forms[0];
if(val) {
for (var i = 0; i < val; i++) {
var in = document.createElement('input');
form.appendChild(in);
}
}
}
</script>
<form action="/reservation-add" method="post" onchange="fireChange(this.value)">
<select id="dropdownlist">
<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>
</select>
<input></input>
</form>

Step 1--- Add id to form
Step 2---Use jquery onchange method, code shown below
<form action="/reservation-add" method="post" id="myForm">
<select id="dropdownlist">
<option value="1"></option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
$('#dropdownlist').on("change",function() {
for(var i=0;i<this.value;i++)
{
$("#myForm").append("<input type='text' name='myname[]'/>
<br>");
}
});

To get around the problem of adding yet more input fields after the initial drop down selection (if the user changes their mind after the initial selection), which is the case with all the answers on this page.
See the solution below:
$("#dropdownlist").change(function () {
$("#inputArea > :input").remove();
var numInputs = $(this).val();
for (var i = 0; i < numInputs; i++)
$("#inputArea").append('<input name="inputs[]" />');
});

By pure JavaScript, you can do it like this;
<script>
document.getElementById("dropdown").onchange = function() {
document.querySelector("#inputarea").innerHTML = '';
for(var i = 0; i < document.getElementById("dropdown").value; i++) {
var input = document.createElement("input");
input.name = 'input_name';
input.type = 'text';
document.getElementById("inputarea").append(input);
}
}
</script>
And here is the html;
<body>
<form>
<select id="dropdown">
<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>
</select>
</form>
<div id="inputarea"></div>
</body>

how to get a value from option when select (this code working for chrome)

how to get value from option
<script>
function usgsChanged(el) {
window["display_" + el.options[el.selectedIndex].value]();
}
function display_1() {
//how to get value from option
}
</script>
how to get value from option when select
<select onchange="usgsChanged(this);">
<option value="1">1</option>
<option value="2">2</option>
<option value="">more</option>
<option value="">more</option>
<option value="">more</option>
</select>

<script>
function usgsChanged(option) {
var value = option.value; //The value now resides in this variable
}
</script>
<select onchange="usgsChanged(this);">
<option value="1">1</option>
<option value="2">2</option>
<option value="">more</option>
<option value="">more</option>
<option value="">more</option>
</select>

try something like this
$('#idOfSelectTag').change(function(){
var value = $(this).val();
alert(value);
});

Try looking at internet before sanding a question. For example here.
Try this:
<script type="text/javascript">
function usgsChanged(el) {
var index = el.selectedIndex;
var selectOptions = el.options;
var optionValue = selectOptions[index].value;
var optionText = selectOptions[index].text;
alert("Value is " + optionValue + " and text is " + optionText );
}
</script>
And HTML:
<select onchange="usgsChanged(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="">more</option>
<option value="">more</option>
<option value="">more</option>
</select>

the first dropdown is selected it would remove the selected item from the next dropdown

i have 7 dropdown boxes in html. They will all get populated the same data. What I am trying to do is when the first dropdown is selected it would remove the selected item from the next dropdown. So, if you Have data: A,B,C,D,E,F,G,H,I in one dropdown if I select B in the first drop down then in the next dropdown it should only show A,C,D,E,F,G,H,I and so on up to 7 dropdowns. I dont know what would be the best way to approach this in JavaScript. Thanks for your help in advance
Sample Code:
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

You could use attribute targeting. I'll assume jQuery, because why not.
$("select").change(function() {
$(this)
.next("select")
.find("option").removeAttr("disabled")
.end()
.find("option[value=" + $(this).val() + "]").attr("disabled", "disabled");
})​
Again, this is just an approach so if you post code we can make better guesses.
Updated
Here's the JSFiddle: http://jsfiddle.net/FaVdu/1/

How about something like this jsFiddle example? The selected options of each drop down is disabled in every other one. This allows you to change an options without removing it.
$('select').change(function() {
var ary = new Array();
$('select option:selected').each(function() {
if ($(this).val().length > 0) {
ary.push($(this).val());
}
});
$('select option').each(function() {
if ($.inArray($(this).val(), ary) > -1) {
$(this).attr('disabled', 'disabled');
} else {
$(this).removeAttr('disabled');
}
});
});​

Hi here the solution for above question check it
<script type="text/javascript">
function cleanOptions(selectedOption) {
var val = selectedOption.options[selectedOption.selectedIndex].value;
if(val!="select"){
//Clear all items
$("#drop2 > option").remove();
//Add all options from dropdown 1
$("#" + selectedOption.id + "> option").each(function () {
var opt = document.createElement("option");
opt.text = this.text;
opt.value = this.value;
document.getElementById("drop2").options.add(opt);
});
//Remove selected
$("#drop2 option[value='" + val + "']").remove();
}
}
</script>
<select id="drop1" onchange="cleanOptions(this)">
<option value="select" selected>---select---</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" >Audi</option>
</select>
<select id="drop2">
<option value="select" selected>---select---</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" >Audi</option>
</select>

Categories

Resources