Question

I am having an issue with a form that appears after the first form is submitted. The first form submits and creates a new form underneath depending on the number inputted. When the newly appeared second form is submitted, another function is supposed to have some text appear below the form, but nothing is happening. It used to disappear after I hit submit, but I added onsubmit="return false;" to the code for the second form and now the second for stays on the screen, but the submit function is not firing.

The purpose of the forms:

1st Form - enter number of students in your class

2nd Form - enter student names and levels (creates inputs for each student from the number submitted in the first form)

** Second form submits and should then show student names and levels entered for the user to review (right now it does nothing but should give the directions - student info will be added to the code next) before a final submission.

I am relatively new to coding, so please explain thoroughly.

Built with twitter-bootstrap, 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>

Answer 1

一位朋友能够帮我解决这个问题。因为页面加载时表单不存在，我的功能将无法正常工作。他建议的改变是在按钮上添加一个onclick =“function”，这样当它被创建然后点击我的功能就行了。

private List<Point> mPoints;
public RecycleAdapter(List<Point> points){
    mPoints = points;
}

//First submit function on the team form gives the user a response
  $( "#submitTeams" ).click(function( event ) {
    event.preventDefault();
    const numberOfStudents = parseInt($("#numberOfStudents").val());
    const divideByFour = numberOfStudents % 4;
    let responseHTML = '<p id="numberOverall">'+numberOfStudents+'</p><p class="responseText">';
    if (divideByFour === 0){
      responseHTML += 'You will have ' + numberOfStudents / 4 + ' teams of 4 in your class.';
    }
    else if (divideByFour === 1) {
      responseHTML += 'You will have ' + (numberOfStudents - 1) /4 + ' teams of 4 in your class and one team of 5.';
    }
    else if (divideByFour=== 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)
    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);
  //here is where the onclick was added to the button
    responseHTMLSecond += '<button type="submit" class="btn btn-primary" id="submitStudents" onclick="addStudentsClicked()">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
//changed to just a function without an event handler
 function addStudentsClicked()
  {
	  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>';
    const numberOfStudentsTwo = parseInt($("#numberOverall").text());
    
    console.log(numberOfStudentsTwo);
	  alert('Scroll down to review your student roster.');
      $('#studentListResponse').show().html(responseHTMLThird);
  }

* {
  box-sizing: border-box;
}

#studentNumberResponse, #secondsStep, #studentListResponse {
  display: none;
}

After second form appears -> issue with function on the new form's submit

1 个答案:

After second form appears -&gt; issue with function on the new form&#39;s submit

1 个答案:

After second form appears -> issue with function on the new form's submit