Question

下面我附上了我的代码。我需要帮助以使我的按钮单击以清除前两个表单，然后再次单击时清除剩下的最后一个字段。请对此提供任何帮助。我一直在尝试不同的方法，但目前不知道该怎么做。我对编写任何类型的代码都是陌生的，因此这可能是一个简单的任务，但是我真的不知道该怎么做。

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title>Web Lock VPN Service</title>

    <style type="text/css">
        body {
                background-image: url("https://lh3.googleusercontent.com/7eRbJLwlltrqMGUleKadG70Dn4oapmr7xQordaJhrblNGjSxGaf4x1-6IzDaUiLv_BaFhkgTfuucGSjvGH6w41GyBLbMZqHwZTHJ7CQqWgqYpuB4oa0_1BTP32CFBf07PHb_cgZrpw=w2400");

        }
    </style>

    <script>
    </script>

    <!--EJD-5/11 added link to CSS style sheet-->

    <link href="styles.css" rel="stylesheet"></link>

    <!--EJD-5/11 used "pre" to move VPN picture to roughly the center of the page-->

     <pre>                                                                                                                      <img src="https://lh3.googleusercontent.com/8MOV9pJZ0HuFhWUEb5Qj2li8L_pspnylQ6rnTYH5wmLGgWjxAfEZ8hFIXv4MPUqFnkVtzSY8Jf0zuKKiHWyHumtnG6Zw_7y9dNbfns1lKrYQn9BCf05JU3pmHmIhEweJOlkOd21tXw=w2400" style="width:300px;height:200px;"> </a> 
        </pre>

      <pre><h1 id="bluetext">                                                                                                                                                                                                                                                                                          WebLock VPN Order Form </h1>
        </pre>

        <!--EJD 5/11 Added horizontal line for style-->
        <hr>
    </head>

    <body>


        <pre><h2 id="generaltext">                                                             Thank you for showing interest in Web Lock's VPN service! In order to purchase our product, please fill out the form below.</h2> 

            </pre>
            <!--EJD 5/11- Created a radio button form as a client survey-->
    <form name="survey" id="VPN">
        <h3>What is the most important aspect of a VPN for you?</h3>

        <p><input name="survey" type="radio" value="Small">Security</p>
        <p><input name="survey" type="radio" value="Small">Speed</p>
        <p><input name="survey" type="radio" value="Small">Price</p>
        <p><input name="survey" type="radio" value="Small">Platform Availability</p>
    </form>
        <!--EJD 5/11 Created a form for filling out information to be validated later-->
        <form required; name= "Module Selection" id="FT">

        <h3 id="generaltext">Select your features below:</h3>

        <p>
        <input name="modules" type="checkbox" value="HighspeedVPN">High Speed VPN </p>
        <p>
        <input name="modules" type="checkbox" value="Antivirus">Antivirus Addon </p>
        <p>
        <input name="modules" type="checkbox" value="WebShield">Browse-safe web shield </p>
        <p>
        <input name="modules" type="checkbox" value="TransactionGuard">Transaction Guard </p>

    </form>

        <h3 id="generaltext">Fill out your information below:</h3>
        <form required; name= "custinfo">
        <p>
        Name:&nbsp;&nbsp&nbsp<input name="Name"size=:50 type="text"><br>
        </p> 
        <p>
        Email Address:&nbsp;&nbsp&nbsp<input name="Emailaddress"size=:50 type="text"><br> 
        </p>
        <p>
        Street Address:&nbsp;&nbsp&nbsp<input name="S_Address"size=:50 type="text"><br></p>
        <p>
        Address 2:&nbsp;&nbsp&nbsp<input name="Address_2"size=:50 type="text"><br></p>      
        <p>
        Zip Code:&nbsp;&nbsp&nbsp<input name="Zip"size=:50 type="text"><br>  
        <p>
        City:&nbsp;&nbsp&nbsp<input name="City"size=:50 type="text"><br>     


        </form>

        <!--EJD 5/11 Created a drop-down list for states to choose-->

        <form name="states">

        State:&nbsp;&nbsp;&nbsp;<select required; name="states">


        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District Of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
        </select>


    </form>

    <!--EJD 5/11 created checkboxes for clients to order specific modules-->


    <!--EJD 5/11 added a text area for clients to comment-->
    <h3 id="generaltext">Questions and comments:</h3>
    <p>
    <textarea name= "Comments" rows="5" cols="80">

    </textarea>
    <!--EJD 5/11 Added a submit button and a clear button to tie to JS functions-->
    <p>
    <input type="button" value="Submit" onclick="dosubmit()">

    <input type="button" value="Clear" onclick="doclear(); doclear2();"/>
        <script>
 function doclear() {
 document.getElementById("VPN").reset();
}         
  function doclear2(){
  document.getElementById("FT").reset();
            }

Answer 1

我认为您应该声明一个像 isFirstClear 这样的变量，默认= false，并在onClick按钮函数中添加检查条件：

if (!isFirstClear) {
    doclear();
    isFirstClear = true;
}
else {
    doclear2();
}

如何使我的按钮清除前两个表格，然后再次单击清除最后一个表格？

1 个答案: