How to add more inputs depend dropdown values (PHP, JS)-CodePudding

so I want to add some input based on the option value from the drop down that will be selected. For example, the dropdown looks like this:

<form action="#" method="post">
    <select name="job" id="job" >
        <option value="">position</option>
        <option value="1">Teacher</option>
        <option value="2">Principal</option>
        <option value="3">Staff</option>      
    </select>
</form>

and if the selected value is number 1 or teacher, it will display new input like this below it:

<input type="number" name="student" id="student">
<input type="Text" name="class" id="class">

if you guys know how to make it, maybe you can help me with this please, either using php or js because I've been stuck with this problem for a long time.

CodePudding user response：

There are many different ways to achieve what you want depends on what framwwork you are using.

For

vanilla JS: onchange to control css OR append html.
jQuery: $("#class").hide() / .show();
Angular: ngIf
vueJs: v-if / v-show

etc...

CodePudding user response：

You can try for onchange function in jquery and append new values based on selected options

CodePudding user response：

before that, set the style of input is hide, then You can try onchange on select, Which is get the value of select. then proceed to show the hide input.

CodePudding user response：

You can use like this:

jQuery(document).ready(function() {
    $('#job').change(function () {
       let job = $('#job').val();
       if (job == '1') {
         $('#sampleBox').show();
       } else {
          $('#sampleBox').hide();
       }
   });
)};

<div id="sampleBox">
   <input type="number" name="student" id="student">
   <input type="Text" name="class" id="class">
</div>

CodePudding user response：

In JS you can do that by adding change event listener to the <select></select> element;

and each time the selected <option></option> changes you should make all inputs hidden then make the ones you want visible.

Example:

const select = document.getElementById('job');
select.addEventListener('change', function() {
  // returns the selected option's value 
  const selectedOption = select.value;
  // makes all inputs hidden each time the selected option changes.
  document.querySelectorAll('input').forEach(input => input.style.display = "none");
  // for 1st parameter, pass the option value.
  // for 2nd parameter, pass an array of ids of the inputs you want to make them visible.
  const setInputs = (state, id) => {
    if (selectedOption === state) {
      (id.sup ? id = [id] : id);
      id.forEach(i => {
        try {
          document.getElementById(i).style.display = 'block';
        } catch (error) {
          console.error(`#${i} doesn't exists!`)
        }
      });
    }
  }

  /* if the selected option's value is 1(Teacher),
     The "student" and "class" inputs will be visible. */
  setInputs('1', ['student', 'class']);
  /* if the selected option's value is 2(Principal),
     The "id" and "principal" inputs will be visible. */
  setInputs('2', ['id', 'principal']);
  /* if the selected option's value is 3(Staff),
     The "name" input will be visible. */
  /* if you want to show just one input, 
     don't need to pass an array as 2nd parameter
     just pass a string */
  setInputs('3', 'name');
});

/* Makes all inputs hidden by default */

input {
  display: none;
}

<form action="#" method="post">
  <select name="job" id="job">
    <option selected hidden disabled>Position</option>
    <option value="1">Teacher</option>
    <option value="2">Principal</option>
    <option value="3">Staff</option>
  </select>

  <input type="number" name="student" id="student" placeholder="Student">
  <input type="Text" name="class" id="class" placeholder="class">

  <input type="number" name="id" id="id" placeholder="ID">
  <input type="number" name="principal" id="principal" placeholder="Principal">

  <input type="Text" name="name" id="name" placeholder="Name">
</form>