CODEWITHSUNDEEP
javascriptjqueryfor-loopdynamic
Matt Picca
Matt Picca

Reputation: 142

Adding input type dynamically

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

Upvotes: 0

Views: 126

Answers (2)

partypete25
partypete25

Reputation: 4413

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:

  1. you don't actually tell the function to get the new value

  2. 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>

Upvotes: 0

brk
brk

Reputation: 50346

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

Upvotes: 1

Related Questions