#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2002
    Location
    Vancouver Island, BC Canada
    Posts
    2
    Rep Power
    0

    Validation Forms "JavaScript"


    Im working with a Javascript validation (form) and trying to get some areas to work, and seem to be having difficulty doing it. What it is that i want to accomplish is this:

    I have a drop down list "say called SurfaceArea" and it drops down a list of items, and at the bottom it has a selection "other". This is a mandatory item.

    Under the drop down list there is a text box named "OtherSurfaceArea". But its only mandatory if "other" is selected in the above list.

    Does anyone know the code for something like this in javascript. Here is what I have now:

    }

    // Check for Surface Area
    if (document.frmEnquiry.SurfaceArea.value == "" || document.frmEnquiry.SurfaceArea.value == "Other")
    {
    errorMsg += "\n\tEnter Info into Other Area \t ";

    }

    // Check for Other Surface Area
    if (document.frmEnquiry.OtherSurfaceArea.value == "") {
    errorMsg == "";

    }

    Thank you,
    Pimmy
  2. #2
  3. No Profile Picture
    Joonior Meember
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2001
    Location
    Barre, VT, USA, Earth
    Posts
    11
    Rep Power
    0
    Your approach seems fine but I have done it successfully this way. The prob may be that .value does not always work cross-browser with select elements (drop-down lists). You can extract the value into a variable first. Try this method.

    ------------- code ---------------
    // create a var (select) to hold the name of the select element
    // and then create another var (value) to hold the currently
    // selected option of the element

    var select = document.frmEnquiry.SurfaceArea;
    var value = select.options[select.selectedIndex].value;

    // Check the value for "Other" and test that the selectedIndex
    // element is not 0 (indicates nothing was selected)

    if (value == "Other" or select.selectedIndex == 0 ) {
    errorMsg += "\n\tEnter Info into Other Area \t ";
    }

    ------------- end code ------------

    Hope this helps,
    Zach
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2002
    Location
    Vancouver Island, BC Canada
    Posts
    2
    Rep Power
    0
    I will give that a shot, i am integrating this script with an .asp file (calls one) on an Intranet...and they only use IE

    Thanks, will let you know if i have success or not
    Pimmy
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    13
    Code:
    <html>
    <head>
    <title>untitled</title>
    <script type="text/javascript" language="JavaScript">
    
    function showHideOther(sel_ref,other_id) {
    var bWhich = (sel_ref[sel_ref.selectedIndex].value == 'other');
    var otherEl = document.getElementById(other_id);
    if (!otherEl) return;
    otherEl.style.visibility = (bWhich) ? 'visible' : 'hidden';
    (bWhich) ? otherEl.all(0).focus() : otherEl.all(0).value = '';
    }
    
    function checkSurfaceAreaInput(f) {
    var SA = f.SurfaceArea[f.SurfaceArea.selectedIndex].value;
    if (!SA) {
    alert('Please choose a "Surface Area" option.');
    f.SurfaceArea.focus();
    return false;
    } else if (SA == 'other' && !f.OtherSurfaceArea.value) {
    alert('Please enter a specific "Surface Area" in square feet.');
    f.OtherSurfaceArea.select();
    return false;
    }
    return true;
    }
    
    function checkform(f) {
    if (!f) return;
    if (!checkSurfaceAreaInput(f)) return false;
    return true;
    }
    
    </script>
    </head>
    <body>
    <form name="frmEnquiry" onsubmit="return checkform(this)">
    <hr>
    <b>Choose Surface Area (square feet): </b>
    <select name="SurfaceArea" onchange="showHideOther(this,'otherInput')">
    <option selected="selected">-- Select One --</option>
    <option value="100">-- 100</option>
    <option value="200">-- 200</option>
    <option value="300">-- 300</option>
    <option value="other">Other Surface Area</option>
    </select>
    <span id="otherInput" style="position:relative;padding-right:12px;visibility:hidden;">
    <input name="OtherSurfaceArea" type="text" size="12">
    </span>&nbsp;
    <input type="submit" value="DONE">
    <hr>
    </form>
    </body>
    </html>
    God bless intranets. I've had success using the above. You can stack additional routine calls in the checkform() function, using the same approach.

IMN logo majestic logo threadwatch logo seochat tools logo