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" />
Related
I am trying to run For loop in JavaScript but it is not working for me. Auto increment value is not working I tried to check by altering:
alert('add_fname_'+i);
but it is giving "add_fname_0" as output
function checkadditionals(){
var tvrs = Number(document.getElementById('additional_travellers').value);
for ( var i = 0; i < tvrs; i++) {
console.log('add_fname_' + i);
document.getElementById('add_fname_'+i).required = true;
document.getElementById('add_lname_'+i).required = true;
document.getElementById('add_dob_'+i).required = true;
document.getElementById('relation_'+i).required = true;
document.getElementById('pre_exe_'+i).required = true;
}
}
<select onchange="checkadditionals()" class="form-control" id="additional_travellers" name="additional_travellers">
<option value="0">None</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>
</select>
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>
I have a dynamic list of products, and I need to know the total amount products selected by the users, for example 4 of product1, 5 of product5 and 6 of product9, so the value of the counter must be 15 (the adition of each product selected)
<select name="product1" id="product1" class="list-of-products">
<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>
</select>
...
x products generated dynamically by php call
...
<select name="productx" id="productx" class="list-of-products">
<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>
</select>
so my counter is like
<div id="counter">
<span id="counter-value">counter</span>
</div>
I've been thinking to do it using jquery,something like
$(document).ready(
function() {
var total = 0;
$('.list-of-products :selected').each(function(i, selected){
total= total+ parseInt($(selected).text());
});
$('#counter-value').text(total);
}
);
You're near the solution. Just check my fiddle:
$(document).ready(function () {
$('.list-of-products').change(function () {
var products = $('.list-of-products :selected');
var tot = calculateTotal(products);
$('#counter-value').text(tot);
});
});
// Function
function calculateTotal(product_list) {
var total = 0;
product_list.each(function (i, selected) {
total = total + parseFloat($(selected).text());
});
return total;
}
http://jsfiddle.net/hoja/3pznw838/
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>
Excually Im not a programmer, but Im trying to learn how to make a questionnaire with html and javascript:
I have four selection boxes in a form. Each one of the selection boxes has the values through 0 to 10. The main rule of this questionnaire is to change the value of all four selection boxes so that it adds up to 10.
I figured out the following solution:
instant updated text box where it calculates the total value selected (with onChange);
validate at submit button if a total value of 10 (and not more or less) is selected.
Alternatively I would even assign a (error) message instantly when the user selects a value that exceeds the total value of 10.
I have some half baked javascripts, but I don't have enough understanding of the subject to excually connect the dots. Hope you can help me.
Tim
My framework:
<html>
<head>
<script type="text/javascript">
function editTotalValue(){
}
function validateTotalValue(){
}
</script>
</head>
<body>
<form name="form1">
<select name="question1" onChange="editTotalValue();">
<option selected 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>
<select name="question2" onChange="editTotalValue();">
<option selected 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>
<select name="question3" onChange="editTotalValue();">
<option selected 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>
<select name="question4" onChange="editTotalValue();">
<option selected 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>
<!-- Show total value selected in text box -->
<input name="totalValue" type="text" maxlength="2" readonly="true">
<!-- Validate that totalValue(); is indeed 10 and not more or less and pass on the data -->
<input name="submit" type="button" onClick="validateTotalValue();">
</form>
</body>
</html>
Here's something more in-depth that you can play with:
document.getElementById("form1").onsubmit = checkTarget;
function checkTarget(evt)
{
var el;
if(window.event)
{
//checking for IE equivalent
el = window.event.srcElement;
}else if(evt.target)
{
el = evt.target;
}
if(window.event)
{
//checking for IE equivalent
window.event.returnValue = false;
}else if(evt.preventDefault)
{
evt.preventDefault();
}
calculateValues(el);
}
function calculateValues(form)
{
var values = [];
var value = 0;
for(var i=0;i<form.elements.length;i++)
{
var el = form.elements[i];
if(el.tagName === "SELECT")
{
values.push(el.value);
}
}
for(var j=0;j<values.length;j++)
{
value = value + parseInt(values[j], 10);
}
updateValue(value);
checkValue(values, value);
}
function updateValue(value)
{
document.getElementById("result_box").value = value;
}
function checkValue(values, value)
{
var temp = [];
for(var i=0;i<values.length;i++)
{
if(values[i] > 0 && values[i] < 10)
{
temp.push(values[i]);
}
}
if(value === 10 && temp.length === 4)
{
document.getElementById("message_box").value = "You win!";
}else if(value > 10 && temp.length === 4)
{
document.getElementById("message_box").value = "Value is more than 10";
}
}
http://jsfiddle.net/YS6mm/9/
Tested as working in: Firefox 4, IE8, IE8 Compatibility View (Quirks), IE7 Quirks Mode, Chrome 4, Safari 4, and Opera 11.
function editTotalValue() {
var val = 0;
for (var i = 1; i < 5; i++) {
val = val + document.getElementById("question" + i).value;
}
var display = document.getElementbyId("totalValue");
if (val > 10) {
alert("error");
} else {
display.value = val;
}
}