How to throw unwanted data from form?-CodePudding

I am making a site to add product to a database.
The site has a type switcher for multiple types of the product. by changing the type the input fields are changed by using display attribute CSS.
so there is a problem where the invisible inputs are still in the form and they are also submitted with the form. Also i wanted to validate the data but it have the same problem how do i validate the data shown to the user?. i tried to change the whole by js document.create methods so i can create the inputs and labels i want but it was really complex . is there anyway i can fix this problem?

Here is the code im using:

function TypeListener() {
  var x = document.getElementById("productType").value;
  document.getElementById("Hidden_Div1").style.display = x == 1 ? 'block' : 'none';
  document.getElementById("Hidden_Div2").style.display = x == 2 ? 'block' : 'none';
  document.getElementById("Hidden_Div3").style.display = x == 3 ? 'block' : 'none';
}

.Type {
  display: none;
}

<form id="product_form" action="<?=$_SERVER['PHP_SELF'] ?>" method="post">
  <label for="Type Switcher">Type Switcher</label>
  <select name="typeSwitcher" id="productType" onchange="TypeListener()">
    <option value="" disabled selected>Type Switcher</option>
    <option value="1" id="DVD">DVD</option>
    <option value="2" id="Furniture">Furniture</option>
    <option value="3" id="Book">Book</option>
  </select><br><br>
  <div id="Hidden_Div1" >
    <label for="Size">Size (MB)</label><input type="number" name="size" id="size" min="0"><br>
    <h5>Please, provide size in MB.</h5><br>
  </div>
  <div id="Hidden_Div2" >
    <label for="Height">Height (CM)</label><input type="number" name="height" id="height" min="0"><br>
    <label for="Width">Width (CM)</label><input type="number" name="width" id="width" min="0"><br>
    <label for="Length">Length (CM)</label><input type="number" name="length" id="length" min="0"><br>
    <h5>Please, provide dimensions in CM.</h5><br>
  </div>
  <div id="Hidden_Div3" >
    <label for="Weight">Weight (KG)</label><input type="number" name="weight" id="weight" min="0"><br>
    <h5>Please, provide weight in KG.</h5><br>
  </div>
</form>

CodePudding user response：

Tip: In any current browser (as of Nov of 2015). Fields are submitted even if display is set to 'none'. Fields that are 'disabled', however, will continue to not be submitted.

Solution of submited data :

function TypeListener() {
    var x = document.getElementById("productType").value;
    if (x == 1){
        document.getElementById("Hidden_Div1").style.display = 'block';
        document.getElementsByName("size")[0].removeAttribute("disabled");
    } else {
        document.getElementById("Hidden_Div1").style.display = 'none';
        document.getElementsByName("size")[0].setAttribute("disabled", "");
    }
    if (x == 2){
        document.getElementById("Hidden_Div2").style.display = 'block';
        document.getElementsByName("height")[0].removeAttribute("disabled");
        document.getElementsByName("width")[0].removeAttribute("disabled");
        document.getElementsByName("length")[0].removeAttribute("disabled");
    } else {
        document.getElementById("Hidden_Div2").style.display = 'none';
        document.getElementsByName("height")[0].setAttribute("disabled", "");
        document.getElementsByName("width")[0].setAttribute("disabled", "");
        document.getElementsByName("length")[0].setAttribute("disabled", "");
    }
    if (x == 3){
        document.getElementById("Hidden_Div3").style.display = 'block';
        document.getElementsByName("weight")[0].removeAttribute("disabled");
    } else {
        document.getElementById("Hidden_Div3").style.display = 'none';
        document.getElementsByName("weight")[0].setAttribute("disabled", "");
    }
}

.Type {
  display: none;
}

<form id="product_form" action="<?=$_SERVER['PHP_SELF'] ?>" method="post">
  <label for="Type Switcher">Type Switcher</label>
  <select name="typeSwitcher" id="productType" onchange="TypeListener()">
    <option value="" disabled selected>Type Switcher</option>
    <option value="1" id="DVD">DVD</option>
    <option value="2" id="Furniture">Furniture</option>
    <option value="3" id="Book">Book</option>
  </select><br><br>
  <div id="Hidden_Div1" >
    <label for="Size">Size (MB)</label><input type="number" name="size" id="size" min="0"><br>
    <h5>Please, provide size in MB.</h5><br>
  </div>
  <div id="Hidden_Div2" >
    <label for="Height">Height (CM)</label><input type="number" name="height" id="height" min="0"><br>
    <label for="Width">Width (CM)</label><input type="number" name="width" id="width" min="0"><br>
    <label for="Length">Length (CM)</label><input type="number" name="length" id="length" min="0"><br>
    <h5>Please, provide dimensions in CM.</h5><br>
  </div>
  <div id="Hidden_Div3" >
    <label for="Weight">Weight (KG)</label><input type="number" name="weight" id="weight" min="0"><br>
    <h5>Please, provide weight in KG.</h5><br>
  </div>
</form>

CodePudding user response：

After making invisible entries that you want to be invisible, you can capture the visible entries with HTML Collection and send the data in it to the database.

CodePudding user response：

you can simply move / remove your form's parts in/out the form:

const 
  formProd   = document.forms.product_form
, formParts  = document.querySelector('#form-parts') 
, d_switcher = document.querySelector('#div-switcher')
, formPart   = [...formParts.querySelectorAll('[id^="form-"]')].reduce((o,el)=>(o[el.id]=el,o),{})
  ;

var currentFormEl = null;

formProd.typeSwitcher.onchange =()=>
  {
  if ( currentFormEl )
    formParts.appendChild( currentFormEl ); // previous remove Out
    
  currentFormEl = formPart[`form-${formProd.typeSwitcher.value}`];
  
  d_switcher.appendChild( currentFormEl ); // move In
  }

formProd.onsubmit = e =>  // proof...
  {
  e.preventDefault()  // for testing....
  console.clear()
  console.log( Object.fromEntries( new FormData(formProd).entries() ) )
  }

formProd.onreset = () =>  // just in case...
  {
  if ( currentFormEl )
    formParts.appendChild( currentFormEl ); // previous remove Out
  }

#form-parts { display: none; }

#div-switcher label {
  display : block;
  width   : 12em;
  height  : 2em ;
  margin  : .3em 0;
}
#div-switcher label input {
  width      : 5em;
  float      : right;
  transform  : translateY(-.3em);
  text-align : center;
}

<form name="product_form" action="<?=$_SERVER['PHP_SELF'] ?>" method="post">
  <label>Type Switcher</label>
  <select name="typeSwitcher">
    <option value="" disabled selected>Type Switcher</option>
    <option value="DVD"       > DVD       </option>
    <option value="Furniture" > Furniture </option>
    <option value="Book"      > Book      </option>
  </select><br><br>

  <div id="div-switcher"></div>

  <button type="submit">submit</button>
  <button type="reset">reset</button>
  
</form>


<div id="form-parts">
  <div id="form-DVD">
    <label>Size (MB) <input type="number" name="size" id="size" min="0"></label>
    <h5>Please, provide size in MB.</h5>
  </div>
  <div id="form-Furniture">
    <label>Height (CM) <input type="number" name="height" min="0" value="0"></label>
    <label>Width (CM)  <input type="number" name="width"  min="0" value="0"></label>
    <label>Length (CM) <input type="number" name="length" min="0" value="0"></label>
    <h5>Please, provide dimensions in CM.</h5>
  </div>
  <div id="form-Book">
    <label>Weight (KG) <input type="number" name="weight" min="0" value="0"></label>
    <h5>Please, provide weight in KG.</h5>
  </div>
</div>