Does anyone know why my multi-phase form won't work?

Question

I am making a multi-phase form but it is not acting normal I have written a lot of diffrent code for it but don't know why it is not working the way I want it It has been two days working with it I am feeling stupid now here is the code 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());

Johnny Harlamert · Answer 1 · 2016-04-08T18:52:27.190

0

To submit a form you want to use a submit button (not classic button).

Have all of your inputs within the form tags. Add the appropriate form tag attributes such as (action & method) Use one form tag that wraps around everything with the submit button on the inside. CSS will have no effect so no need to share that part. Last but not least - Dont call yourself stupid. Stupid people never ask for help. Reaching out for help is how you improve your skillset.

If you insist on using Javascript to submit the form that is fine, but you want to make sure the form works with classic HTML first.

To make this a multi-step process you should try doing 1 form per page. You will need to understand session handling. You can display portions of the form at a time with Javascript which gives an impression of doing steps but still using 1 form.

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

edited Apr 08 '16 at 18:52

answered Apr 08 '16 at 18:30

Johnny Harlamert

297
1
6

I don't want to submit the form I want to make a simple effect with javascript wich is that if i clicked the button it gives me the next form – Jason Djojo Apr 08 '16 at 18:33
OK - so basically this has nothing to do with the form itself. Wrap a div around each section and give each one a unique id (id="sec1"). All but the first one style it with (style="display:none;"). Add a button in section 1 that when clicked will toggle div sec2 to display:block, Good Luck – Johnny Harlamert Apr 08 '16 at 18:40
yes that is what I did in my code but I don't know why it keeps giving me the alert box wich needs to appear only if the form is not more than 2 characters long – Jason Djojo Apr 08 '16 at 18:45
change the name of the function from "id" to something else. Dont want to use words that match nodes or attribute names. It will cause issues. – Johnny Harlamert Apr 08 '16 at 18:55
Also when adding functions to listeners do not add (). Change id("phase-1-btn").addEventListener("click", phase1()); To document.getElementById("phase-1-btn").addEventListener("click", phase1); If you are a fan of using shortened syntax I highly recommend JQuery – Johnny Harlamert Apr 08 '16 at 18:59
it didn't work it got wors , now the two alert bow are shown – Jason Djojo Apr 08 '16 at 18:59
I changed the functions but nothing two alert box are gone – Jason Djojo Apr 08 '16 at 19:01
Post your latest code in simplest form so I can look at it with the changes – Johnny Harlamert Apr 08 '16 at 19:02

score 0 · Answer 2 · answered Apr 08 '16 at 19:07

here it is with the changes you ordered

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

score 0 · Accepted Answer · answered Apr 08 '16 at 19:20

Let's try this one. Then tell me what you see in the console.

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

The reason for difficulty debugging is bc there was more than 1 bug. When things begin to fail you will want to simplify. Your best friend is console.log. Not sure which one, but I will give you a list of what might have been the culprit. 1. Naming variables or functions the same as common keywords, DOM nodes, or element IDs can cause issues. 2. Applying a listener before the node was added to DOM. 3. Unlikely the cause, but you used outdated HTML button reference. — Johnny Harlamert, Apr 08 '16 at 19:35

Does anyone know why my multi-phase form won't work?

3 Answers3