在提交时将<form>更改为另一个，而不更改页面

Question

所以基本上我有10个表单，目前都在不同的页面上，当你点击下一个时它会改为下一页。我试图让它只是将表单设置为display：none;并带来下一个表格，而不是10个单独的页面。我假设我可以用jQuery做到这一点，但我不确定我是如何实现这种效果的。任何帮助表示赞赏！

第一页示例：

＆＃13;

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-size: 12px;
  line-height: 30px;
  color: #777;
  background-image: url("../images/bg.jpg");
}

a{
  color:#ffffff;
  text-decoration:none;
}

.jetpack{position:absolute; top:200px; left:200px; width:200px; height:445px; z-index:4;animation: bounce 8s linear infinite; -webkit-animation: bounce 8s linear infinite;}
.rocketeer{background:url(../images/rocketeer.png) no-repeat 0 0; position:relative; z-index:2; width:100%; height:100%; background-size:100% auto; }
.trail{ background:url(../images/jet-trail.png) no-repeat 0 0; width:80px; height:100%; background-size:100% auto; position:absolute; z-index:1; top:225px; left:-30px;
animation: jettrail 2s alternate infinite; -webkit-animation: jettrail 2s alternate infinite;}
.jetenter{animation: enter 3s linear 1; -webkit-animation: enter 3s linear 1;}

@-webkit-keyframes bounce { 0%, 20%,40%,60%,80%, 100% { top:200px; } 10% { top:205px; } 30% { top:185px; } 50% { top:205px; } 70% { top:195px; } 90% { top:215px; } }
@keyframes bounce { 0%, 20%,40%,60%,80%, 100% { top:200px; } 10% { top:205px; } 30% { top:185px; } 50% { top:205px; } 70% { top:195px; } 90% { top:215px; } }

@-webkit-keyframes jettrail { from{opacity:1;} to{opacity:.3;} }
@keyframes jettrail { from{opacity:1;} to{opacity:.3;} }

.jetpack2{position:absolute; top:200px; right:200px; width:200px; height:445px; z-index:4;animation: bounce 8s linear infinite; -webkit-animation: bounce 8s linear infinite;}
.rocketeer2{background:url(../images/rocketeer2.png) no-repeat 0 0; position:relative; z-index:2; width:100%; height:100%; background-size:100% auto; }
.trail2{ background:url(../images/jet-trail2.png) no-repeat 0 0; width:80px; height:100%; background-size:100% auto; position:absolute; z-index:1; top:225px; left:152px;
animation: jettrail 2s alternate infinite; -webkit-animation: jettrail 2s alternate infinite;}
.jetenter2{animation: enter 3s linear 1; -webkit-animation: enter 3s linear 1;}

@-webkit-keyframes bounce { 0%, 20%,40%,60%,80%, 100% { top:200px; } 10% { top:205px; } 30% { top:185px; } 50% { top:205px; } 70% { top:195px; } 90% { top:215px; } }
@keyframes bounce { 0%, 20%,40%,60%,80%, 100% { top:200px; } 10% { top:205px; } 30% { top:185px; } 50% { top:205px; } 70% { top:195px; } 90% { top:215px; } }

@-webkit-keyframes jettrail2 { from{opacity:1;} to{opacity:.3;} }
@keyframes jettrail2 { from{opacity:1;} to{opacity:.3;} }

.container {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
  font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
}

#contact {
  background: #F9F9F9;
  padding: 25px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

#contact h3 {
  display: block;
  font-size: 30px;
  font-weight: 300;
  margin-bottom: 10px;
  text-align:center;
}

#contact h4 {
  margin: 5px 0 15px;
  display: block;
  font-size: 13px;
  font-weight: 400;
  text-align:center;
}

fieldset {
  border: medium none !important;
  margin: 0 0 10px;
  min-width: 100%;
  padding: 0;
  width: 100%;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
  width: 100%;
  border: 1px solid #ccc;
  background: #FFF;
  margin: 0 0 5px;
  padding: 10px;
}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  border: 1px solid #aaa;
}

#contact textarea {
  height: 100px;
  max-width: 100%;
  resize: none;
}

#contact button[type="submit"] {
  cursor: pointer;
  width: 100%;
  border: none;
  background: #175587;
  color: #FFF;
  margin: 0 0 5px;
  padding: 10px;
  font-size: 15px;
}

