2

我正在尝试编写一个复选框，必须选中该复选框才能启用表单上的“提交”按钮。我首先尝试使用链接文件无济于事；现在即使插入脚本似乎也不起作用。任何人都可以帮忙吗？该页面的完整代码发布在下面。提前致谢！

<!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>
4

3 回答 3

2

您的函数不是“监听” onchange 事件。

改用这个。请注意，我将复选框更改为具有 onclick 事件。

<!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>
于 2013-10-07T04:22:13.963 回答
0

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();"/>
于 2013-10-07T04:25:09.010 回答
0

您应该将 javascript 放在项目定义的下方。HTML 是线性解释的。这意味着当没有项目被称为时，Javascript 在开始时执行"acknowledgement"

于 2013-10-07T04:18:24.053 回答