How would you check the combined sum of select option values and display them in another input using javascript?
<form>
<select id="first">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select id="second">
<option value="3">3</option>
<option value="4">4</option>
</select>
<input value="combined sum of select value for id='first', id='second'" type="number">
</form>
Yes, Google is a good idea to find what you're looking for.
Look for a Javascript basics and a jQuery tutorial.
I can recommend Codeschool, they are having very good free online courses for these topics. (Sign-up required but there are many free courses.) The courses are fun to do. They are structured in short video screencasts and afterwards you have to use that knowledge to pass the exercise.
And if you're stuck at some point there are always good hints to solve the exam.
What you are looking for will be something like the script below.
To select the option you can use $('#first').val() and to track changes you will use event handlers for the change event $('#first').on('change', function(){ ... }.
var adder = (function($){
var first = 0;
var second = 0;
var init = function() {
first = getOption('#first');
second = getOption('#second');
var result = add(first,second);
//console.log(result); // for debugging in console of browser
update(result);
//console.log(first,second);
};
var getOption = function(selector) {
return parseInt($(selector).val());
};
var add = function(a,b) {
return a+b;
};
var update = function(value) {
$("#result").val(value);
};
// event handlers
$('#first').on('change', function(){
first = getOption('#first');
update(add(first,second));
});
$('#second').on('change', function(){
second = getOption('#second');
update(add(first,second));
});
return {init:init};
})(jQuery);
$(function() {
// Handler for .ready() called.
adder.init();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="first">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select id="second">
<option value="3">3</option>
<option value="4">4</option>
</select>
<input id="result" value="combined sum of select value for id='first', id='second'" type="number"/>
</form>
The below code will add HTML elements together using JavaScript.
<input type="number" id="first" value="1"></input>
<input type="number" id="second" value="2"></input>
<button onclick="counter()">add</button>
<p id="display"></p>
<script>
function counter() {
var first = Number(document.getElementById("first").value);
var second = Number(document.getElementById("second").value);
var x = first + second;
document.getElementById("display").innerHTML = x;
}
</script>
Related
I am making a form where when I select familyname of the product, its values will be display in a box (I don't know what I should use todisplay it) and the box can't be edited (only can be read).
-HTML
<select name="fnme" onchange="setText(this)" multiple>
<option value="STR12(12,YU,IO)">STR12(12,YU,IO)</option>
<option value="STR13(13,YU,IO)">STR12(13,YU,IO)</option>
<option value="STR14(14,YU,IO)">STR12(14,YU,IO)</option>
<option value="STR15(15,YU,IO)">STR12(15,YU,IO)</option>
</select>
<td><textarea rows="10" cols="30" name="textBox" id="disabled" value=""/ disabled></textarea></td>
</br>
<p><input type="submit" value="Save"></p>
-ASPCode
<%
DIM fnm,element
fnm=Split(Request("fnme"),"\n")
FOR EACH element IN fnm
Response.Write("<p>--qq-- " & trim(element) & " </p>")
Next
%>
For now I'm using text area but still have a problem in displaying many value, it display on one selected value.
-JS
<script>
function setText(obj) {
var val = obj.value;
document.getElementById('textBox').value = val;
}
</script>
I want to know it is possible to display the multiple value?
When you do:
var val = obj.value;
you're only going to get the value of the first selected option, not all of them (unless you're using something like jQuery).
And the forward slash in:
<textarea ... id="disabled" value=""/ disabled>
doesn't help either. I'll assume that's just a posting typo.
function getMultiSelectValue(select) {
return [].reduce.call(select.options, function(values, option) {
option.selected? values.push(option.value) : null;
return values;
}, []);
}
function showValues(values){
document.getElementById('ta').value = values.join('\n');
}
<select onchange="showValues(getMultiSelectValue(this))" multiple>
<option value="0">0
<option value="1">1
<option value="2">2
</select>
<textarea id="ta" rows="3" readonly></textarea>
I think this could help you.
<html>
<body>
<form action="" name="tof">
<select name="fnme" onchange="setText(this)" multiple>
<option value="STR12(12,YU,IO)">STR12(12,YU,IO)</option>
<option value="STR13(13,YU,IO)">STR12(13,YU,IO)</option>
<option value="STR14(14,YU,IO)">STR12(14,YU,IO)</option>
<option value="STR15(15,YU,IO)">STR12(15,YU,IO)</option>
</select>
<textarea id="res" readOnly></textarea>
</form>
<p id="demo"></p>
<script>
function setText(ob){
var selected_options = document.forms['tof']['fnme'].selectedOptions
var selected_options_values = []
for(i=0; i<selected_options.length; i++){
selected_options_values.push(selected_options[i].value)
}
document.getElementById('res').value = selected_options_values.join('\n')
}
</script>
</body>
</html>
i have this form ..
<form method="post" action=''>
<select class="first">
<option value="0">choose ...</option>
<option value="1">Hello</option>
<option value="3">It's</option>
</select>
<select class="second">
<option value="0">choose ...</option>
<option value="2">World</option>
<option value="4">me</option>
</select>
<input type="text" class="dest" value="" />
</form>
and would like to dynamically gather selected informations with jQuery, because I need to decide on the selected values ...
When you select specific combination of OPTION values (lets say Hello + World) it should add some value to INPUT.dest and lock it (disable from editing) ...
But I can't make it work ... What I have, is that on each change of each select (separately only) i can map the actual value
$(document).ready(function () {
$(".first").change(function () {
var option = $(this).find("option:selected").val();
$(".dest").val(option);
});
$(".second").change(function () {
var option2 = $(this).find("option:selected").val();
$(".dest").val(option2);
});
});
Here is the live demo in fiddle
Do you know what am I missing? I know it will be just a little thing .. thank you
I would generalize it and use one event listener, and then gather the combination and do whatever:
$("select").change(function () {
var first = $(".first").find("option:selected").val();
var second = $(".second").find("option:selected").val();
if(first == 1 && second == 2)
$(".dest").val("Hello world").prop("disabled",true);
else
$(".dest").val("Something else").prop("disabled",false);
});
http://jsfiddle.net/cxx428af/3/
Background
Hey everyone, first off thanks for your help. This issue has been bothering my for quite a while now and I just can't seem to figure it out.
Some background, I am creating a page that links to a db that has movie posters stored. This page will allow me to retrieve specific movie posters based on two factors: the movieid that is passed and the poster size.
Specifics
I am trying to change the value of data-pp-pubid to the input from Publisher ID (in this case King Kong). I am also wanting to do the same thing for data-pp-placementtype to fill from my dropdown box.
This works if I use static information in the html. However, I am wanting to create dynamic variables to save me the trouble of constantly editing the html file. This is what I've got so far.
<div>
<form>
<select id="generic_size" name="Poster Size">
<option value="120x90">120x90</option>
<option value="120x240">120x240</option>
<option value="120x600">120x600</option>
<option value="150x100">150x100</option>
<option value="170x100">170x100</option>
<option value="190x100">190x100</option>
<option value="234x400">234x400</option>
<option value="234x60">234x60</option>
<option value="250x250">250x250</option>
<option value="280x280">280x280</option>
<option value="300x50">300x50</option>
<option value="300x250">300x250</option>
<option value="468x60">468x60</option>
<option value="540x200">540x200</option>
<option value="720x90">720x90</option>
<option value="800x60">800x60</option>
</select>
Publisher ID: <input type="text" value="King Kong" id="movieId">
<input type="submit" value="Get poster"
onclick="javascript:getMovInfo(); setSize(); getPoster();";>
</form>
</div>
<script type="text/javascript" data-pp-pubid="Mad Max" data-pp-placementtype="120x240"> (function getPoster(d, t) {
"use strict";
var s = d.getElementsByTagName(t)[0], n = d.createElement(t);
n.src = "//movietime.adtag.now.com/merchant.js";
s.parentNode.insertBefore(n, s);
}(document, "script"));
</script>
<script type="text/javascript">
function getMovInfo() {
var movRetrieve= document.getElementById("movieId").value;
var movInfo = document.getElementsByTagName("script")[2];
var movSet = movInfo.setAttribute("data-pp-pubid", movRetrieve);
}
function setSize (){
var sizeDropDown= document.getElementById("generic_size");
var sizeSelected= sizeDropDown.options[sizeDropDown.selectedIndex].value;
var sizeInScript = document.getElementsByTagName("script")[2];
var newSize = sizeInScript.setAttribute("data-pp-placementtype", sizeSelected);
}
</script>
Thanks again, this is my first post!
Ok, then you should convert the html data you have to some data in the code. An array ["300x50", ...] will do the job. Then you have to populate your select with the data.
Select numbers (you can select each number any number of times):
<select name="number_selection" method="post" id="number_selection" >
<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>
<input type="button" value="Select" id="select_button"/>
<div id="feedback"> </div>
what I've tried in jquery is this....
$('#select_button').click(function(){
var gs= $('#number_selection').val();
$('#feedback').html(gs);
});
Now, What i am trying to do is, if i select a number from the options, it should display in the 'div' and if i select another number or the same number again, it should display beside the first number, but i am only able to select only a single number, not multiple numbers. I want the do this using jquery
If you don't understand my problem, i can explain you further. Please help.
And also if I want to deselect each element from the list appended?
I've tried this... but isn't working.
$('#select_button').click(function(){
var gs= $('#number_selection').val();
$('#feedback').append(gs + ' ' + '<input type="button" value="Remove" id="gs_remove" />' + '<br>');
});
$('#gs_remove').click(function(){
(this).hide();
});
but with this i am not able to remove each selected option.
Replace
$('#fcb_pt_gs').html(gs);
by
$('#fcb_pt_gs').append(gs);
$('#select_button').click(function() {
var _val = $('#fcb_pt_gs').text();
var gs= $('#number_selection').val();
if( _val == "" ) {
var _collection = [];
}
else {
// Add in collection
var _collection = [_val];
}
_collection.push( gs );
$('#fcb_pt_gs').html( _collection.join(',') );
});
I've got a dropdown setup going on in which the user enters an input value, chooses a calculation to perform on that number from a dropdown, then a function displays the result.
What I would like is to add more 'values' to the dropdown, so when an option is selected from the list, it can also, say, display some text stored in the list, or some other information. Right now I can return the selected option's value (.value) and use the option's name (.text) to perform functions, but is there any more data I can add to each selection to be used later?
<html>
<head>
<script language="JavaScript">
function myfunction(form)
{
var i = parseFloat(form.Input.value, 10);
var e = document.getElementById("calculationList");
var strUser = e.options[e.selectedIndex].value;
form.Output.value = strUser*i;
}
</script>
</head>
<body>
<form>
Input Number:
<INPUT NAME="Input" SIZE=15>
Make a selection:
<select id="calculationList" onchange="myfunction(form)">
<option></option>
<option value="2">Double It</option>
<option value="3">Triple It</option>
<option value="10">Multiply It By ten</option>
</select>
Output Number:
<INPUT NAME="Output" SIZE=15>
</FORM>
</body>
</html>
Basically you may attach data attribute to your options like that:
<select id="calculationList">
<option></option>
<option value="2" data-aaa="10">Double It</option>
<option value="3" data-aaa="20">Triple It</option>
<option value="10" data-aaa="30">Multiply It By ten</option>
</select>
And later get the content of the attribute:
var dropdown = document.getElementById("calculationList");
dropdown.addEventListener("change", function() {
console.log(dropdown.options[dropdown.selectedIndex].getAttribute("data-aaa"));
});
jsfiddle -> http://jsfiddle.net/pzKrr/
Edit:
If you want to implement my solution remove onchange="myfunction(form)" from the select tag. After that add the following code just after that myfunction
window.onload = function() {
var dropdown = document.getElementById("calculationList");
dropdown.addEventListener("change", function() {
console.log(dropdown.options[dropdown.selectedIndex].getAttribute("data-aaa"));
});
};