.note{text-align:center;}

#contact button[type="submit"]:hover {
  background: #175587;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.copyright {
  text-align: center;
}

#contact input:focus,
#contact textarea:focus {
  outline: 0;
  border: 1px solid #aaa;
}

::-webkit-input-placeholder {
  color: #888;
}

:-moz-placeholder {
  color: #888;
}

::-moz-placeholder {
  color: #888;
}

:-ms-input-placeholder {
  color: #888;
}

＆＃13;

<div class="jetpack">
  <div class="rocketeer"></div>
    <div class="trail"></div>
</div>

<div class="jetpack2">
  <div class="rocketeer2"></div>
    <div class="trail2"></div>
</div>

<div class="container">
  <form id="contact" action="" method="post">
    <h3>Integrated Webworks</h3>
    <h4>Website Questionnaire</h4>
    <p>Question 1 of 10</p>
    <h5 class="note">What Are Three Websites That You Like?</h5>
    <p class="note">Please list 3 things you like and 3 things you do not like about each site. They don't necessarily have to be related to your idea.</p>
    <fieldset>
      <textarea placeholder="First Website" tabindex="1" required></textarea>
    </fieldset>
    <fieldset>
      <textarea placeholder="Second Website" tabindex="2" required></textarea>
    </fieldset>
    <fieldset>
      <textarea placeholder="Third Website" tabindex="3" required></textarea>
    </fieldset>
    <fieldset>
      <a href="2of10.html" class="waves-effect waves-light btn-large"><i class="material-icons right">navigate_next</i>Next</a>
    </fieldset>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;

第二页示例：

＆＃13;

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-size: 12px;
  line-height: 30px;
  color: #777;
  background-image: url("../images/bg.jpg");
}

a{
  color:#ffffff;
  text-decoration:none;
}

.jetpack{position:absolute; top:200px; left:200px; width:200px; height:445px; z-index:4;animation: bounce 8s linear infinite; -webkit-animation: bounce 8s linear infinite;}
.rocketeer{background:url(../images/rocketeer.png) no-repeat 0 0; position:relative; z-index:2; width:100%; height:100%; background-size:100% auto; }
.trail{ background:url(../images/jet-trail.png) no-repeat 0 0; width:80px; height:100%; background-size:100% auto; position:absolute; z-index:1; top:225px; left:-30px;
animation: jettrail 2s alternate infinite; -webkit-animation: jettrail 2s alternate infinite;}
.jetenter{animation: enter 3s linear 1; -webkit-animation: enter 3s linear 1;}

@-webkit-keyframes bounce { 0%, 20%,40%,60%,80%, 100% { top:200px; } 10% { top:205px; } 30% { top:185px; } 50% { top:205px; } 70% { top:195px; } 90% { top:215px; } }
@keyframes bounce { 0%, 20%,40%,60%,80%, 100% { top:200px; } 10% { top:205px; } 30% { top:185px; } 50% { top:205px; } 70% { top:195px; } 90% { top:215px; } }

@-webkit-keyframes jettrail { from{opacity:1;} to{opacity:.3;} }
@keyframes jettrail { from{opacity:1;} to{opacity:.3;} }

.jetpack2{position:absolute; top:200px; right:200px; width:200px; height:445px; z-index:4;animation: bounce 8s linear infinite; -webkit-animation: bounce 8s linear infinite;}
.rocketeer2{background:url(../images/rocketeer2.png) no-repeat 0 0; position:relative; z-index:2; width:100%; height:100%; background-size:100% auto; }
.trail2{ background:url(../images/jet-trail2.png) no-repeat 0 0; width:80px; height:100%; background-size:100% auto; position:absolute; z-index:1; top:225px; left:152px;
animation: jettrail 2s alternate infinite; -webkit-animation: jettrail 2s alternate infinite;}
.jetenter2{animation: enter 3s linear 1; -webkit-animation: enter 3s linear 1;}

@-webkit-keyframes bounce { 0%, 20%,40%,60%,80%, 100% { top:200px; } 10% { top:205px; } 30% { top:185px; } 50% { top:205px; } 70% { top:195px; } 90% { top:215px; } }
@keyframes bounce { 0%, 20%,40%,60%,80%, 100% { top:200px; } 10% { top:205px; } 30% { top:185px; } 50% { top:205px; } 70% { top:195px; } 90% { top:215px; } }

