I'm looking to write a jQuery function that will change the value of other input boxes when an onBlur event occurs. In the code below, I'm attempting to read in the value of the input box that has been altered and use its value to manipulate the value of the other input boxes. Eventually, this will be used as a conversion utility. I feel like I'm pretty close here, can someone help?
Thanks!
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js">
<script type="text/javascript">
$('#a').bind('blur', function() {
var a = $('#a').val();
var b = a*1;
var c = a*1;
$('#b').val(b);
$('#c').val(c);
});
$('#b').bind('blur', function() {
var b = $('#b').val();
var a = b*2;
var c = b*2;
$('#a').val(b);
$('#c').val(c);
});
$('#c').bind('blur', function() {
var c = $('#c').val();
var a = c*3;
var b = c*3;
$('#a').val(a);
$('#b').val(b);
});
</script>
<div style="width:500px">
<table width="500">
<tr>
<td><input type="text" id="a" value="1"/></td>
<td><input type="text" id="b" value="1"/></td>
<td><input type="text" id="c" value="1"/></td>
</tr>
</table>
</div>
Change
$('#a').val(b);
to
$('#a').val(a);
in second bind.
i found your error:
change this:
$('#b').bind('blur', function() {
var b = $('#b').val();
var a = b*2;
var c = b*2;
$('#a').val(b);
$('#c').val(c);
});
to this:
$('#b').bind('blur', function() {
var b = $('#b').val();
var a = b*2;
var c = b*2;
$('#a').val(a);
$('#c').val(c);
});
you accidentally gave $('#a').val = b when there is no b
see answer working fully here:
http://jsfiddle.net/Ru6FV/
You would probably want to fire whole javascript after html is loaded correctly:
$(function() {
$('#a').bind(...
...
});
});
What exactly is the issue? It seems to work somehow (didn't check for the calculations)... implementation with jsfiddle
You are missing the </script> tag after loading jquery.
Related
Thanks for stopping by! I have a piece of working code here at JSFiddle
It's a basic sort of a calculator that takes 4 values, runs them through a function and spits out the result. It works as expected until I try to refactor the code. As soon as I try to refactor it at least like this, which gives me NaN or 0 whatever I do.
Here's the original code itself
<!DOCTYPE html>
<html>
<body>
See how rich you can get just flipping stuff
<input type="number" id="bp" placeholder="Buying price">
<input type="number" id="n" placeholder="Amount">
<input type="number" id="sp" placeholder="Selling price">
<input type="number" id="t" placeholder="Tax % (1 by def, 3 prem)">
<button id="button" onclick="profit()">Get rich!</button>
<input type="text" id="r" placeholder="Profit (unless ganked)">
<button id="button" onclick="resetOnClick()">More!</button><br>
<p>Thank HumbleOldMan later, go get rich now.</p>
var profit = function(){
var bp = document.getElementById("bp").value;
var n = document.getElementById("n").value;
var sp = document.getElementById("sp").value;
var t = document.getElementById("t").value;
var result = Math.floor((sp*n-(sp*n/100)*t)-bp*n)
console.log(result);
document.getElementById("r").value = result;
}
var resetOnClick = function(){
document.getElementById("t").value =
document.getElementById("sp").value =
document.getElementById("n").value =
document.getElementById("bp").value = "";
console.log("reset clicked");
}
// just couldn't use assigned variables for DOM references for a reason. Must be scope bs or I'm just a noob//
And here is what I tried doing
<script type="text/javascript">
var bp = Number(document.getElementById("bp").value);
var n = Number(document.getElementById("n").value);
var sp = Number(document.getElementById("sp").value);
var t = Number(document.getElementById("t").value);
var r = Number(document.getElementById("r").value);
var result;
var calcProfit = function(bp,n,sp,t,r){
var result = Math.floor((sp*n-(sp*n/100)*t)-bp*n)
console.log(Number(result));
r = Number(result);
}
var resetOnClick = function(){
document.getElementById("t").value =
document.getElementById("sp").value =
document.getElementById("n").value =
document.getElementById("bp").value = "";
console.log("reset clicked");
}
</script>
The question is common. What am I doing wrong? I definitely don't wont to settle for the fist version and get used to doing things just like that. Any assistance will be highly appreciated.
You've to get the value of input fields while after click, not on page load which will give value to NaN because initially all are empty. Get inside the calcProfit function so you'll get updated values.
I tried to make a text type input named 'pr2__answer', but when I view the value of it using console.log(answer.val()), it appears 'undefined'. I don't know why.
This is part of my code:
var country_capital_pairs = pairs;
var new_pairs = {};
for (var i = 0; i < country_capital_pairs.length; i++) {
new_pairs[country_capital_pairs[i].country] = country_capital_pairs[i].capital;
}
var capital_names = Object.values(new_pairs);
var question = $("#pr2__question");
var answer = $("#pr2__answer");
var len = country_capital_pairs.length;
var Q = country_capital_pairs[Math.floor(Math.random()*len)];
var question_country = Q.country;
question.html(question_country);
answer.autocomplete({
minLength: 2,
source: capital_names,
select: function(evt, ui) {
console.log(ui);
answer.val(ui.item.value);
$("input#pr2__submit").click();
return false;
}
}).focus();
The function answer.autocomplete doesn't work. So I think the problem is that the program doesn't remind that I am typing something in the input. Can anyone tell me why?
And this is a part of my HTML code:
<tr>
<td id="pr2__question"></td>
<td><input type="text" id=pr2__answer" /></td>
<td><input type="submit" id="pr2__submit" value="seeAnswer()" //></td>
</tr>
You need to put your javascript code in the end of your html page or put you code inside of the function :
$( document ).ready(function() {
// your code
});
Here is my html and js:
function calculateFun()
{
var a = document.getElementById('a').value;
var b = document.getElementById('b').value;
var c = document.getElementById('c').value;
var d = document.getElementById('d').value;
var e = document.getElementById('e').value;
var f = a*b;
document.getElementById('f').value = f;
var g = (f + (f*(d/100))).toFixed();
document.getElementById('g').value = g;
var h = ((1 -((a*c)/e))*100).toFixed();
document.getElementById('h').value = h;
}
<input type="number" id="a" onkeyup="calculateFun();" />
<input type="number" id="b" onkeyup="calculateFun();" />
<input type="number" id="c" value="100" />
<input type="number" id="d" value="50" />
<input type="number" id="e" onkeyup="calculateFun();" />
<br><br><p>******</p><br><br>
<input type="number" id="f" />
<input type="number" id="g" />
<input type="number" id="h" />
I tried this code in JSFIDDLE:
https://jsfiddle.net/1ex3b1sa/
but it is not working. also in my site, the function isn't invoked.
it is strange because, i can invoke other functions that i did, almost with the same way.
i tried changing to onclick, onkeypress or onkeydown, but can't see any results..
any ideas? maybe i have a typo? or maybe its a chrome problem?
In JSFiddle, you need to set your JavaScript wrap to "No wrap - in <head>" or else you'll get an "Uncaught ReferenceError: calculateFun is not defined" error.
Make sure that the function is here:
<html>
<head>
<script type="text/javascript">
function calculateFun() {
// ...
You could actually keep the function definition in the onLoad wrap and change:
function calculateFun() {
To this:
window.calculateFun = function() {
And it will work because you are adding your function as a static method to the browser's Window.
On the left side of jsfiddle.net is a box with "Frameworks & Extensions".
In the second select box you have to select:
No wrap - in <body>
or
No wrap - in <head>
Then it will work. If you dont do that the function will not be defind and it will run just once (in the OnLoad Event).
please learn jquery, its not that hard and will help you!
your fiddle in functioning jquery: https://jsfiddle.net/1ex3b1sa/3/
input-fields got class='calc'
and js:
$('.calc').keyup(function(){
var a = $('#a').val();
var b = $('#b').val();
var c = $('#c').val();
var d = $('#d').val();
var e = $('#e').val();
var f = a * b;
$('#f').val(f);
var g = (f + (f*(d/100))).toFixed();
$('#g').val(g);
var h = ((1 -((a*c)/e))*100).toFixed();
$('#h').val(h);
});
I need to copy the text entered in a field (whether it was typed in, pasted or from browser auto-filler) and paste it in another field either at the same time or as soon as the user changes to another field.
If the user deletes the text in field_1, it should also get automatically deleted in field_2.
I've tried this but it doesn't work:
<script type="text/javascript">
$(document).ready(function () {
function onchange() {
var box1 = document.getElementById('field_1');
var box2 = document.getElementById('field_2');
box2.value = box1.value;
}
});
</script>
Any ideas?
You are almost there... The function is correct, you just have to assign it to the change event of the input:
<script type="text/javascript">
$(document).ready(function () {
function onchange() {
//Since you have JQuery, why aren't you using it?
var box1 = $('#field_1');
var box2 = $('#field_2');
box2.val(box1.val());
}
$('#field_1').on('change', onchange);
});
$(document).ready(function() {
$('.textBox1').on('change', function() {
$('.textBox2').val($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="textBox1"/>
<input type="text" class="textBox2"/>
If you are using jQuery, it is very easy - you need just register the right function on the right event :)
Here's the code:
<input id="foo" />
<input id="bar" />
$(function(){
var $foo = $('#foo');
var $bar = $('#bar');
function onChange() {
$bar.val($foo.val());
};
$('#foo')
.change(onChange)
.keyup(onChange);
});
JSFiddle: http://jsfiddle.net/6khr8e2b/
Call onchange() method on the first element onblur
<input type="text" id="field_1" onblur="onchange()"/>
try with keyup event
<input type="text" id="box_1"/>
<input type="text" id="box_2"/>
$('#box_1').keyup(function(){
$('#box_2').val($(this).val());
})
Try something like:
$(document).ready(function () {
$('#field_1').on('change', function (e) {
$('#field_2').val($('#field_1').val());
});
});
Heres a fiddle: http://jsfiddle.net/otwk92gp/
You need to bind the first input to an event. Something like this would work:
$(document).ready(function(){
$("#a").change(function(){
var a = $("#a").val();
$("#b").val(a);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" id="a" />
<input type="text" id="b" />
If you want that the value of the second field is updated as the same time that the first one, you could handle this with a timeout.
Each time a key is pressed, it will execute the checkValue function on the next stack of the execution. So the value of the field1 in the DOM will already be updated when this function is called.
var $field1 = $("#field_1");
var $field2 = $("#field_2");
$field1.on("keydown",function(){
setTimeout(checkValue,0);
});
var v2 = $field2.val();
var checkValue = function(){
var v1 = $field1.val();
if (v1 != v2){
$field2.val(v1);
v2 = v1;
}
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="field_1" value=""/><br/>
<input id="field_2" value=""/>
I have this simple script, i want to multiply Var a * Var b then Multiply this by Var C with a set number eg 15.
But it doesn't seem to work?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$('input[name="box2"]').keyup(function() {
var a = $('input[name="box1"]').val();
var b = $(this).val();
var c = $(15).val();
$('input[name="box3"]').val(a * b * c);
});
</script>
</head>
<body>
<input name="box1" type="text" /><br />
<input name="box2" type="text" /><br />
<input name="box3" type="text" />
</body>
A few changes to do :
var a = parseInt($('input[name="box1"]').val(), 10);
var b = parseInt($(this).val(), 10);
var c = 15; // really no need to try to build a dom element to get an int
Beware never never use parseInt without specifying the radix (parseInt("09") is 0...).
Another problem in your code is that you try to build your jquery collection before the dom is ready. Use this :
<script>
$(function(){
$('input[name="box2"]').keyup(function() {
var a = $('input[name="box1"]').val();
var b = $(this).val();
var c = $(15).val();
$('input[name="box3"]').val(a * b * c);
});
});
</script>
Note that it's also best practice, especially when using jQuery which makes it easy, to have a script element at the end of the body to keep all the javascript that isn't in separate files.
Change var c = $(15).val(); to var c=15;
You should parse value which is string to int:
var a = parseInt($('input[name="box1"]').val());