skip to Main Content

i have code like this, how to show another input form. let say i want to choose value="2" will show 2 new input form.

<div class="col-4">
  <label for="proses">Proses</label>
    <select class="form-control" id="prosess" name="prosess" required>
        <option value="" hidden>- Pilih Proses -</option>
         <option value="1">1 Proses</option>
         <option value="2">2 Proses</option>
         <option value="3">3 Proses</option>
         <option value="4">4 Proses</option>
         <option value="5">5 Proses</option>
         <option value="6">6 Proses</option>
         <option value="7">7 Proses</option>
         <option value="8">8 Proses</option>
         <option value="9">9 Proses</option>
      </select>
</div>

2

Answers


  1. is this what you looking for ?

    $('select').change(function(){
      const num = $(this).val()
      let html = '';
      
      $('input[type="text"]').remove();
      
      for(i = 0; i < num; i++){
        html +='<input type="text">'    
      }
      
      $('form').append(html)
      
    })
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
    <form action="">
      <div class="col-4">
      <label for="proses">Proses</label>
        <select class="form-control" id="prosess" name="prosess" required>
            <option value="" hidden>- Pilih Proses -</option>
             <option value="1">1 Proses</option>
             <option value="2">2 Proses</option>
             <option value="3">3 Proses</option>
             <option value="4">4 Proses</option>
             <option value="5">5 Proses</option>
             <option value="6">6 Proses</option>
             <option value="7">7 Proses</option>
             <option value="8">8 Proses</option>
             <option value="9">9 Proses</option>
          </select>
    </div>
    </form>
    Login or Signup to reply.
  2. I hope this will help you. I simply create the array and save in state. On basis of that apply map to render the inputs.

    function App() {
    
            const [proses, setProses] = useState([])
    
            const handleClick = (e) => {
            let inputArray = []
            for(var i = 0; i < e.target.value; i++){
                inputArray.push(i)
            }
            setProses(inputArray)
            }
    
            const renderInputs = () => {
            return proses.map(i => {
                return <div>
                <input />
                </div>
            })
            }
    
            return (
            <div class="col-4">
                <label for="proses">Proses</label>
                <select class="form-control" onChange={handleClick} id="prosess" name="prosess" required>
                    <option value="" hidden>- Pilih Proses -</option>
                    <option value="1">1 Proses</option>
                    <option value="2" >2 Proses</option>
                    <option value="3">3 Proses</option>
                    <option value="4">4 Proses</option>
                    <option value="5">5 Proses</option>
                    <option value="6">6 Proses</option>
                    <option value="7">7 Proses</option>
                    <option value="8">8 Proses</option>
                    <option value="9">9 Proses</option>
                </select>
                {renderInputs()}
            </div>
            );
        }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search