Кто-нибудь знает, почему моя многофазная форма не работает?

Я делаю многофазную форму, но она не работает нормально. Я написал для нее много разных кодов, но не знаю, почему она работает не так, как я хочу. Работает с ней два дня, чувствую глупо сейчас вот код 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());
Источник

3 ответа

Решение

Давайте попробуем это. Тогда скажите мне, что вы видите в консоли.

<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>
Источник

Здесь с изменениями, которые вы заказали

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);
Источник

Чтобы отправить форму вы хотите использовать кнопку отправки (не классическая кнопка).

Все ваши входы в теги формы. Добавьте соответствующие атрибуты тега формы, такие как (действие и метод). Используйте один тег формы, который окружает все, с кнопкой отправки внутри. 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>
Источник
Другие вопросы по тегам