Jquery Create Number Of Input Elements based on select value

Question

I would like to start by saying I am very new to jquery and javascript I rarely use it, however I now find myself in a position where I need to make use of it.

What I am trying to do

I am trying to let admin-user upload matches to db for a round in a competition, thus building the schedule for round X....hope that makes sense

What should happen

if user selects, as an example, 4 from the dropdown box 8 input fields should be created, thus allowing user to enter the 2 teams which will play in each round in each match.

I have tried to code this, (please dont laugh) but the logic and code is completely wrong, if anyone can be so kind to assist me with this problem it would be much appreciated, possibly allowing me to build from this in the future.

JFiddle

https://jsfiddle.net/leela89/zvss0f8L/#&togetherjs=RApSQ2E6Sr

Code

 <select id="nrGames" name="nrGame">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
    </select>    

<script type="text/javascript">
    //create input element for nr games
    $("#nrGames").change(function(){
     var value = $(this).val;
     var nr = 0;
     while(nr < value){
         $('#games').add('input');
         nr++;
     }
        })

    </script>
<!--APPEND INOUT TEXT -->
    <div id="games">

    </div>

I have edited Raja's code and added few lines JSFIDDLE

7urkm3n
– 7urkm3n

2016-03-06 07:22:17 +00:00
Commented Mar 6, 2016 at 7:22 — 7urkm3n
– 7urkm3n, Commented Mar 6, 2016 at 7:22
Thank you very much for your time

Marilee
– Marilee

2016-03-06 07:25:09 +00:00
Commented Mar 6, 2016 at 7:25 — Marilee
– Marilee, Commented Mar 6, 2016 at 7:25

Rajaprabhu Aravindasamy · Accepted Answer · 2016-03-06 08:33:46Z

1

Try to .append() the new elements into the target element,

$("#nrGames").change(function() {
  var value = +$(this).val();
  value *= 2;
  var nr = 0;
  var elem = $('#games').empty();
  while (nr < value) {
    elem.append($('<input>',{name : "whateverNameYouWant"}));
    nr++;
  }
});

Also .val() is a function not a property.

DEMO

edited Mar 6, 2016 at 8:33

answered Mar 6, 2016 at 7:11

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

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

6 Comments

WcPc Over a year ago

Why setting a variable to $('#games').empty() (elem)? Why the + before $(this).val()?

Praveen Over a year ago

so that program wont break when changing the value of combobox the 2nd time

Marilee Over a year ago

HI Thank you very much for taking the time to answer the question, if I may ask one more question what will the name attribute be of create elements and how do I set it?

Rajaprabhu Aravindasamy Over a year ago

@WcPc 1. That is caching the element, if we call $("#games") inside for loop, performance drop will happen since we are looking up the dom all the time. + will convert the string that we received through .val() into a number.

Rajaprabhu Aravindasamy Over a year ago

@Marilee You have to pass the settings as a second parameter. Check the answer now.

|

Binu Thomas · Accepted Answer · 2016-09-28 13:02:16Z

0

Small update: Different elements for player in each team will be helpful

$("#nrGames").change(function() {
  var value = +$(this).val();
  var nr = 0;
  var elem = $('#games').empty();
  while (nr < value) {
    elem.append($('<input>',{name : "Team1Player"+nr}));
    elem.append($('<input>',{name : "Team2Player"+nr}));
    nr++;
  }
});

answered Sep 28, 2016 at 13:02

Binu Thomas

11 bronze badge

Collectives™ on Stack Overflow

Jquery Create Number Of Input Elements based on select value

2 Answers 2

DEMO

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related