1
最初のフォームが送信された後に表示されるフォームに問題があります。最初のフォームは入力された数字に応じて下に新しいフォームを送信して作成します。新たに登場した2番目のフォームが提出されると、別の関数はフォームの下にテキストが表示されるはずですが、何も起こっていません。それは私が提出した後に消えていたが、私はonsubmit = "return false; 2番目のフォームのコードに、2番目のコードは画面に残りますが、送信機能は起動していません。2番目のフォームが表示された後 - >新しいフォームのサブミットで関数に問題が発生しました
フォームの目的：
第一フォーム - あなたのクラスの生徒の数を入力します
第二フォーム - 最初の形式で提出数から各学生のための入力を作成します（学生の名前とレベルを入力します。 ）
** 2番目のフォームは提出する学生の名前とレベルを表示して、最終的な提出の前に確認してください（現在は何もしません - 学生情報がコードに追加されます） 。
私は比較的新しくコーディングするので、十分に説明してください。 Twitterのブートストラップを内蔵
、jqueryの
$('#secondsStep').hide();
$('#studentListResponse').hide();
//First submit function on the team form gives the user a response
$("#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);
//second submit function on the team form that makes the second form (studentsForm)
}).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" onsubmit="return false;">';
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').show().html(responseHTMLSecond);
$('#numberOfStudents').val('');
});
//submit function on the studentsForm to show a response
$('#studentsForm').submit(function(event) {
event.preventDefault();
let responseHTMLThird = '<h4 class="card-title">Step 3: Review Class Roster</h4> <p class="card-text">Review your class roster before moving on to the next step.</p>';
responseHTMLThird += '';
console.log('This is working somehow');
$('#studentListResponse').show().html(responseHTMLThird);
});* {
box-sizing: border-box;
}
#studentNumberResponse {
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>