@-webkit-keyframes jettrail2 { from{opacity:1;} to{opacity:.3;} }
@keyframes jettrail2 { from{opacity:1;} to{opacity:.3;} }

.container {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
  font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
}

#contact {
  background: #F9F9F9;
  padding: 25px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

#contact h3 {
  display: block;
  font-size: 30px;
  font-weight: 300;
  margin-bottom: 10px;
  text-align:center;
}

#contact h4 {
  margin: 5px 0 15px;
  display: block;
  font-size: 13px;
  font-weight: 400;
  text-align:center;
}

fieldset {
  border: medium none !important;
  margin: 0 0 10px;
  min-width: 100%;
  padding: 0;
  width: 100%;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
  width: 100%;
  border: 1px solid #ccc;
  background: #FFF;
  margin: 0 0 5px;
  padding: 10px;
}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  border: 1px solid #aaa;
}

#contact textarea {
  height: 100px;
  max-width: 100%;
  resize: none;
}

#contact button[type="submit"] {
  cursor: pointer;
  width: 100%;
  border: none;
  background: #175587;
  color: #FFF;
  margin: 0 0 5px;
  padding: 10px;
  font-size: 15px;
}

.note{text-align:center;}

#contact button[type="submit"]:hover {
  background: #175587;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.copyright {
  text-align: center;
}

#contact input:focus,
#contact textarea:focus {
  outline: 0;
  border: 1px solid #aaa;
}

::-webkit-input-placeholder {
  color: #888;
}

:-moz-placeholder {
  color: #888;
}

::-moz-placeholder {
  color: #888;
}

:-ms-input-placeholder {
  color: #888;
}

＆＃13;

<div class="jetpack">
  <div class="rocketeer"></div>
    <div class="trail"></div>
</div>

<div class="jetpack2">
  <div class="rocketeer2"></div>
    <div class="trail2"></div>
</div>

<div class="container">
  <form id="contact" action="" method="post">
    <h3>Integrated Webworks</h3>
    <h4>Website Questionnaire</h4>
    <p>Question 2 of 10</p>
    <h5 class="note">What Are Three of Your Competitor's Websites?</h5>
    <p class="note">Please list 3 things you like and 3 things you do not like about each site. They don't necessarily have to be related to your idea.</p>
    <fieldset>
      <textarea placeholder="First Competitor's Website" tabindex="1" required></textarea>
    </fieldset>
    <fieldset>
      <textarea placeholder="Second Competitor's Website" tabindex="2" required></textarea>
    </fieldset>
    <fieldset>
      <textarea placeholder="Third Competitor's Website" tabindex="3" required></textarea>
    </fieldset>
    <fieldset>
      <a href="3of10.html" class="waves-effect waves-light btn-large"><i class="material-icons right">navigate_next</i>Next</a>
    </fieldset>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我没有足够的代表发表评论，所以我只想写在这里：

你可以简单地创建一个表单和“子类别”，它们只是具有特定id或类的div。

这样的事情

<form>
 <div class="formpage">
  <!--Some form inputs or whatever-->
  <!--At the end put some button that call a JavaScript function so that you go to the next page-->
 </div>
 <div class="formpage">
 <!--Same as previously-->
 </div>
 <div class="formpage">
 <!--Let's say this will be the last page so put here the submit button of the form-->
 </div>
</form>

现在让我们确保默认情况下.formpage隐藏在css：

中

.formpage {
display: block;
}

现在有些JavaScript。

//You can either load this javascript on page load or when some button to start the form is pressed.
//So let's make sure show the first page.
document.getElementsByClassname("formpage")[0].style.display = "block";

//Now a function that will be called when we press the button at the bottom of the form "page" to go to the next one.
function nextFormPage(id) {
 document.getElementsByClassname("formpage")[id-1].style.display = "none";
 document.getElementsByClassname("formpage")[id].style.display = "block";
}

当然你可以用更好的方式来做，比如给formpage div一些有显示块的类或删除一个没有显示的类，或者你可以去绝对位置并做不透明，但我希望我能给你有用的东西。