www.webdeveloper.com
Results 1 to 8 of 8

Thread: javascript form prioritizing

  1. #1
    Join Date
    May 2010
    Posts
    12

    javascript form prioritizing

    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:
    Code:
    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.

  2. #2
    Join Date
    Nov 2007
    Posts
    425
    use Math.abs(value)

    as in:
    Code:
    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!

  3. #3
    Join Date
    May 2010
    Posts
    12

    form referencing

    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!


    Code:
    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.

  4. #4
    Join Date
    Nov 2007
    Posts
    425
    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)?

  5. #5
    Join Date
    May 2010
    Posts
    12
    Code:
    <img style="position:absolute; left:1080px; top:305px;" id="calculate" onclick = "showImg()" src="calculate.gif" />
    theres the event call. thanks a lot.

  6. #6
    Join Date
    Nov 2007
    Posts
    425
    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...

  7. #7
    Join Date
    May 2010
    Posts
    12
    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.

  8. #8
    Join Date
    Nov 2007
    Posts
    425
    '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&#37; the same code but it works!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles