I am attempting to create forms that are hidden on each page. I figure I had to make a separate functions for each button and form that I wanted to hide. So my logic was to use the same code on separate JS pages but changing the id and function names on each JS page.
However when I do so, using the exact same code the button works on one page and not on the other page.
This is a start of many layers I’m trying to learn, such as opening form on same page and transition it to appear using jQuery.
- The 1st code was this, it works but I would like to append and add to it
JavaScript
x
179
179
1
<!DOCTYPE html>2
<html lang="EN">3
<meta charset="UTF-8">4
5
<head>6
<title>button test</title>7
<script>8
window.onload = function() {9
document.getElementById("tkform").style.display = "none";10
}11
window.onload = function() {12
document.getElementById("cleanForm").style.display = "none";13
}14
15
function openForm() {16
document.getElementById("cleanForm").style.display = "block";17
18
}19
20
function closeForm() {21
document.getElementById("cleanForm").style.display = "none";22
}23
24
25
26
function optkForm() {27
document.getElementById("tkForm").style.display = "block";28
29
30
31
}32
33
function clstkForm() {34
document.getElementById("tkForm").style.display = "none";35
}36
</script>37
</head>38
39
<body>40
<h3>41
I am attempting to create forms that are hidden on each page. I figure I had to make a separate functions for each button and form that I wanted to hide. So my logic was to use the same code on separate JS pages but changing the id and function names42
on each JS page. However when I do so, using the exact same code the button works on one page and not on the other page. This is a start of many layers I'm trying to learn, such as opening form on same page and transition it to appear using jquery.43
1. The 1st code was this, it works but I would like to append and add to it44
</h3>45
<p>46
HTML47
</p>48
<button onclick="openForm()" style="font-size: 16px; text-align: center" ;>49
Get an Estimate</button>50
<button onclick="closeForm()">Close Form</button>51
<form class="cleanform" id="cleanForm" action="/action_page.php">52
<legend>Book a Visit</legend>53
54
<p>Please fill out your information below.</p>55
<br>56
57
<p id="text" style="display:none">Checkbox is CHECKED!</p>58
59
<div class="columns">60
<div class="item">61
<label for="fname">First Name<span>*</span></label>62
<input id="fname" type="text" name="fname" />63
</div>64
<div class="item">65
<label for="lname"> Last Name<span>*</span></label>66
<input id="lname" type="text" name="lname" />67
</div>68
<div class="item">69
<label for="eaddress">Email Address<span>*</span></label>70
<input id="eaddress" type="text" name="eaddress" />71
</div>72
<div class="item">73
<label for="zipcode">Zip Code<span>*</span></label>74
<input id="zipcode" type="text" name="zipcode" pattern="[0-9] {5}" title="5 digit Zip" />75
</div>76
</div>77
<fieldset>78
<legend style="background-color: rgb(221, 210, 210)">79
<p>Service Frequency</p>80
</legend>81
<div class="columns">82
<p>Is This a One-Time or Recurring Clean?</p>83
84
<div class="item">85
<br>86
<label for="myCheck">One-Time Cleaning</label>87
<input type="checkbox" id="myCheck" onclick="myFunction()">88
<label for="myCheck">Recurring Service</label>89
<input type="checkbox" id="myCheck" onclick="myFunction()">90
</div>91
</div>92
<div class="columns">93
<p>Do You need a Move In/Move Out clean?</p>94
95
<div class="item">96
<br>97
<label for="myCheck">Yes</label>98
<input type="checkbox" id="myCheck" onclick="myFunction()">99
<label for="myCheck">No</label>100
<input type="checkbox" id="myCheck" onclick="myFunction()">101
102
</div>103
</div>104
</fieldset>105
<div class="columns">106
<div class="item">107
<label for="bedrooms">Bedrooms:<span>*</span></label>108
<input type="number" id="bedrooms" name="bedrooms" min="0" ; max="8" ; name="bedroom" placeholder="0" />109
</div>110
<div class="item">111
<label for="bathroom">Bathrooms:<span>*</span></label>112
<input type="number" id="bathrooms" name="bathrooms" min="0" ; max="20" placeholder="0" />113
</div>114
<div class="item">115
<label for="sqrfoot">Square Foot:<span>*</span></label>116
<input type="text" id="sqrfoot" name="sqrfoot" placeholder="Total Square Foot">117
</div>118
</div>119
<input type="submit" name="Book Now">120
</form>121
<p style="background-color: yellow;">122
2. This is code that I copied and reformatted for use on a separate page, yet it does not work. What am I missing here?123
</p>124
<p>125
HTML126
</p>127
<button onclick="optkForm()">128
Open Form</button>129
130
<button onclick="clstkForm()">Close Form</button>131
132
<form class="tkform" id="tkform" method="post" action="URL_to_script">133
<fieldset>134
<legend>Turn Key Service</legend>135
<p>136
<label class="question" for="the_name">Name:</label>137
<input type="text" id="the_name" name="the_name" placeholder="Enter Your Full Name" size="24" />138
</p>139
<p>140
<label class="question" for="the_email">Email:</label>141
<input type="text" id="the_email" name="the_email" placeholder="Email" size="32" required/>142
</p>143
<p>144
<label class="question" for="the_addy">Address:</label>145
<input type="text" id="the_addy" name="the_addy" placeholder="Street Address" size="32" required/>146
</p>147
<p>148
<label class="question" for="the_zip">Zip:</label>149
<input type="text" id="the_zip" name="the_zip" placeholder="ZipCode" size="12" required pattern="[0-9] {5}" />150
</p>151
<p>152
<label class="question" for="the_name">Bedrooms:</label>153
<input type="number" id="bedrooms" name="bedrooms" min="0" max="8" size="2" required/>154
</p>155
<p>156
<label class="question" for="the_name">Bathrooms:</label>157
<input type="number" id="bathrooms" name="bathrooms" min="1" max="20" size="2" required/>158
</p>159
<p>160
161
<label class="question" for="sqft">Squarefoot:</label>162
<input type="text" id="sqft" name="squarefoot" placeholder="Sqrft" size="12" required/>163
</p>164
<p>165
166
<label class="question" for="the_message">Message:</label>167
<textarea id="the_message" name="the_message" placeholder="Enter Your Message Here" rows="7" cols="55" vertical-align="top">168
</textarea>169
</p>170
</fieldset>171
172
<button input type="submit">Submit</button>173
</div>174
</div>175
176
</form>177
</body>178
179
</html>Advertisement
Answer
The description looks mixed in. However if you are looking for why the button is not working for the “tkform”, then you need to change the id of the “tkform” either in the call to action functions:
JavaScript
1
11
11
1
function optkForm() {2
document.getElementById("tkForm").style.display = "block";3
4
5
6
}7
8
function clstkForm() {9
document.getElementById("tkForm").style.display = "none";10
}11
or
in the form HTML description
JavaScript
1
3
1
<form class="tkform" id="tkform" method="post" action="URL_to_script">2
</form>3
“tkform” & “tkForm” are two different IDs.