有誰知道爲什麼我的多階段表單不起作用？

Question

我正在做一個多階段的表格，但它不是正常的 我已經寫了很多不同的代碼，但不知道爲什麼它不按我想要的方式工作 已經兩天了但我現在覺得自己很笨 這裏是代碼 HTML：

<div id="form-container"> 

     <div id="phase-1"> 
      <h3>Phase 01</h3> 
      <form> 

       <input id="fname" type="text" placeholder="First name"> 


       <input id="lname" type="text" placeholder="Last name"> 


       <input id="email" type="text" placeholder="Email"> 

       <button id="phase-1-btn">Next</button> 

      </form> 

     </div> 

     <div id="phase-2"> 

      <h3>Phase 02</h3> 
      <form> 

       <input id="pass" type="text" placeholder="Password"> 


       <input id="cpass" type="text" placeholder="Confirm Password"> 


       <button id="phase-2-btn">Next</button> 

      </form> 

     </div> 

     <div id="phase-3"> 

      <h2>Thank You for Testing my pen</h2> 

     </div> 

    </div> 

CSS：

#form-container{ 
height: 350px; 
width: 300px; 
margin-top: 80px; 
margin-left: auto; 
margin-right: auto; 
background-color: #95a5a6; 
font-family: "Slabo 27px"; 
position: relative; 
box-shadow: 1px 1px 2px, 
    -1px -1px 2px; 
} 

#phase-1, #phase-2{ 
height: 100%; 
width: 100%; 
border-top: 3px solid #f39c12; 
display: block; 
} 

#phase-1 h3, #phase-2 h3{ 
height: 10%; 
width: 60%; 
margin-left: auto; 
margin-right: auto; 
text-align: center; 
font-size: 23px; 
color: #fff; 
} 

#phase-1 form, #phase-2 form{ 
display: block; 
height: 75%; 
padding: 0; 
padding-top: 15px; 
margin: 0; 
} 

input{ 
display: block; 
width: 80%; 
margin-top: 10px; 
margin-left: auto; 
margin-right: auto; 
padding: 10px 20px; 
border: none; 
border-radius: 5px; 
} 

button { 
display: block; 
width: 60%; 
margin-left: auto; 
margin-right: auto; 
margin-top: 20px; 
padding: 10px 5px; 
background-color: #f39c12; 
color: #fff; 
font-weight: 600; 
border: none; 
border-radius: 6px; 
} 

#phase-2{ 
display: none; 
} 

#phase-3{ 
display: none; 
height: 0; 
width: 100%; 
color: #000; 
position: absolute; 
top: 0; 
left: 0; 
background: #f39c12 
} 

#phase-3 h2{ 
width: 200px; 
height: 60px; 
margin-left: auto; 
margin-right: auto; 
margin-top: 135px; 
text-align: center; 
} 

JS：

var fname, lname, email, pass, cpass; 

function id(id) { 
    return document.getElementById(id); 
} 


function phase1() { 
fname = id("fname").value; 
lname = id("lname").value; 
email = id("email").value; 


if (fname.length > 2 && lname.length > 2 && email.length > 2) { 
    id("phase-1").style.display = "none"; 
    id("phase-2").style.display = "block"; 
    // end of if 
} else { 
    alert("Please fill the Form"); 
} 

} // end of phase1 function 


// add the event to the phase-1-btn 
id("phase-1-btn").addEventListener("click", phase1()); 


/* phase 02 */ 

function phase2() { 
pass = id("pass").value; 
cpass = id("cpass").value; 

if (pass.length > 2 && cpass.length > 2) { 
    id("phase-2").style.display = "none"; 
    id("phase-3").style.display = "block"; 
    id("phase-3").style.height = "100%"; 
    // end of if 
} else { 
    alert("Please fill the Form"); 
} 

} // end of phase2 function 
id("phase-2-btn").addEventListener("click", phase2()); 

Answer 1

讓我們試試這個。然後告訴我你在控制檯中看到了什麼。

