javascript form prioritizing

[atomic.argonaut]

hey there. im currently trying to get a script written that can accomplish an image display based on the entered value of a form. the problem is there are four individual forms that can both be within + or - ranges.

for instance.

Form 1:

function showImg() {
var val = document.getElementById("form1").value;
// check that the value of val is a valid entry?  A number?
document.getElementById("image1").src = "blank.jpg"
// go through ranges
if (val >= 3.25 && val <= 4.75) {document.getElementById("image1").src = "imageA.gif"}
if (val >= 5.00 && val <= 6.50) {document.getElementById("image1").src = "imageB.gif"}
if (val >= 6.75 && val <= 7.50) {document.getElementById("image1").src = "ImageC.gif"}
if (val >= 7.75) {document.getElementById("image1").src = "imageC2.gif"}
if (val >= -3 && val <= 3) {document.getElementById("image1").src = "ImageD.gif"}
if (val <= -3.25 && val >= -5) {document.getElementById("image1").src = "ImageE.gif"}
if (val <= -5.25 && val >= -6.50) {document.getElementById("image1").src = "imageF.gif"}
if (val <= -6.75 && val >= -7.25) {document.getElementById("image1").src = "imageG.gif"}
if (val <= -7.50) {document.getElementById("image1").src = "imageH.gif"}
}

thats form one. there are three other forms that are all scripted the same. what i'd like to do is have the values taken from all four forms separately and only have the one with the highest value subsequently display its corresponding image.

what needs to be taken into account is that the highest value isn't necessarily the largest positive number. it's just the number that goes the furthest in its respective direction.

-5 for instance is higher than +4

given this it'd probably be necessary to discard the +/- signs altogether, though again in the input process they're necessary.

any advice would be appreciated. thanks so much.

[nap0leon]

use Math.abs(value)

as in:

var a=Math.abs(document.getElementById("form1").value);
var b=Math.abs(document.getElementById("form2").value;
var c=Math.abs(document.getElementById("form3").value);
var d=Math.abs(document.getElementById("form4").value);

Now just pick which one is largest and you're good to go!

[atomic.argonaut]

thanks a lot for your help. its greatly appreciated. im having a further issue that maybe you could offer me a little advice on? i was thinking that the block of if statements that checks the range value in rightSph would be repeated for the other 3 and directed towards those to display the results. however, even without those three blocks, and what i have right now, entering any number into the other 3 forms results in the image "r39.gif." all four forms are active, despite the fact that i've only (or so i assumed) linked up one to the script thus far.

thanks!

function showImg() {
var rightSph = document.getElementById("rightSph").value;

document.getElementById("image1").src = "blank.jpg"
// go through ranges in form 1
if (rightSph >= 3.25 && rightSph <= 4.75) {document.getElementById("image1").src = "poly.gif"}
if (rightSph >= 5.00 && rightSph <= 6.50) {document.getElementById("image1").src = "167.gif"}
if (rightSph >= 6.75 && rightSph <= 7.50) {document.getElementById("image1").src = "171.gif"}
if (rightSph >= 7.75) {document.getElementById("image1").src = "174.gif"}
if (rightSph >= -3 && rightSph <= 3) {document.getElementById("image1").src = "r39.gif"}
if (rightSph <= -3.25 && rightSph >= -5) {document.getElementById("image1").src = "poly.gif"}
if (rightSph <= -5.25 && rightSph >= -6.50) {document.getElementById("image1").src = "167.gif"}
if (rightSph <= -6.75 && rightSph >= -7.25) {document.getElementById("image1").src = "171.gif"}
if (rightSph <= -7.50) {document.getElementById("image1").src = "174.gif"}
// go through ranges in right cyl

}

<form style="position:absolute; top:325px; left:700px;">

<span class="rx">
    Form 1 <input type = "text" id = "rightSph" size = "7">
	Form 2<input type="text" id="form2" size="07" />
	x <input type="text" name="axis" size="3" />
</form>

<form style="position:relative; top:10px; left:00px;">
<span class="rx">
    Form 3: <input type="text" name="form3" size="07" />
	Form 4:<input type="text" name"form4" size="07" />
	x <input type="text" name="axis" size="3" />
</form>

i was thinking that the block of if statements that checks the range value in rightSph would be repeated for the other 3 and directed towards those to display the results. however, even without those three blocks, and what i have right now, entering any number into the other 3 forms results in the image "r39.gif." all four forms are active, despite the fact that i've only (or so i assumed) linked up one to the script thus far.

[nap0leon]

So... showImg is being called from Forms 2, 3, and 4 instead of only Form 1?
How are you calling the function (it's not in the code provided)?

[atomic.argonaut]

<img style="position:absolute; left:1080px; top:305px;" id="calculate" onclick = "showImg()" src="calculate.gif" />

theres the event call. thanks a lot.

[nap0leon]

So the function is only called when the image is clicked.
But you said it was tied to entries in the other forms as well?

From what you have posted so far...
1- user enters information into any of the 4 forms that are on the page.
2- user clicks "calculate"

Since the function looks for only the value in "form 1", and since the value in form 1 is "0", it displays the appropriate image based on the only answer it knew to look for.

Seems like you have a bug in how you are getting the value... "empty" is being treated as "0", though you probably don't want it to. but maybe you do...

[atomic.argonaut]

i seemed to have gotten it working. ive really no idea how and liken it to button mashing your way into a 34 hit killer instinct combo. nonetheless, i just started a new window and wrote the entire thing over, proving success.

while it proved effective, i cant imagine it wouldve been a preferred method of diagnostics for john carmack while he was writing quake 2.

'yeah i just couldnt get the physics right on the bfg, no matter how hard i tried. so i just deleted everything i had and started over.'

anyway. thanks so much for your help. its greatly appreciated. pointing out the fact that the empty fields were being treated as 0's was elucidating.

[nap0leon]

'yeah i just couldnt get the physics right on the bfg, no matter how hard i tried. so i just deleted everything i had and started over.'

Been there, done that.
End up with 98% the same code but it works!