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

Question

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

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

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?

Priya Rajaram · Accepted Answer · 2015-11-30 13:41:54Z

1

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
}

answered Nov 30, 2015 at 13:41

Priya Rajaram

3602 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nand Over a year ago

it's only Label is coming with out any text box.

Priya Rajaram Over a year ago

Have you used #mydiv as div Id. I was working for me. Just replace all my code and check. Then you can edit as per your requirement.

nand Over a year ago

I tried same in Jsfiddle and its not working . help me to debug it . jsfiddle.net/nandkumar90/jc6L3yfo

L Ja · Accepted Answer · 2015-11-30 13:38:02Z

0

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);

        }

answered Nov 30, 2015 at 13:38

L Ja

1,5262 gold badges12 silver badges23 bronze badges

1 Comment

nand Over a year ago

no error in console .. is there any easy way to do that ? can you provide anything over jsfiddle ?

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related