<script> 

    function phase1() 
    { 
     window.console.log('phase1 function called'); 

     var fname_val = document.getElementById('fname').value; 
     var lname_val = document.getElementById('lname').value; 
     var email_val = document.getElementById('email').value; 

     // verify values 
     window.console.log('fname_val='+fname_val + ' lname_val='+lname_val + ' email_val='+email_val); 

     if(fname_val.length > 2 && lname_val.length > 2 && email_val.length > 2) 
     { 
      window.console.log('validation!! :)'); 

      document.getElementById("phase-1").style.display = "none"; 
      document.getElementById("phase-2").style.display = "block"; 
     } 
     else 
     { 
      alert("Please fill the Form"); 
     } 
    } 


    function phase2() 
    { 
     window.console.log('phase2 function called'); 
    } 


    document.addEventListener("DOMContentLoaded", function(event) { 
     window.console.log("DOM fully loaded and parsed"); 
     document.getElementById("phase-1-btn").addEventListener("click", phase1); 
     document.getElementById("phase-2-btn").addEventListener("click", phase2); 
    }); 

</script> 


<div id="phase-1"> 
    <h3>Phase 01</h3> 
    <input id="fname" type="text" placeholder="First name" /> 
    <input id="lname" type="text" placeholder="Last name" /> 
    <input id="email" type="text" placeholder="Email" /> 
    <input type="button" id="phase-1-btn" value="Next" /> 
</div> 


<div id="phase-2"> 
    <h3>Phase 02</h3> 
    <input id="pass" type="text" placeholder="Password" /> 
    <input id="cpass" type="text" placeholder="Confirm Password" /> 
    <input type="button" id="phase-2-btn" value="Next" /> 
</div> 

<div id="phase-3"> 
    <h2>Thank You for Testing my pen</h2> 
</div> 

Answer 2

要提交表單，您想使用提交按鈕（不是傳統的按鈕）。

將所有輸入都放在表單標籤中。 添加適當的表單標籤屬性，例如（動作&方法） 使用一個表單標籤，內部的提交按鈕包裝所有內容。 CSS將不起作用，因此不需要共享該部分。 最後但並非最不重要 - 不要稱自己愚蠢。愚蠢的人從不求助。尋求幫助是你如何提高你的技能。

如果你堅持使用Javascript來提交表單很好，但你想確保表單首先使用經典的HTML。

要使這個多步驟的過程，你應該嘗試每頁做1個表單。您需要了解會話處理。您可以使用Javascript一次顯示錶單的某些部分，這會給人留下一些步驟的印象，但仍然使用1表單。

<form action="" method="POST"> 
<script> 
    function toggleSection(x){ 
     document.getElementById('sec'+x).style.display = "block"; 
    } 
</script> 

<div id="sec1"> 
    section 1 stuff 
    <input type="button" value="Continue" onclick="toggleSection(2);" /> 
</div> 

<div id="sec2" style="display:none;"> 

    section 2 stuff 
    <input type="button" value="Continue" onclick="toggleSection(3);" /> 

</div> 

<div id="sec3" style="display:none;"> 

    section 3 stuff 
    <input type="submit" value="Submit" /> 
</div> 
</form> 

Answer 3

在這裏它與修改您訂購

var fname, lname, email, pass, cpass; 

function el(id) { 
return document.getElementById(id); 
} 


function phase1() { 
fname = el("fname").value; 
lname = el("lname").value; 
email = el("email").value; 


if (fname.length > 2 && lname.length > 2 && email.length > 2) { 
    el("phase-1").style.display = "none"; 
    el("phase-2").style.display = "block"; 
    // end of if 
} else { 
    alert("Please fill the Form"); 
} 

} // end of phase1 function 


// add the event to the phase-1-btn 
el("phase-1-btn").addEventListener("click", phase1); 


/* phase 02 */ 

function phase2() { 
pass = el("pass").value; 
cpass = el("cpass").value; 

if (pass.length > 2 && cpass.length > 2) { 
    el("phase-2").style.display = "none"; 
    el("phase-3").style.display = "block"; 
    el("phase-3").style.height = "100%"; 
    // end of if 
} else { 
    alert("Please fill the Form"); 
} 

} // end of phase2 function 

el("phase-2-btn").addEventListener("click", phase2);