问题描述
我正在尝试创建隐藏在每个页面上的表单。我认为必须为每个要隐藏的按钮和表单分别创建一个功能。因此，我的逻辑是在不同的JS页面上使用相同的代码，但在每个JS页面上更改id和函数名称。
但是，当我这样做时，使用完全相同的代码，按钮可以在一页而不是另一页上工作。
这是我尝试学习的许多层的开始，例如在同一页面上打开表单并将其转换为使用jQuery出现。
<!DOCTYPE html>
<html lang="EN">
<Meta charset="UTF-8">
<head>
<title>button test</title>
<script>
window.onload = function() {
document.getElementById("tkform").style.display = "none";
}
window.onload = function() {
document.getElementById("cleanForm").style.display = "none";
}
function openForm() {
document.getElementById("cleanForm").style.display = "block";
}
function closeForm() {
document.getElementById("cleanForm").style.display = "none";
}
function optkForm() {
document.getElementById("tkForm").style.display = "block";
}
function clstkForm() {
document.getElementById("tkForm").style.display = "none";
}
</script>
</head>
<body>
<h3>
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.
1. The 1st code was this,it works but I would like to append and add to it
</h3>
<p>
HTML
</p>
<button onclick="openForm()" style="font-size: 16px; text-align: center" ;>
Get an Estimate</button>
<button onclick="closeForm()">Close Form</button>
<form class="cleanform" id="cleanForm" action="/action_page.PHP">
<legend>Book a Visit</legend>
<p>Please fill out your @R_642_4045@ion below.</p>
<br>
<p id="text" style="display:none">CheckBox is CHECKED!</p>
<div class="columns">
<div class="item">
<label for="fname">First Name<span>*</span></label>
<input id="fname" type="text" name="fname" />
</div>
<div class="item">
<label for="lname"> Last Name<span>*</span></label>
<input id="lname" type="text" name="lname" />
</div>
<div class="item">
<label for="eaddress">Email Address<span>*</span></label>
<input id="eaddress" type="text" name="eaddress" />
</div>
<div class="item">
<label for="zipcode">Zip Code<span>*</span></label>
<input id="zipcode" type="text" name="zipcode" pattern="[0-9] {5}" title="5 digit Zip" />
</div>
</div>
<fieldset>
<legend style="background-color: rgb(221,210,210)">
<p>Service Frequency</p>
</legend>
<div class="columns">
<p>Is This a One-Time or Recurring Clean?</p>
<div class="item">
<br>
<label for="myCheck">One-Time Cleaning</label>
<input type="checkBox" id="myCheck" onclick="myFunction()">
<label for="myCheck">Recurring Service</label>
<input type="checkBox" id="myCheck" onclick="myFunction()">
</div>
</div>
<div class="columns">
<p>Do You need a Move In/Move Out clean?</p>
<div class="item">
<br>
<label for="myCheck">Yes</label>
<input type="checkBox" id="myCheck" onclick="myFunction()">
<label for="myCheck">No</label>
<input type="checkBox" id="myCheck" onclick="myFunction()">
</div>
</div>
</fieldset>
<div class="columns">
<div class="item">
<label for="bedrooms">bedrooms:<span>*</span></label>
<input type="number" id="bedrooms" name="bedrooms" min="0" ; max="8" ; name="bedroom" placeholder="0" />
</div>
<div class="item">
<label for="bathroom">Bathrooms:<span>*</span></label>
<input type="number" id="bathrooms" name="bathrooms" min="0" ; max="20" placeholder="0" />
</div>
<div class="item">
<label for="sqrfoot">Square Foot:<span>*</span></label>
<input type="text" id="sqrfoot" name="sqrfoot" placeholder="Total Square Foot">
</div>
</div>
<input type="submit" name="Book Now">
</form>
<p style="background-color: yellow;">
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?
</p>
<p>
HTML
</p>
<button onclick="optkForm()">
Open Form</button>
<button onclick="clstkForm()">Close Form</button>
<form class="tkform" id="tkform" method="post" action="URL_to_script">
<fieldset>
<legend>Turn Key Service</legend>
<p>
<label class="question" for="the_name">Name:</label>
<input type="text" id="the_name" name="the_name" placeholder="Enter Your Full Name" size="24" />
</p>
<p>
<label class="question" for="the_email">Email:</label>
<input type="text" id="the_email" name="the_email" placeholder="Email" size="32" required/>
</p>
<p>
<label class="question" for="the_addy">Address:</label>
<input type="text" id="the_addy" name="the_addy" placeholder="Street Address" size="32" required/>
</p>
<p>
<label class="question" for="the_zip">Zip:</label>
<input type="text" id="the_zip" name="the_zip" placeholder="ZipCode" size="12" required pattern="[0-9] {5}" />
</p>
<p>
<label class="question" for="the_name">bedrooms:</label>
<input type="number" id="bedrooms" name="bedrooms" min="0" max="8" size="2" required/>
</p>
<p>
<label class="question" for="the_name">Bathrooms:</label>
<input type="number" id="bathrooms" name="bathrooms" min="1" max="20" size="2" required/>
</p>
<p>
<label class="question" for="sqft">Squarefoot:</label>
<input type="text" id="sqft" name="squarefoot" placeholder="Sqrft" size="12" required/>
</p>
<p>
<label class="question" for="the_message">Message:</label>
<textarea id="the_message" name="the_message" placeholder="Enter Your Message Here" rows="7" cols="55" vertical-align="top">
</textarea>
</p>
</fieldset>
<button input type="submit">Submit</button>
</div>
</div>
</form>
</body>
</html>解决方法
描述看起来杂乱无章。但是，如果您要查找为什么按钮不适用于“ tkform”，那么您需要在号召性用语中更改“ tkform”的id ：
function optkForm() {
document.getElementById("tkForm").style.display = "block";
}
function clstkForm() {
document.getElementById("tkForm").style.display = "none";
}
或
以HTML描述的形式
<form class="tkform" id="tkform" method="post" action="URL_to_script">
</form>
“ tkform”和“ tkForm”是两个不同的ID。