Javascript add element based on select option

user_13463781 0
Viewed 660

Basically, I have an select option

<div class="col-lg-6 pl-2">
   <div class="form-input-div">
      <select onchange="addForm()" class="form-control">
         <option>Number of guest to join</option>
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
      </select>
   </div>
</div>

What I want is to add a new form/input field based on the option. For example I will select 4 in the menu it will add 4 input fields and when I changed it to 2 It will delete the other two and so on..

Here is my UI with 2 static input fields.

enter image description here

The two static input fields element

   <div class="row" id="guestDetails">
      <div class="col-lg-6">
         <h5>Guest Detail 1</h5>
         <div class="form-input-div">
            <input type="text" class="form-control" placeholder="Enter Name">
         </div>
         <div class="form-input-div">
            <input type="text" class="form-control" placeholder="Enter Phone">
         </div>
         <div class="form-input-div">
            <input type="text" class="form-control" placeholder=" NRIC (Last 4 Digits)">
         </div>
         <div class="form-input-div">
            <input type="text" class="form-control" placeholder="Enter Email">
         </div>
         <div class="form-input-div address-guest">
            <textarea class="form-control" placeholder="Enter Mailing Address"></textarea>
         </div>
      </div>
      <div class="col-lg-6">
         <h5>Guest Detail 2</h5>
         <div class="form-input-div">
            <input type="text" class="form-control" placeholder="Enter Name">
         </div>
         <div class="form-input-div">
            <input type="text" class="form-control" placeholder="Enter Phone">
         </div>
         <div class="form-input-div">
            <input type="text" class="form-control" placeholder=" NRIC (Last 4 Digits)">
         </div>
         <div class="form-input-div">
            <input type="text" class="form-control" placeholder="Enter Email">
         </div>
         <div class="form-input-div address-guest">
            <textarea class="form-control " placeholder="Enter Mailing Address"></textarea>
         </div>
      </div>
   </div>
</div>

EDIT: What i tried is this

<script>
   function addForm(){
     // alert ('hello')
     var element = document.getElementById('guestDetails');
     element.innerHTML +=  `<div class="col-lg-6">
                     <h5>Guest Detail 1</h5>
                     <div class="form-input-div">
                       <input type="text" class="form-control " placeholder="Enter Name">
                     </div>
                     <div class="form-input-div">
                       <input type="text" class="form-control " placeholder="Enter Phone">
                     </div>
                     <div class="form-input-div">
                       <input type="text" class="form-control " placeholder=" NRIC (Last 4 Digits)">
                     </div>
                     <div class="form-input-div">
                       <input type="text" class="form-control " placeholder="Enter Email">
                     </div>
                     <div class="form-input-div address-guest">
                       <textarea class="form-control " placeholder="Enter Mailing Address"></textarea>
                     </div>
                   </div>`;
   }
</script>

But I dont know how to remove other rows for example I will change the value from 4 to 1

css html jquery javascript
2 Answers

You can use for-loop and run that loop till value of select-box and inside this loop just append new divs .

Demo Code :

function addForm(values) {
  var element = document.getElementById('guestDetails');
  element.innerHTML = "" //empty 
  //loop till select values
  for (var i = 1; i <= parseInt(values); i++) {
    element.innerHTML += `<div class="col-lg-6">
                     <h5>Guest Detail ${i}</h5>
                     <div class="form-input-div">
                       <input type="text" class="form-control " placeholder="Enter Name">
                     </div>
                     <div class="form-input-div">
                       <input type="text" class="form-control " placeholder="Enter Phone">
                     </div>
                     <div class="form-input-div">
                       <input type="text" class="form-control " placeholder=" NRIC (Last 4 Digits)">
                     </div>
                     <div class="form-input-div">
                       <input type="text" class="form-control " placeholder="Enter Email">
                     </div>
                     <div class="form-input-div address-guest">
                       <textarea class="form-control " placeholder="Enter Mailing Address"></textarea>
                     </div>
                   </div>`;
  }
}
<div class="col-lg-6 pl-2">
  <div class="form-input-div">
    <!--pass here value-->
    <select onchange="addForm(this.value)" class="form-control">
      <option>Number of guest to join</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </div>
</div>
<div class="row" id="guestDetails">

</div>

user_106064000

You can use jQuery Toggle Function. Unless you can make your own toggle using pure javascript

function elementBlock(elmOne,elmTwo,elmThree) {
    document.getElementById("one").style.display = elmOne
    document.getElementById("two").style.display = elmTwo
    document.getElementById("three").style.display = elmThree
}
function toogleDiv(val) {
  if (val == 1) {
    elementBlock('block','none','none')
  }else if (val == 2) {
    elementBlock('none','block','none')
  }else if (val == 3) {
    elementBlock('none','none','block')
  }
}
document.getElementById("selectOpt").addEventListener('change', function(e) {
  toogleDiv(e.target.value);
})
#one, #two, #three {
  display: none;
}
  <select class="form-control" id="selectOpt">
     <option>Number of guest to join</option>
     <option>1</option>
     <option>2</option>
     <option>3</option>
  </select>

  <div>
    <div id="one">one</div>
    <div id="two">two</div>
    <div id="three">three</div>
  </div>

First you have to Display None all of your form input Then Based On you select value you have to change the display none to block

I just created it for three div You can include as many as div you want

user_78154030
Related