jquery loop to add input fields

Question

The first part of my code is working just fine. It has the user type in the number of students in a class, hit submit, and then it returns a response depending on their input. I am trying to also have the next step appear when the user hits submit in the first step. I need the number from the first step (numberOfStudents) to create text fields and a drop down for each student. (firstName, lastName, and studentLevel). EX: User enters 24 and hits submit. Gets response "You will have 6 teams of 4." and the second step appears with 24 instances of the firstName, lastName, and studentLevel entry fields with a submit button at the end. Right now, everything is working except for the loop of studentList to create the 24 (x3) entry fields. This is also using bootstrap. I am relatively new to coding, so please explain thoroughly :)

While waiting for a response, I also tried a do-while loop and that will spit out one instance of the 3 entry fields. It doesn't seem to like the i < numberOfStudents.length as a condition.

$("#teamForm").submit(function(event) {
  event.preventDefault();
  const numberOfStudents = parseInt($("#numberOfStudents").val());
  let responseHTML = '<p class="responseText">';
  if (numberOfStudents % 4 === 0) {
    responseHTML += 'You will have ' + numberOfStudents / 4 + ' teams of 4 in your class.';
  } else if (numberOfStudents % 4 === 1) {
    responseHTML += 'You will have ' + (numberOfStudents - 1) / 4 + ' teams of 4 in your class and one team of 5.'
  } else if (numberOfStudents % 4 === 2) {
    responseHTML += 'You will have ' + (numberOfStudents - 6) / 4 + ' teams of 4 in your class and two teams of 3.'
  } else {
    responseHTML += 'You will have ' + (numberOfStudents - 3) / 4 + ' teams of 4 in your class and one team of 3.'
  }
  responseHTML += '</p>'

  $('#studentNumberResponse').css('display', 'block').html(responseHTML);
  $('#numberOfStudents').val('');
}).submit(function(event) {
  event.preventDefault();
  const numberOfStudents = parseInt($("#numberOfStudents").val());
  let responseHTMLSecond = '<div class="card-block"> <h4 class="card-title">Step 2: Enter Your Students</h4> <p class="card-text">Add your students to create each individual team.</p> <form id="studentsForm">';
  let studentList = '<div class="form-group"> <input type="text" class="form-control" id="studentFirstName" aria-describedby="studentFirstName" placeholder="First Name"> </div> <div class="form-group"> <input type="text" class="form-control" id="studentLastName" aria-describedby="studentLastName" placeholder="Last Name"> </div> <div class="form-group"> <label for="exampleSelect1">Select Student Level</label> <select class="form-control" id="exampleSelect1"> <option>High</option> <option>Mid-High</option> <option>Mid-Low</option> <option>Low</option> </select> </div>';

  for(let i = 0; i < numberOfStudents.length; i +=1) {
responseHTMLSecond += studentList[i];
  }
  responseHTMLSecond += '<button type="submit" class="btn btn-primary" id="submitStudents">Submit</button> </form> <small class="text-muted">Click the Submit button when you have finished adding all students.</small> </div>';
  $('#secondsStep').css('display', 'block');
  $('#secondsStep').html(responseHTMLSecond);
});

* {
  box-sizing: border-box;
}

#studentNumberResponse,
#secondsStep,
#studentListResponse {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!DOCTYPE HTML>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>OnPoint Team Generator</title>
  <meta name="description" content="OnPoint Team Generator">
  <meta name="author" content="MeganRoberts">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div class="card">
    <h3 class="card-header" style="text-align: center;">OnPoint Team Generator</h3>
    <div class="card-block">
      <h4 class="card-title">Step 1: Number of Teams</h4>
      <p class="card-text">How many students do you have in your class?</p>
      <form id="teamForm">
        <div class="form-group">
          <input type="text" class="form-control" id="numberOfStudents" aria-describedby="numberStudents" placeholder="Enter Number of Students">
        </div>
        <button type="submit" class="btn btn-primary" id="submitTeams">Submit</button>
      </form>
    </div>
  </div>
  <div class="card">
    <div class="card-block" id="studentNumberResponse">
    </div>
  </div>
  <div id="secondsStep" class="card">
  </div>
  <div class="card">
    <div class="card-block" id="studentListResponse">
    </div>
  </div>
  <script src="app.js"></script>
</body>

</html>

lhavCoder · Accepted Answer · 2017-04-05 19:56:44Z

3

i took a look at your code. The problem was that your for loop to attach the html wasnt excecuting and thats because of the line below. When you clear your textbox your werent getting to set the NumberOfStudents variable again. Ive fixed it. Heres the jsfiddle --> https://jsfiddle.net/b6p29da5/

$('#numberOfStudents').val('');

After clearing the textbox you were attempting to set the variable with the below line

const numberOfStudents = parseInt($("#numberOfStudents").val());

and for that reason your loop wasnt running and your html wasnt getting attached the way you wanted it to.

answered Apr 5, 2017 at 19:56

lhavCoder

9615 silver badges7 bronze badges

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

3 Comments

Meg Over a year ago

Thank you! My friend also suggested this: Your "numberOfStudents" is already a number (you already used parseInt to grab the value out of the input). Your for loop should be (let i = 0; i < numberOfStudents; i++). I don't think length is a property of javascript's number type. Itll return the number of elements in an array, or the number of characters in a string (which, by the way, is just an array of chars). Hopefully I understood that whole thing correctly.

