...

View Full Version : Four textboxes in a ratio - Probably simple.



Kristofa
07-18-2009, 07:52 PM
Ok, the idea is that the five inputs are in the ratio 40:5:4:3:2, and the user can edit each of the textboxes and have the other four update accordingly onchange. Not had a lot of experience with Javascript, so this could be a simple concept I've misunderstood or something, but can anyone explain why this isn't working?



<script type="text/javascript">
function update(m,n,o,p,q) {
var a=document.getElementById(m).value;
var b=document.getElementById(n).value;
var c=document.getElementById(o).value;
var d=document.getElementById(p).value;
var e=document.getElementById(q).value;

var xtx='40';
var xgox='5';
var xcx='4';
var xgrx='3';
var xbx='2';

b=a*(n+'x')/(m+'x');
c=a*(o+'x')/(m+'x');
d=a*(p+'x')/(m+'x');
e=a*(q+'x')/(m+'x');
}

</script>

<form>
<input type="text" id="xt" onchange="update(xt,xgo,xc,xgr,xb)"/><br />
<input type="text" id="xgo" onchange="update(xgo,xt,xc,xgr,xb)"/><br />
<input type="text" id="xc" onchange="update(xc,xgo,xt,xgr,xb)"/><br />
<input type="text" id="xgr" onchange="update(xgr,xgo,xc,xt,xb)"/><br />
<input type="text" id="xb" onchange="update(xb,xgo,xc,xgr,xt)"/><br />
</form>

Amphiluke
07-18-2009, 08:44 PM
If I understand you correctly, then this will serve...

<script type="text/javascript">
function update(sender, coef) {
var frm = sender.form;
var newValue = parseFloat(sender.value) / coef;
frm.xt.value = (sender.name != "xt") ? (newValue * 40).toFixed(2) : sender.value;
frm.xgo.value = (sender.name != "xgo") ? (newValue * 5).toFixed(2) : sender.value;
frm.xc.value = (sender.name != "xc") ? (newValue * 4).toFixed(2) : sender.value;
frm.xgr.value = (sender.name != "xgr") ? (newValue * 3).toFixed(2) : sender.value;
frm.xb.value = (sender.name != "xb") ? (newValue * 2).toFixed(2) : sender.value;
}
</script>

................

<form action="#">
<input type="text" id="xt" name="xt" onchange="update(this, 40);" /><br />
<input type="text" id="xgo" name="xgo" onchange="update(this, 5);" /><br />
<input type="text" id="xc" name="xc" onchange="update(this, 4);" /><br />
<input type="text" id="xgr" name="xgr" onchange="update(this, 3);" /><br />
<input type="text" id="xb" name="xb" onchange="update(this, 2);" /><br />
</form>

Kristofa
07-18-2009, 09:04 PM
Works like a dream, although it's going to take some serious googeing before I understand whats going on. Out of interest, why didn't my script work?

Thanks :D

Amphiluke
07-18-2009, 09:19 PM
Out of interest, why didn't my script work?

Firstly, enclose id with quotes when call the update function
onchange="update('xt','xgo','xc','xgr','xb')"

Secondly, one is only able to set the value attribute directly (but not via auxiliary variable). Id est such a code

var a=document.getElementById(m).value;
a='new value';
does not change input value, but reassign the a variable instead...

Thirdly, I am in perplexity of this:


b=a*(n+'x')/(m+'x');
c=a*(o+'x')/(m+'x');
d=a*(p+'x')/(m+'x');
e=a*(q+'x')/(m+'x');

Philip M
07-18-2009, 09:48 PM
Here is my attempt, not nearly as elegant as Amphiluke's, but filters out NaN.


<script type="text/javascript">

function update(num) {
var a = document.getElementById("xt").value;
var b = document.getElementById("xgo").value;
var c = document.getElementById("xc").value;
var d = document.getElementById("xgr").value;
var e = document.getElementById("xb").value;

if (isNaN(a)) {document.getElementById("xt").value = ""; return false}
if (isNaN(b)) {document.getElementById("xgo").value = ""; return false}
if (isNaN(c)) {document.getElementById("xc").value = ""; return false}
if (isNaN(d)) {document.getElementById("xgr").value = ""; return false}
if (isNaN(e)) {document.getElementById("xb").value = ""; return false}

if (num == 1) {
document.getElementById("xgo").value = a/40 * 5;
document.getElementById("xc").value = a/40 * 4;
document.getElementById("xgr").value = a/40 * 3
document.getElementById("xb").value = a/40 * 2
}

if (num == 2) {
document.getElementById("xt").value = b/5 * 40;
document.getElementById("xc").value = b/5 * 4;
document.getElementById("xgr").value = b/5 * 3;
document.getElementById("xb").value = b/5 * 2;
}

if (num == 3) {
document.getElementById("xt").value = c/4 * 40;
document.getElementById("xgo").value = c/4 * 5;
document.getElementById("xgr").value = c/4 * 3;
document.getElementById("xb").value = c/4 * 2;
}

if (num == 4) {
document.getElementById("xt").value = d/3 * 40;
document.getElementById("xgo").value = d/3 * 5;
document.getElementById("xc").value = d/3 * 4;
document.getElementById("xb").value = d/3 * 2;
}

if (num == 5) {
document.getElementById("xt").value = e/2 * 40;
document.getElementById("xgo").value = e/2 * 5;
document.getElementById("xc").value = e/2 * 4;
document.getElementById("xgr").value = e/2 * 3;
}
}

</script>

<form>
<input type="text" id="xt" onchange="update(1)"/><br />
<input type="text" id="xgo" onchange="update(2)"/><br />
<input type="text" id="xc" onchange="update(3)"/><br />
<input type="text" id="xgr" onchange="update(4)"/><br />
<input type="text" id="xb" onchange="update(5)"/><br />
</form>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum