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
    Sep 2010
    Location
    New York
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HTML Radio Buttons and JavaScript

    Can anyone tell me how I can use JavaScript to check to see if a radio button is checked. I tried the code below, but that doesn't work.

    <script type="text/javascript">
    function hideAll() {
    document.getElementById("existing").style.display="none";
    document.getElementById("delivery").style.display="none";
    }
    </script>
    <script type="text/javascript">
    function doIt() {
    var q = document.getElementsByName('q');
    for(var i = 0; i < q.length; i++){
    if(q[0].checked == true){
    document.getElementById("existing").style.display="none";
    document.getElementById("delivery").style.display="none";
    window.location="cust-query2.php?cust_id=0";
    }
    else if(q[1].checked == true){
    document.getElementById("existing").style.display="";
    document.getElementById("delivery").style.display="none";
    }
    else if(q[2].checked == true){
    document.getElementById("delivery").style.display="";
    document.getElementById("existing").style.display="none";
    }
    }
    }
    </script>
    </head>

    <body onLoad="hideAll()">
    <div align="center">
    <table width="70%" border="0">
    <tr valign="top">
    <th scope="row"><h2 align="left">Please Select an Option:</h2>
    <form name="myform" onSubmit="doIt()" action="">
    <p align="left" class="indent">
    <input type="radio" name="q" value="0">
    <label>New Customer</label>
    <br />
    <input type="radio" name="q" value="1">
    <label>Existing Customer</label>
    <br />
    <!--<input type="radio" id="q" value="s">
    <label>Customer Search</label>
    <br />-->
    <input type="radio" name="q" value="2">
    <label>Print Delivery Information</label>
    <br /><br />
    <input type="submit" value="Submit" />
    </form>
    </p>
    <div id="existing" align="left" class="indent">
    <form action="cust-query2.php" method="post">
    Enter Phone Number:
    <input type="text" name="cust_id" />
    <input name="submit" type="submit" />
    </p>
    </form>
    </div>
    <div id="delivery" align="left" class="indent">
    <form method="post" action="search_delivery_by_date1.php">
    Enter Date: <input type="text" name="date" />
    Enter Time:
    <select name="ampm">
    <option>AM</option>
    <option>PM</option>
    </select>
    Enter City:
    <select name="city">
    <option>Boro Park</option>
    <option>Flatbush</option>
    <option>Williamsburg</option>
    </select>
    <input type="submit" value="Print Delivery Information">
    </form>
    </div>
    </td>
    </tr>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Ummm...you are not changing WHAT gets displayed until the <form> is submitted...and then you do change the display, but the form *immediately* get submitted so the user never sees that change.

    K.I.S.S.
    Code:
    <head>
    <script type="text/javascript">
    function show(which)
    {
        document.getElementById("existing").style.display = which==1 ? "block" : "none";
        document.getElementById("delivery").style.display = which==2 ? "block" : "none";
    }
    </script>
    </head>
    <body>
    <div align="center">
        <table width="70%" border="0">
        <tr valign="top">
            <th scope="row">
                <form name="myform" action="">
                <h2 align="left">Please Select an Option:</h2>
                <p align="left" class="indent">
                    <label><input type="radio" name="q" onclick="show(0);" checked>New Customer</label>
                    <br />
                    <label><input type="radio" name="q" onclick="show(1);">Existing Customer</label>
                    <br />
                    <label><input type="radio" name="q" onclick="show(2);">Print Delivery Information</label>
                    <br /><br />
                </p>
                </form>
    
                <div id="existing" align="left" class="indent" style="display: none;">
                         ... your stuff ...
                </div>
                <div id="delivery" align="left" class="indent" style="display: none;">
                         ... your stuff ...
                </div>
            </td><!-- how can a /td match up with a th ???? illegal HTML -->
        </tr>  
        ...
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Sep 2010
    Location
    New York
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah! That did it. I knew there was something I wasn't thinking clearly about.

    Thanks!


  •  

    Posting Permissions

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