Can't get onClick function to fire!

**AliHurworth** · 01-24-2009 10:28 AM

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!

**ZeroKilled** · 01-24-2009 10:51 AM

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

**AliHurworth** · 01-24-2009 11:45 AM

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?

**ZeroKilled** · 01-24-2009 11:59 AM

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: Can't get onClick function to fire!

Thread Tools

Display

Can't get onClick function to fire!

Hmmm

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions