CODEWITHSUNDEEP
javascriptjqueryhtmlcssdrop-down-menu
nand
nand

Reputation: 517

Dynamically adding input text field with label in place of drop down menu

I want to replace drop down menu when a specific option selected from a drop down menu.

Hereenter image description here is drop down menu

When ever a user select other from drop down menu , I want to replace this drop down menu with input field like enter image description here

I tried with following code but it didn't work for me 

<div class="form-group">
    <label for="location" class="col-sm-2 control-label" style="color: #0E0E0E;white-space: nowrap;">Your Location</label>
    <div class="col-sm-10">
        <select class="selectpicker form-control" id="location" name="location" required="true">
            <option value="jaipur" disabled="disabled" selected="selected">Jaipur</option>
            <option value="shimla">Shimla</option>
            <option value="bangalore">Bangalore</option>
            <option value="hyderabad">Hyderabad</option>
            <option value="mumbai">Mumbai</option>
            <option value="varansi">Varanasi</option>
            <option value="dehradun">Dehradun</option>
            <option value="masoori">Masoori</option>
            <option value="goa">GOA</option>
            <option value="udaipur">Udaipur</option>
            <option value="kokata">Kolkata</option>
            <option value="agra">Agra</option>
            <option value="allahabad">Allahabad</option>
            <option value="amritsar">Amritsar</option>
            <option value="chandigarh">Chandigarh</option>
            <option value="chennai">Chennai</option>
            <option value="lucknow">Lucknow</option>
            <option value="nanital">Nanital</option>
            <option value="ludhiana">Ludhiana</option>
            <option value="patiala">Patiala</option>
            <option value="others" onclick="addElement();">other</option>
        </select>
        <input type="hidden" value="0" id="theValue" />
        <div id="myDiv"> </div>
    </div>
</div>

JavaScript that I am using is 

function addElement() {
    var ni = document.getElementById('myDiv');
    var numi = document.getElementById('theValue');
    var num = (document.getElementById('theValue').value -1)+ 2;
    numi.value = num;
    var newdiv = document.createElement('div');
    var divIdName = 'my'+num+'Div';
    newdiv.setAttribute('id',divIdName);
    newdiv.innerHTML = 'Element Number '+num+' has been added!';
    ni.appendChild(newdiv);
}

Can someone guide me to achieve the desired goal?

Upvotes: 0

Views: 1221

Answers (2)

Priya Rajaram
Priya Rajaram

Reputation: 360

try to use this.

HTML: 

      <div class="form-group">
   <label for="location" class="col-sm-2 control-label" style="color: #0E0E0E;white-space: nowrap;">Your Location</label>
   <div class="col-sm-10">
      <select class="selectpicker form-control" id="location" onchange="addElement(this.value)" name="location" required="true">
         <option value="jaipur" disabled="disabled" selected="selected">Jaipur</option>
         <option value="shimla">Shimla</option>
         <option value="bangalore">Bangalore</option>
         <option value="hyderabad">Hyderabad</option>
         <option value="others">other</option>
      </select>
      <input type="hidden" value="0" id="theValue" />
      <div id="myDiv" class="hide"><input type="text"> </div>
   </div>
</div>

JQuery:

function addElement(value)
{
    if(value == 'others')
    {
    $('#location').addClass('hide');
    $('#myDiv').addClass('show');
    }
}

CSS: 

.hide
{
display : none
}
.show
{
display : block
}

Upvotes: 1

L Ja
L Ja

Reputation: 1506

Did you get any console errors (F12)? Because you're missing a ' in your code.

 function addElement() {

            var ni = document.getElementById('myDiv');

            var numi = document.getElementById('theValue');

            var num = (document.getElementById('theValue').value -1)+ 2;

            numi.value = num;

            var newdiv = document.createElement('div');

            var divIdName = 'my'+num+'Div';

            newdiv.setAttribute('id',divIdName);

            newdiv.innerHTML = 'Element Number '+num+' has been added!';

            ni.appendChild(newdiv);

        }

Upvotes: 0

Related Questions