www.webdeveloper.com
Results 1 to 4 of 4

Thread: Can't get onClick function to fire!

  1. #1
    Join Date
    Jun 2006
    Location
    Doncaster
    Posts
    78

    Can't get onClick function to fire!

    I have this radio button group, and I would like to add an onclick function.
    Ultimately, I am aiming for the selection to determine which form is shown, but for now i just need to get the form to react to the mouse clicks.

    This is the code:
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Contact THT</title>

    <link href="css.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    function radio()    {
                        if(document.getElementById("msg_type_0").checked == true) document.write("avl is selected");
                        else if (document.getElementById("msg_type_1").checked == true) document.write("gen is selected");
                        else (document.getElementById("msg_type_2").checked == true) document.write("fbk is selected");
    </script>
    </head>

    <body>


    <div id="container">
        <div id="titlebar">
            <div id="logo" style="float:left;">
                <img src="images/doncaster.gif" alt="tht logo" />
            </div>
            <div id="header" style="float:right;">
                <h1>Contact THT</h1>
                Send a message to the Co-ordinating Team, <br />
                or feedback about this site
            </div>
            <div id="nav">
                <?php include("nav.php"); ?>
            </div>
        </div>  
        <div id="content">
            <h3>I would like to send...</h3>
            <form id="form1" name="form1" method="post" action="">
      <p>
        <label>
          <input type="radio" name="msg_type" value="avl" id="msg_type_0" onclick="radio()"  />
          ...my availability</label>
        <br />
        <label>
          <input type="radio" name="msg_type" value="gen" id="msg_type_1" onclick="radio()"/>
          ...a general message</label>
        <br />
        <label>
          <input type="radio" name="msg_type" value="fbk" id="msg_type_2" onclick="radio()"/>
          ...feedback about the site</label>
        <br />
      </p>
    </form>

            
            
        </div>
        <div id="avail">
            <form id="contact_data" name="contact_data">
            <h3>Availability</h3>
                <table width="125" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td>Your Name</td>
                    <td><input name="name" type="text" value="name" size="25" maxlength="25" onfocus="document.contact_data.name.select()"/>
                    </td>
                  </tr>
                  <tr>
                    <td>Your email address</td>
                    <td><input name="email" type="text" value="email" size="25" maxlength="25" onfocus="document.contact_data.email.select()"/></td>
                  </tr>
                  <tr>
                    <td>Your phone number</td>
                    <td><input name="phone" type="text" value="include the area code" size="25" maxlength="25" onfocus="document.contact_data.phone.select()"/></td>
                  </tr>
                  <tr>
                    <td>Available as follows:</td>
                    <td><textarea name="message" cols="25" rows="5"></textarea></td>
                  </tr>
                </table>
            </form>
        </div>
        
    </div>
    </div>
    </body>
    </html>
    Any help appreciated!

  2. #2
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    so far the code seem ok, except that you had not properly closed the radio function's body and document.write will clear your document content:
    Code:
    function radio(){
    ....
    } // << missing in your code

  3. #3
    Join Date
    Jun 2006
    Location
    Doncaster
    Posts
    78

    Hmmm

    Thanks, although it still isn't working...
    I took your advice and changed it to an alert function as follows:

    Code:
    <script type="text/javascript">
    function radio()	{
    					if(document.getElementById("msg_type_0").checked == true) alert("avl is selected");
    					else if (document.getElementById("msg_type_1").checked == true) alert("gen is selected");
    					else (document.getElementById("msg_type_2").checked == true) alert("fbk is selected");
    					}
    </script>
    Any other ideas?

  4. #4
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    missed an if after the last else clause. if after an else you want to perform another comparison, you have to include the if statement:
    Code:
    else if(document.getElementById("msg_type_2").checked == true) alert("fbk is selected");

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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