有一個<form>更改爲另一個<form>關於提交，不更改頁面

所以基本上我有10個表單，所有單獨的頁面上，當你點擊下一步它將改變到下一頁。我試圖讓它只是設置窗體顯示：無;並引入下一個表格，而不是有10個單獨的頁面。我認爲我可以用jQuery來做到這一點，但我不知道如何達到這個效果。任何幫助表示讚賞！有一個<form>更改爲另一個<form>關於提交，不更改頁面

實例第一頁：

@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; 
 
}

<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>

例第二頁：

@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; 
 
}

<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>

來源

2017-08-24 Jonathan Delconte

這很大程度上取決於您在每頁上提交表單時發生的情況。表單提交給服務器端腳本（您沒有在表單中執行操作，所以我不知道）？或者你是否希望繼續收集10頁的信息，然後將整個包發送到服務器端腳本？用戶可以在頁面之間來回切換嗎？根據我在前一頁的回答，頁面看起來有所不同嗎？這裏缺少很多思考/計劃。 –

@Nawed Khan我的歉意，我忘了提及。我希望將整個10頁作爲一個包發送。用戶無法返回，表單和按鈕已經計劃好。我忘了鏈接materialize.css，所以它沒有出現，但它在那裏。 –

您可以使用選項卡小部件將表單的每個頁面設置爲不同的選項卡。在提交表單時，使用jQuery一次顯示所有選項卡，因爲'display：none;'字段不會提交給服務器。 – Barmar

我沒有足夠的代表處發表評論所以我二隻需在這裏寫：

您可以簡單地創建一個表單和「子類別」那些只是div與特定的id或類。

因此，像這樣

<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一些類，它具有顯示塊或刪除已顯示沒有一個類或者你可以去位置絕對和做的不透明度，但我希望我本可以給你一些工作。

來源

2017-08-24 19:38:16 MrMeDo

有一個<form>更改爲另一個<form>關於提交，不更改頁面

回答

相關問題