Meg Over a year ago

after both of these fixes (moving the clear text box code and getting rid of .length) my code worked!

lhavCoder Over a year ago

you're right! The length property is only commonly used for strings and arrays and not for primitive datatypes (integers). Another issue with your code was that you were clearing the textbox and attempting to grab a value from it in your second submit function. I've explained that in my answer above.

Meg · Accepted Answer · 2017-04-06 16:03:13Z

Working with the suggestions from above. - I wanted to share in case it helps someone else.

$( "#teamForm" ).submit(function( event ) {
    event.preventDefault();
    const numberOfStudents = parseInt($("#numberOfStudents").val());
    let responseHTML = '<p class="responseText">';
    if (numberOfStudents % 4 === 0){
      responseHTML += 'You will have ' + numberOfStudents / 4 + ' teams of 4 in your class.';
    }
    else if (numberOfStudents % 4 === 1) {
      responseHTML += 'You will have ' + (numberOfStudents - 1) /4 + ' teams of 4 in your class and one team of 5.'
    }
    else if (numberOfStudents % 4 === 2) {
      responseHTML += 'You will have ' + (numberOfStudents - 6) /4 + ' teams of 4 in your class and two teams of 3.'
    }
    else {
      responseHTML += 'You will have ' + (numberOfStudents - 3) /4 + ' teams of 4 in your class and one team of 3.'
    }
    responseHTML += '</p>'

    $('#studentNumberResponse').css('display', 'block').html(responseHTML);

  }).submit(function(event) {
    event.preventDefault();
    const numberOfStudents = parseInt($("#numberOfStudents").val());
    let responseHTMLSecond = '<div class="card-block"> <h4 class="card-title">Step 2: Enter Your Students</h4> <p class="card-text">Add your students to create each individual team.</p> <form id="studentsForm">';
    let i = 0;
    do {
      i++;
      responseHTMLSecond += '<h4 class="numberingStudents">Student ' + i + '</h4>';
      responseHTMLSecond += '<div class="form-group"> <h4> <input type="text" class="form-control" id="studentFirstName'+i+'" aria-describedby="studentFirstName" placeholder="First Name"> </div> <div class="form-group"> <input type="text" class="form-control" id="studentLastName'+i+'" aria-describedby="studentLastName" placeholder="Last Name"> </div> <div class="form-group"> <label for="exampleSelect1">Select Student Level</label> <select class="form-control" id="exampleSelect'+i+'"> <option>High</option> <option>Mid-High</option> <option>Mid-Low</option> <option>Low</option> </select> </div>';
    } while (i < numberOfStudents);
    responseHTMLSecond += '<button type="submit" class="btn btn-primary" id="submitStudents">Submit</button> </form> <small class="text-muted">Click the Submit button when you have finished adding all students.</small> </div>';
    $('#secondsStep').css('display', 'block').html(responseHTMLSecond);
    $('#numberOfStudents').val('');
  });

* {
  box-sizing: border-box;
}

#studentNumberResponse, #secondsStep, #studentListResponse {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>OnPoint Team Generator</title>
    <meta name="description" content="OnPoint Team Generator">
    <meta name="author" content="MeganRoberts">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <div class="card">
      <h3 class="card-header" style="text-align: center;">OnPoint Team Generator</h3>
      <div class="card-block">
        <h4 class="card-title">Step 1: Number of Teams</h4>
        <p class="card-text">How many students do you have in your class?</p>
        <form id="teamForm">
          <div class="form-group">
            <input type="text" class="form-control" id="numberOfStudents" aria-describedby="numberStudents" placeholder="Enter Number of Students">
          </div>
          <button type="submit" class="btn btn-primary" id="submitTeams">Submit</button>
        </form>
      </div>
    </div>
    <div class="card">
      <div class="card-block" id="studentNumberResponse">
      </div>
    </div>
    <div id="secondsStep" class="card">
    </div>
    <div class="card">
      <div class="card-block" id="studentListResponse">
      </div>
    </div>
    <script src="app.js"></script>
  </body>
</html>

SteamDev · Accepted Answer · 2017-04-06 17:41:41Z

There are a few issues here, I'll try to address each in order.

parseInt without a radix can yield unexpected results. see the docs for this method.

const numberOfStudents = parseInt($("#numberOfStudents").val());

should be:

const numberOfStudents = parseInt($("#numberOfStudents").val(), 10);

Repetitive expression numberOfStudents % 4; store this as a variable

// for example
const remainder = numberOfStudents % 4;
let responseHTML = '<p class="responseText">';
if (remainder === 0) {/*...*/}

You might find switch more suitable than a 4-tier if/else statement, but with the relatively small number of conditions the performance gains are negligible.
You are binding 2 separate submit listeners (using .submit(fn) twice). jQuery will execute them in the order that they are bound. In the first function, the last thing you do is clear the value of #numberOfStudents
```
$('#numberOfStudents').val('');
```
In the next function, the first thing you do is pull the value of #numberOfStudents, which was just set to ''.
```
const numberOfStudents = parseInt($("#numberOfStudents").val()); // NaN
```
This is likely the reason your code is not working as expected.

Collectives™ on Stack Overflow

jquery loop to add input fields

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related