How do I make my button clear the first two forms then when clicked again clear the last form?
Question
Below I have attached the code that I have. I need help getting my button on click to clear the first two forms then when it is clicked again clear the last field that is left. Please any help on this. I have been trying different things but currently don't know how I would go about doing this. I am new to writing any type of code so this may be a simple task but I don't really know how to do it.
<!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:   <input name="Name"size=:50 type="text"><br>
</p>
<p>
Email Address:   <input name="Emailaddress"size=:50 type="text"><br>
</p>
<p>
Street Address:   <input name="S_Address"size=:50 type="text"><br></p>
<p>
Address 2:   <input name="Address_2"size=:50 type="text"><br></p>
<p>
Zip Code:   <input name="Zip"size=:50 type="text"><br>
<p>
City:   <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: <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();
}
1 answers
solution1
0 ACCPTED 2019-05-13 02:06:54
I think you should declare a variable like isFirstClear with default = false, and add check condition in onClick button function:
if (!isFirstClear) {
doclear();
isFirstClear = true;
}
else {
doclear2();
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
how do I make my radio button become clear again when I pick a different value?
How do I reset my radio button values when “clear form” is clicked?
How can I clear form when button clicked?
How can i make a button to clear one of my fields in a form?
How do I "clear" my timer using my clear button?
Make text clear form when clicked
How to clear the text field when clicked on “clear” button in template-driven form in angular 8?
Radio Buttons clear check when clicked again
How to clear my input if button is clicked and at the same time make button unclickable if input is empty?
How do I make my button clear content and create a new grid?
Related Tags