I'm new to jQuery
I have a dropdown field and input field. Everytime I change the dropdown field, the value from the selected dropdown field needs to update in the total automatically.
The value only changes when i put something in the input field. I tested it with .change but it doesn't work
$(function() {
$('input').keyup(function() { // run anytime the value changes
var firstValue = parseFloat($('#id_turnover').val()) || 0; // get value of field
var secondValue = parseFloat($('#id_invoiced').val()) || 0; // convert it to a float
var thirdValue = parseFloat($('#id_collected').val()) || 0;
var fourthValue = parseFloat($('#id_otherfield').val()) || 0;
var total = firstValue + secondValue + thirdValue; // add them together
$('#added').html(total); // output it
$('#added2').html(total + fourthValue); // add them and output it
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="turnover">
<option value="20" id="id_turnover">kuzkit</option>
<option value="20" id="id_invoiced">testt</option>
<option value="20" id="id_collected">tetetessr</option>
<div id="container">Total<span style="clear:both;" id="added"></span>
<br>
</div>
<input type="text" id="id_otherfield" />
</select>
<div id="container2">Total + random field<span style="clear:both;" id="added2"></span>
<br>
</div>
Here is my fiddle
Add multiple events on multiple elements. Your closing </select> was wrong.
$('input, select').on('input change', function() {
// run anytime the value changes
updateTotals()
});
function updateTotals() {
var firstValue = parseFloat($('#id_turnover').val()) || 0; // get value of field
var secondValue = parseFloat($('#id_invoiced').val()) || 0; // convert it to a float
var thirdValue = parseFloat($('#id_collected').val()) || 0;
var fourthValue = parseFloat($('#id_otherfield').val()) || 0;
var total = firstValue + secondValue + thirdValue; // add them together
$('#added').text(total); // output it
$('#added2').text(total + fourthValue); // add them and output it
}
$('input, select').on('input change', function() { // run anytime the value changes
updateTotals()
});
function updateTotals() {
var firstValue = parseFloat($('#id_turnover').val()) || 0; // get value of field
var secondValue = parseFloat($('#id_invoiced').val()) || 0; // convert it to a float
var thirdValue = parseFloat($('#id_collected').val()) || 0;
var fourthValue = parseFloat($('#id_otherfield').val()) || 0;
var total = firstValue + secondValue + thirdValue; // add them together
$('#added').text(total); // output it
$('#added2').text(total + fourthValue); // add them and output it
}
* {
float: left;
clear: left;
margin: 10px 0;
}
#container {
clear: both;
margin: 10px 0;
}
#container2 {
clear: both;
margin: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="turnover">
<option value="20" id="id_turnover">kuzkit</option>
<option value="20" id="id_invoiced">testt</option>
<option value="20" id="id_collected">tetetessr</option>
</select>
<div id="container">Total<span style="clear:both;" id="added"></span>
</div>
<input type="text" id="id_otherfield" />
<div id="container2">Total + random field<span style="clear:both;" id="added2"></span>
</div>
Related
I'm working with JavaScript and am having issues with a couple of for loops at a specific value.
When the slider value is incremented, the amount of pics increase by one and vice versa for when its lowered. However, for a reason I'm unsure of, it will remove one of the pics when the slider is incremented from 9 to 10, and will add one when it's lowered from 10 to 9. This problem doesn't occur anywhere else in the slider, so I'm not sure whats going on.
Here's the code. The picture used isn't attached but the missing image favicon does the same job.
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var prevnumb = 0;
var num = 2
var numberofdivs = 0;
output.innerHTML = slider.value;
slider.oninput = function() {
prevnum = num;
output.innerHTML = this.value;
num = this.value;
var newnum = num;
var newprevnum = prevnum;
console.log(prevnum, num);
if (prevnum > num) {
for (newnum; newprevnum > newnum; newnum++) {
var element = document.getElementById("id");
element.parentNode.removeChild(element);
}
} else if (num > prevnum) {
for (newprevnum; newnum > newprevnum; newprevnum++) {
var picpol = document.createElement("img");
picpol.src = "polee.png";
picpol.setAttribute("id", "id");
picpol.setAttribute("class", "polio");
document.getElementById("basecontainer").appendChild(picpol);
console.log(picpol);
}
} else {
console.log("no change");
}
}
body {
text-align: center;
}
#basecustom {
text-align: center;
}
.polio {
margin: none;
padding: none;
}
Base Customization
<br>
<br>
<div id="basecustom">
Select your amount of pics
<input type="range" min="2" max="25" value="2" id="myRange">
<p>Value: <span id="demo"></span></p>
<div id="valcont"></div>
<div id="basecontainer">
<img class="polioo" src="polee.png" id="id"><img class="polioo" src="polee.png" id="id">
</div>
</div>
You were missing casting value to int. By default it is string.
num = parseInt(this.value);
Above casting will fix your problem.
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var prevnumb = 0;
var num = 2
var numberofdivs = 0;
output.innerHTML = slider.value;
slider.oninput = function() {
prevnum = num;
output.innerHTML = this.value;
num = parseInt(this.value);
var newnum = num;
var newprevnum = prevnum;
console.log(prevnum, num);
if (prevnum > num) {
for (newnum; newprevnum > newnum; newnum++) {
var element = document.getElementById("id");
element.parentNode.removeChild(element);
}
} else if (num > prevnum) {
for (newprevnum; newnum > newprevnum; newprevnum++) {
var picpol = document.createElement("img");
picpol.src = "https://www.vyapin.com/blog/wp-content/uploads/2012/07/bullet_04-1.gif";
picpol.setAttribute("id", "id");
picpol.setAttribute("class", "polio");
document.getElementById("basecontainer").appendChild(picpol);
console.log(picpol);
}
} else {
console.log("no change");
}
}
body {
text-align: center;
}
#basecustom {
text-align: center;
}
.polio {
margin: none;
padding: none;
}
Base Customization
<br>
<br>
<div id="basecustom">
Select your amount of pics
<input type="range" min="2" max="25" value="2" id="myRange">
<p>Value: <span id="demo"></span></p>
<div id="valcont"></div>
<div id="basecontainer">
<img class="polioo" src="https://www.vyapin.com/blog/wp-content/uploads/2012/07/bullet_04-1.gif" id="id"/><img class="polioo" src="https://www.vyapin.com/blog/wp-content/uploads/2012/07/bullet_04-1.gif" id="id"/>
</div>
</div>
change num = this.value; to num = parseInt(this.value,10); in your original code, num will be a string. so when it increments to 10, you will get a string '10'. And prevnum is '9'. And if (prevnum > num) { will be true.
I created two input fields where they should substract from each other keeping a max value at 100.
Currently it substracted value is shown in the second value. I want it to be interchangeable. Irrespective of whether I put in first or second input field, the answer shows in the other.
Could someone help?
function updateDue() {
var total = parseInt(document.getElementById("totalval").value);
var val2 = parseInt(document.getElementById("inideposit").value);
// to make sure that they are numbers
if (!total) { total = 0; }
if (!val2) { val2 = 0; }
var ansD = document.getElementById("remainingval");
ansD.value = total - val2;
var val1 = parseInt(document.getElementById("inideposit").value);
// to make sure that they are numbers
if (!total) { total = 0; }
if (!val1) { val1 = 0; }
var ansD = document.getElementById("remainingval");
ansD.value = total - val1;
}
<input type="hidden" id="totalval" name="totalval" value="100" onchange="updateDue()">
<div>
Enter Value:
<input type="text" name="inideposit" class="form-control" id="inideposit" onchange="updateDue()">
</div>
<div>
Substracted:
<input type="text" name="remainingval" class="form-control" id="remainingval" onchange="updateDue()">
</div>
The simple way to achieve this would be to group the inputs by class and attach a single event handler to them. Then you can take the entered value from 100, and set the result to the field which was not interacted with by the user. To do that in jQuery is trivial:
$('.updatedue').on('input', function() {
var total = parseInt($('#totalval').val(), 10) || 0;
var subtracted = total - (parseInt(this.value, 10) || 0);
$('.updatedue').not(this).val(subtracted);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" id="totalval" name="totalval" value="100" />
<div>
Enter Value:
<input type="text" name="inideposit" class="updatedue form-control" id="inideposit" />
</div>
<div>
Subtracted:
<input type="text" name="remainingval" class="updatedue form-control" id="remainingval" />
</div>
You can easily validate this so that outputs < 0 and > 100 can be discounted, if required.
Edit your code as below
function updateDue(box) {
var total = parseInt(document.getElementById("totalval").value);
if(box == 1){
var val = parseInt(document.getElementById("inideposit").value);
// to make sure that they are numbers
if (!total) { total = 0; }
if (!val) { val = 0; }
var ansD = document.getElementById("remainingval");
ansD.value = total - val;
}else if(box == 2){
var val = parseInt(document.getElementById("remainingval").value);
// to make sure that they are numbers
if (!total) { total = 0; }
if (!val) { val = 0; }
var ansD = document.getElementById("inideposit");
ansD.value = total - val;
}
}
<input type="hidden" id="totalval" name="totalval" value="100" onchange="updateDue(0)">
<div>
Enter Value:
<input type="text" name="inideposit" class="form-control" id="inideposit" onchange="updateDue(1)">
</div>
<div>
Substracted:
<input type="text" name="remainingval" class="form-control" id="remainingval" onchange="updateDue(2)">
</div>
jQuery text() function does not append option from selection field to the span. I have two select fields in the same div. They are different and contain dynamically created numbers.
function myFunction(selector) {
var i;
for (i = 1; i <= 999; i++) {
var text = '00' + i;
selector.options[i - 1] = new Option(text.substr(text.length - 3, 3));
}
}
//usage:
myFunction(document.getElementById("patient_code"));
$('#patsiendikoodi_label #patient_code ').change(function(i, text) {
var $this = $(this);
$this.prev().find('.patsiendikoodi_label_nr').text($(this).find('option:selected').text());
}).change();
function patsient(selector) {
var i;
for (i = 1; i <= 99; i++) {
var text = '0' + i;
selector.options[i - 1] = new Option(text.substr(text.length - 2, 2));
}
}
//usage:
patsient(document.getElementById("patient_code2"));
$('#patsiendikoodi_label #patient_code2 ').change(function(i, text) {
var $this = $(this);
$this.prev().find('#patsiendi_kood').text($(this).find('option:selected').text());
console.log("WRITTEN");
}).change();
<div id="patsiendikoodi_label" class="col-sm-10">
<label class="control-label">Kood:</label>
<h4 style="color: #0DD31B; font-weight: bold;"><span id="ravimi_nimi"></span><?php foreach( $result as $row ){echo $row['user_code']; }?>- <span class="patsiendikoodi_label_nr"></span><span id="patsiendi_kood">-</span></h4>
<select data-placeholder="" id="patient_code" class="chosen-select form-control" tabindex="2">
</select>
<select data-placeholder="" id="patient_code2" class="chosen-select form-control" tabindex="2">
</select>
</div>
I am generating option values from the JavaScript. If I put the second select field in another div, it will append the selected option to the span. This picture should be better than my explanation.
But no matter what I do, it doesn't add the text.
In the second handler, prev() is finding the previous select element, not the h4 you want to search in.
Use prevAll('h4'); to find that element.
$('#patient_code2').change(function(i, text) {
var $this = $(this);
$this.prevAll('h4').find('#patsiendi_kood').text($(this).find('option:selected').text());
console.log("WRITTEN");
}).change();
function myFunction(selector) {
var i;
for (i = 1; i <= 999; i++) {
var text = '00' + i;
selector.options[i - 1] = new Option(text.substr(text.length - 3, 3));
}
}
myFunction(document.getElementById("patient_code"));
$('#patient_code').change(function(i, text) {
var $this = $(this);
$this.prev().find('.patsiendikoodi_label_nr').text($(this).find('option:selected').text());
}).change();
function patsient(selector) {
var i;
for (i = 1; i <= 99; i++) {
var text = '0' + i;
selector.options[i - 1] = new Option(text.substr(text.length - 2, 2));
}
}
patsient(document.getElementById("patient_code2"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="patsiendikoodi_label" class="col-sm-10">
<label class="control-label">Kood:</label>
<h4 style="color: #0DD31B; font-weight: bold;"><span id="ravimi_nimi"></span><?php foreach( $result as $row ){echo $row['user_code']; }?>- <span class="patsiendikoodi_label_nr"></span><span id="patsiendi_kood">-</span></h4>
<select data-placeholder="" id="patient_code" class="chosen-select form-control" tabindex="2">
</select>
<select data-placeholder="" id="patient_code2" class="chosen-select form-control" tabindex="2">
</select>
</div>
Of course, since ids are unique in a document, you could really just say:
$('#patsiendi_kood').text( $(this).find('option:selected').text() );
I have 2 html textbox for users to enter numbers. To sum those numbers, I am passing the values to JavaScript variable and after addition displaying the result to html div section
<div class="input-left"><span><input class="textbox" id="left" name="count" type="text" size="5" value="" /></span></div>
<div class="input-right"><span><input class="textbox" id="right" name="count" type="text" size="5" value="" /></span></div>
<div id="result"> </div>
javascript:
document.getElementById('left').onkeyup = function() {
var a = parseFloat(this.value);
}
document.getElementById('right').onkeyup = function() {
var b = a + parseFloat(this.value);
document.getElementById("result").innerHTML = b || 0 ;
}
But I have an issue with JavaScript. It not displaying the result. How to add both functions in same onkeyup function.
FIDDLE SETUP
Try this:
window.onload = function(){
var left = document.getElementById('left');
var right = document.getElementById('right');
var result = document.getElementById("result");
left.onkeyup = calc;
right.onkeyup = calc;
function calc() {
var a = parseFloat(left.value) || 0;
var b = parseFloat(right.value) || 0;
result.innerHTML = a + b ;
}
}
JSFiddle: http://fiddle.jshell.net/gYV8Z/3/
Update: To hide the result in case the sum equals zero , change the last line like this:
result.innerHTML = ( a + b ) || "";
JSFiddle: http://fiddle.jshell.net/gYV8Z/4/
document.getElementById('left').onkeyup = function() {
var a = parseFloat(this.value);
}
document.getElementById('right').onkeyup = function() {
var b = a + parseFloat(this.value);
document.getElementById("result").innerHTML = b || 0 ;
}
it your code, var a is local variable. make it global variable.
but i would use this code.
function add(){
return parseFloat(document.getElementById('left').value) + parseFloat(document.getElementById('right').value);
}
document.getElementById('left').onkeyup = function() {
document.getElementById("result").innerHTML = add();
}
document.getElementById('right').onkeyup = function() {
document.getElementById("result").innerHTML = add();
}
I need to display the selected sub-categories (multi) in the below div and also in some situations I need to close the div elements that are selected wrongly from the select box, so that I can add and delete elements to the div (by the above selectbox).
Even I made the similar code, but its not working for multi selection.
Briefly, I need the selected categories (multi) with close buttons in the below div.
<script type="text/javascript">
function selectlist() {
checkboxhome = document.getElementById("check");
catogery = document.getElementById("cat");
value = catogery.options[catogery.selectedIndex].value;
checkboxhome.innerHTML = "<br/> <p>" + value + "</p>";
}
</script>
<body>
<form action="#" enctype="multipart/form-data">
<select name="cat" id="cat" onchange="selectlist();" multiple="multiple">
<option>Select subcatogery</option>
<option value="fashion">Fashion</option>
<option value="jewelry">Jewelry</option>
<option value="dresses">dresses</option>
<option value="shirts">Shirts</option>
<option value="diamonds">Diamonds</option>
</select>
<div id="check">
</div></form>
</body>
</html>
Loop over the options and check if they are selected, something like this:
function selectlist() {
var checkboxhome = document.getElementById("check");
var category = document.getElementById("cat");
checkboxhome.innerHTML = '';
for (var i = 0; i < category.options.length; i++) {
if (category[i].selected) {
checkboxhome.innerHTML += "<p>" + category.options[i].value + "</p>";
}
}
}
Here is a fiddle of what could work for you: http://jsfiddle.net/maniator/W6gnX/
Javascript:
function selectlist() {
checkboxhome = document.getElementById("check");
catogery = document.getElementById("cat");
value = getMultiple(catogery);
checkboxhome.innerHTML = "<br/> <p>" + value + "</p>";
}
function getMultiple(ob)
{
var arSelected = new Array(), length = ob.length, i = 0, indexes = [];
while (ob.selectedIndex != -1 && i < length)
{
if (ob.selectedIndex != 0 && !in_array(ob.selectedIndex, indexes)) {
indexes.push(ob.selectedIndex)
arSelected.push(ob.options[ob.selectedIndex].value);
}
ob.options[ob.selectedIndex].selected = false;
i++;
}
var count = 0;
while(count < indexes.length){
ob.options[indexes[count]].selected = true;
count ++;
}
return arSelected;
}
function in_array(needle, haystack)
{
for(var key in haystack)
{
if(needle === haystack[key])
{
return true;
}
}
return false;
}