Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Sam Bell
Sam Bell
4,410 Points

How to hide form fields until previous fields are filled in??

I am building a login form with 3 fields - email, number and password So basically to start with the email field should only be showing, then once you enter your email the number field shows etc

Trying to figure out a way to do this that isnt duplicating code!

See code below

inputCheck = function(event, target){

var companyNumberEl = document.getElementById('company-number');

if(document.getElementById(('email').value != "")){

    document.getElementById('company-number').disabled = false;

} else {

    document.getElementById('company-number').disabled = true;
}

}

1 Answer

csr13
csr13
33,293 Points
csr13
csr13
33,293 Points

You could try creating the new fields only if the email field has been filled and isn't a falsey value or null and the do the same until all fields are filled.

OR,

you could try to hide the inputs with a CSS property of display: none, and whenever the email is filled with content, then you can add a javascript condition that if true, removes the hidden class from number input and do the same with the password input.

.hidden{
    display: none;
}
.not-hidden {
   /*
   add custom styles to the form input.
  */
}

I am just brainstorming, maybe I am wrong, I am not trying this on my console or anything but ok.

Im also not a javascript girl so here is my attempt to help :star:

To remove and add classes you would need to select an element to remove or add a class and then:

// I would add the hidden classes to the elements in your html, 

var email = document.getElementById('email');
var phone = document.getElementById('number');
var password = document.getElementById('passwd');

// I think inputs with no textContent return as undefined or falsey or null, omg js with so many values.
// so I think you can check for those values like this also -> if (phone.textContent) { }


if (email.textContent != "") {
    phone.classList.remove('hidden');
    phone.classList.add('not-hidden');
if (phone.textContent != "") {
    password.classList.remove('hidden');
    password.classList.add('not-hidden');
}
if (email.textContent&&phone.textContent&&password.textContent) {
   console.log('success')
}

However, if those inputs need to be manipulated by a backend service, then everything changes.