the first part of code working fine. has user type in number of students in class, hit submit, , returns response depending on input. trying have next step appear when user hits submit in first step. need number first step (numberofstudents) create text fields , drop down each student. (firstname, lastname, , studentlevel). ex: user enters 24 , hits submit. gets response "you have 6 teams of 4." , second step appears 24 instances of firstname, lastname, , studentlevel entry fields submit button @ end. right now, working except loop of studentlist create 24 (x3) entry fields. using bootstrap. relatively new coding, please explain thoroughly :)
while waiting response, tried do-while loop , spit out 1 instance of 3 entry fields. doesn't seem < numberofstudents.length condition.
$("#teamform").submit(function(event) { event.preventdefault(); const numberofstudents = parseint($("#numberofstudents").val()); let responsehtml = '<p class="responsetext">'; if (numberofstudents % 4 === 0) { responsehtml += 'you have ' + numberofstudents / 4 + ' teams of 4 in class.'; } else if (numberofstudents % 4 === 1) { responsehtml += 'you have ' + (numberofstudents - 1) / 4 + ' teams of 4 in class , 1 team of 5.' } else if (numberofstudents % 4 === 2) { responsehtml += 'you have ' + (numberofstudents - 6) / 4 + ' teams of 4 in class , 2 teams of 3.' } else { responsehtml += 'you have ' + (numberofstudents - 3) / 4 + ' teams of 4 in class , 1 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 students</h4> <p class="card-text">add students 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 = 0; < numberofstudents.length; +=1) { responsehtmlsecond += studentlist[i]; } responsehtmlsecond += '<button type="submit" class="btn btn-primary" id="submitstudents">submit</button> </form> <small class="text-muted">click submit button when have finished adding 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 have in 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>
i took @ code. problem loop attach html wasnt excecuting , thats because of line below. when clear textbox werent getting set numberofstudents variable again. ive fixed it. heres jsfiddle --> https://jsfiddle.net/b6p29da5/
$('#numberofstudents').val(''); after clearing textbox attempting set variable below line
const numberofstudents = parseint($("#numberofstudents").val()); and reason loop wasnt running , html wasnt getting attached way wanted to.
Comments
Post a Comment