skip to Main Content

I have an app that has a form with 12 text inputs for the user to fill out. However the user doesn’t have to fill all of the 12 input boxs, just those that apply to him. Now when the user wants to view the data in a form, I just want the form to display just the fields that have data inside the text inputs and hide all other fields. When viewing the data in a form not every form will display all the 12 feilds. What is the best approach?

Can CSS detect the input fields that are empty and hide them or will I have to use javascript? Please help me I am a beginner and I have been learning on my own only for 4 weeks so I don’t know much.

2

Answers


  1. input:not([value]){
      display:none;
    }
    <input>
    <input value="value">
    Login or Signup to reply.
  2. well, I think , it will be best if you use the js,
    first , you have to get all the input now , you do that with giving same id , same class name or by using ‘querySelectorAll()’
    you can read more about that here.
    now , you have all the input , check them by using for loop or forEach loop
    for having a input or not .
    for eg

    if(input.value.length!==0)
    document.getElementById("your div after the submitting of the form") = input id
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search