Adding input type dynamically

Question

Trying to dynamically add input type text boxes by selecting how many need to be created within the .answer-box using a select tag with options. What am I missing here?

And please refrain from telling me to use .on instead of bind. Thank you!

Here is jsfiddle: https://jsfiddle.net/otjuhp59/

Code:

$(document).ready(function(){
   $("#create-skill").unbind("click");
   $("#create-language").unbind("click");
   $("#create-skill").bind("click", addSkill);
   $("#create-language").bind("click",addLanguage);

   var language=$("#lang").val();
   var skill=$("#skill").val();
   addSkill(skill);
   addLanguage(language);

 });

      function addSkill(s){
           $(".answer-box").html("");
           for(var i=1; i<=s; i++)
           {
               var skillContent="Skill "+i+"<br /><input type='text' id='txt1"+i+"' name='txt1"+i+"' value='' placeholder='Please enter Skill' /><br />";
               $(".answer-box").append(skillContent);
           }

        }

   function addLanguage(l){

            $(".answer-box").html("");
            for (var j=1; j<=l; j++)
            {
                var langContent="Language "+j+"<br /><input type='text' id='txt2"+j+"' name='txt2"+j+"' value='' placeholder='Please enter laanguage' /><br />";
                $(".answer-box").append(langContent);
            }
        }

HTML:

   <div class="select-container">
            <div class="user-input-box">
                <p>Select number of Skills:</p>
                <select class="skill" id="skill">
                    <option value="1">1</option>
                    <option value="1">2</option>
                    <option value="1">3</option>
                    <option value="1">4</option>
                </select>
                <input type="button" id="create-skill" name="create-skill" value="Create Skill" />
                <p>Select number of Languages:</p>
                <select class="lang" id="lang">
                    <option value="1">1</option>
                    <option value="1">2</option>
                    <option value="1">3</option>
                    <option value="1">4</option>
                </select>
                <input type="button" id="create-language" name="create-language" value="Create Language" />
            </div>
        </div>
        <div class="answer-box">

        </div>
    </div>

CSS:

    .select-container{border:1px solid black; min-width:200px; min-height:100px; float:left;}
    .user-input-box{width:180px; min-height:100px; float:left; margin-left:5px;}
    .answer-box{border:1px solid black; min-width:400px; min-height:100px; float:left; margin-left:100px;}

brk · Accepted Answer · 2016-11-16 05:50:43Z

1

There are few modifications needed

Hope this snippet and comments will be useful

JS

$(document).ready(function(){
 // remove all the bind & unbind
 // create input on click of button create-skill
 $("#create-skill").on('click',function(){
      // get the value of selected option
       var s = $("#skill").val();
           $(".answer-box").html("");
           for(var i=1; i<=s; i++)
           {
               var skillContent="Skill "+i+"<br /><input type='text' id='txt1"+i+"' name='txt1"+i+"' value='' placeholder='Please enter Skill' /><br />";
               $(".answer-box").append(skillContent);
           }

        })
//rest of the code

})

HTML

put separate value in each option

<select class="skill" id="skill">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
 </select>

DEMO

answered Nov 16, 2016 at 5:50

brk

50.3k10 gold badges59 silver badges85 bronze badges

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

1 Comment

Matt Picca Over a year ago

Oh okay i see, silly mistake, don't know how i miss that. Thank you!!

partypete25 · Accepted Answer · 2016-11-16 05:56:17Z

The value of your skills and language dropdown does not get passed through when you change the dropdown and click the button.

Two problems you have is that:

you don't actually tell the function to get the new value
The dropdown options all have the same value set to "1", you've only just updated the text label.

https://jsfiddle.net/43cxmx3k/16/

JS:

function addSkill(s) {
  var s = $("#skill").val();
  $(".answer-box").html("");
  for (var i = 1; i <= s; i++) {
    var skillContent = "Skill " + i + "<br /><input type='text' id='txt1" + i + "' name='txt1" + i + "' value='' placeholder='Please enter Skill' /><br />";
    $(".answer-box").append(skillContent);
  }
}

function addLanguage() {
  var l = $("#lang").val();
  $(".answer-box").html("");
  for (var j = 1; j <= l; j++) {
    var langContent = "Language " + j + "<br /><input type='text' id='txt2" + j + "' name='txt2" + j + "' value='' placeholder='Please enter laanguage' /><br />";
    $(".answer-box").append(langContent);
  }
}

HTML:

<select class="skill" id="skill">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<select class="lang" id="lang">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

Collectives™ on Stack Overflow

Adding input type dynamically

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related