CODEWITHSUNDEEP
javascriptphphtml
Jake
Jake

Reputation: 913

Javascript Not Working on PHP page

I'm trying to code a checkbox that must be checked in order for the "Submit" button on a form to be enabled. I first tried using a linked file to no avail; now even inserting the script doesn't seem to work. Can anyone help? The entire code for the page is posted below. Thanks in advance!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    <script type="text/javascript" src="includes/imagetransition.js"></script>
    <script type="text/javascript" src="includes/checkenabledisable.js"></script>
    <script type="text/javascript">
        var checker = document.getElementById('acknowledgment');
        var sendbtn = document.getElementById('submitmessage');
        // when unchecked or checked, run the function
        checker.onchange = function(){
            if(this.checked){
                sendbtn.disabled = false;
            } else {
                sendbtn.disabled = true;
            }
        }   
    </script>
    <title>Contact Us</title>  
</head>

<body>  
<div class="page-wrapper">
<div id="header">

<img src="images/img1.jpg" name="slideshow" width="70%" height="200" alt="headerimage.gif"><br>
<a href="javascript:chgImg(-1)">Previous</a> &nbsp;|&nbsp;
<a href="javascript:auto()">Auto/Stop</a> &nbsp;|&nbsp;
<a href="javascript:chgImg(1)">Next</a></div> 
<br><br>

<aside class="sidebar">
        <div id="vmenu">
            <ul>
                <li class="sideli"><a href="main.html.php">Home</a></li>
                <li class="sideli"><a href="areas.html.php">Areas</a></li>
                <li class="sideli"><a href="profiles.html.php">Profiles</a></li>
                <li class="sideli"><a href="contactus.html.php">Contact Us</a></li>
            </ul>  
        </div> 
    </aside>
    <section class="main">
        We will review your submission and contact you, usually within 72 hours.</p>
        <form action="actionemail.php" method="post">
            <table class="emailtable">
            <tr><td><label for="name" class="emaillabel">Name: </label></td><td><input type="text" name="fullname" size="50" value="Name" style="width: 290px;" /></td></tr>
            <tr><td><label for="phone" class="emaillabel">Phone: </label></td><td><input type="text" name="phone" size="20" value="Phone" style="width: 290px;" /></td></tr>
            <tr><td><label for="email" class="emaillabel">Email: </label></td><td><input type="text" name="email" size="50" value="Email" style="width: 290px;" /></td></tr>
            <tr><td><label for="comment" class="emaillabel">Issue: </label></td><td><textarea rows="3" cols="26" name="comment" value="Tell Us More" style="width: 290px; height: 55px"></textarea></td></tr>
            </table><br>
            <input id="acknowledgment" type="checkbox" name="acknowledgment" value="1" /><label for="acknowledgment">I acknowledge that there may be a delay in responding to this request.</label><br>
        <br><input id="submitmessage" type="submit" name ="submitmessage" value="Send Email" disabled />
        </form>
    </section>
</div>
</body>
</html>

Upvotes: 3

Views: 23812

Answers (3)

Punitha
Punitha

Reputation: 152

put some function name inside a script 

 <script type="text/javascript">
function checker()
{
        var checker = document.getElementById('acknowledgment');
        var sendbtn = document.getElementById('submitmessage');
        // when unchecked or checked, run the function
        checker.onchange = function(){
            if(this.checked){
                sendbtn.disabled = false;
            } else {
                sendbtn.disabled = true;
            }
        }   
}
    </script>

and then you will call function in button onClick event

        <form action="actionemail.php" method="post">
        <br><input id="submitmessage" type="submit" name ="submitmessage" value="Send Email" disabled  onclick="checker();"/>

Upvotes: 0

Daniel Williams
Daniel Williams

Reputation: 2317

Your function is not "listening" for an onchange event.

Use this instead. Notice I changed the checkbox to have an onclick event.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    <script type="text/javascript" src="includes/imagetransition.js"></script>
    <script type="text/javascript" src="includes/checkenabledisable.js"></script>
    <script type="text/javascript">

    function enableSubmitButton() {

        if (document.getElementById("acknowledgment").checked == true)
            document.getElementById("submitmessage").disabled = false;
    }

    </script>
    <title>Contact Us</title>  
</head>

<body>  
<div class="page-wrapper">
<div id="header">

<img src="images/img1.jpg" name="slideshow" width="70%" height="200" alt="headerimage.gif"><br>
<a href="javascript:chgImg(-1)">Previous</a> &nbsp;|&nbsp;
<a href="javascript:auto()">Auto/Stop</a> &nbsp;|&nbsp;
<a href="javascript:chgImg(1)">Next</a></div> 
<br><br>

<aside class="sidebar">
        <div id="vmenu">
            <ul>
                <li class="sideli"><a href="main.html.php">Home</a></li>
                <li class="sideli"><a href="areas.html.php">Areas</a></li>
                <li class="sideli"><a href="profiles.html.php">Profiles</a></li>
                <li class="sideli"><a href="contactus.html.php">Contact Us</a></li>
            </ul>  
        </div> 
    </aside>
    <section class="main">
        We will review your submission and contact you, usually within 72 hours.</p>
        <form action="actionemail.php" method="post">
            <table class="emailtable">
            <tr><td><label for="name" class="emaillabel">Name: </label></td><td><input type="text" name="fullname" size="50" value="Name" style="width: 290px;" /></td></tr>
            <tr><td><label for="phone" class="emaillabel">Phone: </label></td><td><input type="text" name="phone" size="20" value="Phone" style="width: 290px;" /></td></tr>
            <tr><td><label for="email" class="emaillabel">Email: </label></td><td><input type="text" name="email" size="50" value="Email" style="width: 290px;" /></td></tr>
            <tr><td><label for="comment" class="emaillabel">Issue: </label></td><td><textarea rows="3" cols="26" name="comment" value="Tell Us More" style="width: 290px; height: 55px"></textarea></td></tr>
            </table><br>
            <input id="acknowledgment" type="checkbox" name="acknowledgment" value="1" onclick="enableSubmitButton()"><label for="acknowledgment">I acknowledge that there may be a delay in responding to this request.</label><br>
        <br><input id="submitmessage" type="submit" name ="submitmessage" value="Send Email" disabled />
        </form>
    </section>
</div>
</body>
</html>

Upvotes: 2

willeM_ Van Onsem
willeM_ Van Onsem

Reputation: 476557

You should place the javascript below the definition of the items. HTML is interpreted linearly. This means that the Javascript is executed in the beginning when no items is known as "acknowledgement"

Upvotes: 0

Related Questions