Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Show layers based on conditions

    I'm building a web page that has a registration form built into a layer. The layer is to be hidden until three questions are answered correctly. Two of the questions are radio buttons and one is a text box looking for a value greater than 100,000. I have been able show/hide the layer using a single radio button or another radio button, but so far unable to show based on both radio buttons being used much less both radio button and the textbox. Can anyone offer help on what I would need to do to check the three condition and show hide the layer based on the button click? I'm pretty sure I would call a function but not sure how to pass the three form values for compairison.


    <%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>


    <script language="JavaScript" type="text/JavaScript">
    <!--

    function MM_callJS(jsStr) { //v2.0
    return eval(jsStr)
    }
    //-->
    </script>
    </head>

    <body>

    <form name="Form1">
    <table width="250" border="0">
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>Question 1 </td>
    <td><input type="radio" name="R1" onclick="doIt1(1)">
    Yes
    </td>
    <td><input type="radio" name="R1" onclick="doIt1(0)">
    No
    </td>
    </tr>
    <tr>
    <td>Question 2 </td>
    <td><input type="radio" name="R2" onclick="doIt2(1)">
    Yes </td>
    <td><input type="radio" name="R2" onclick="doIt2(0)">
    No </td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>Value</td>
    <td colspan="2"><input type="text" name="textfield"></td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    <p>
    <input name="Button" type="button" onClick="MM_callJS('doIt1');MM_callJS('doIt2')" value="Button">
    </p>
    </form>

    <div id="myLayer"
    style="position:absolute;top:175px;left:150px;visibility:hidden">
    This is a layer </div>

    <script language="JavaScript" type="text/JavaScript">

    function doIt1(value)

    {
    switch(value)
    {
    case 0:
    document.getElementById('myLayer').style.visibility = 'hidden';
    alert("Question 1 must be yes to continue");
    case 1:
    document.getElementById('myLayer').style.visibility = 'visible';

    break;
    }}
    function doIt2(value)

    {
    switch(value)
    {
    case 0:
    document.getElementById('myLayer').style.visibility = 'hidden';
    alert("Question 2 must be yes to continue");
    case 1:
    document.getElementById('myLayer').style.visibility = 'visible';

    break;
    }}



    </script>



    </body>
    </html>

  • #2
    New Coder
    Join Date
    Jul 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    validating check and text boxes

    You can use a single function and just look at the values of the controls on the page.

    example syntax for checkbox values :

    document.forms['form_name'].elements['radio_name'][0].checked


    So try something like this:


    Mark

    <%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>


    <script language="JavaScript" type="text/JavaScript">
    <!--

    function showHiddenLayer(formname, check1name, check2name, textname) {

    // display hidden layer if answer to all questions is correct
    if ((document.forms[formname].elements[check1name][0].checked == "1") && (document.forms[formname].elements[check2name][0].checked == "1") && (document.forms[formname].elements[textname].value > 100000)) {
    document.getElementById('myLayer').style.visibility = 'visible';
    } else {
    document.getElementById('myLayer').style.visibility = 'hidden';
    }

    }

    function showanswer(question, formname, checkname, correctvalue) {
    if (document.forms[formname].elements[checkname][0] != correctvalue) {
    alert('the answer to question ' + question + ' should be ' + (correctvalue == "1" ? "Yes" : "No"));
    }
    }

    function MM_callJS(jsStr) { //v2.0
    return eval(jsStr)
    }
    //-->
    </script>
    </head>

    <body>

    <form name="Form1">
    <table width="250" border="0">
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>Question 1 </td>
    <td><input type="radio" name="R1" onclick="showHiddenLayer('Form1','R1','R2','textfield');">
    Yes
    </td>
    <td><input type="radio" name="R1" onclick="showanswer(1, 'Form1', 'R1', '1');showHiddenLayer('Form1','R1','R2','textfield');">
    No
    </td>
    </tr>
    <tr>
    <td>Question 2 </td>
    <td><input type="radio" name="R2" onclick="showHiddenLayer('Form1','R1','R2','textfield');">
    Yes </td>
    <td><input type="radio" name="R2" onclick="showanswer(1, 'Form1', 'R2', '2');showHiddenLayer('Form1','R1','R2','textfield');">
    No </td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>Value</td>
    <td colspan="2"><input type="text" name="textfield" ONCHANGE="showHiddenLayer('Form1','R1','R2','textfield');"></td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    <p>
    <input name="Button" type="button" onClick="showHiddenLayer('Form1','R1','R2','textfield');" value="Button">
    </p>
    </form>

    <div id="myLayer"
    style="position:absolute;top:175px;left:150px;visibility:hidden">
    This is a layer </div>


    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks!

    That was exactly what I needed and was trying to do!

    Cheers!


  •  

    Posting Permissions

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