javascript - 引导模式中未显示输入的数字

Question

我试图将用户输入的数字显示到 Bootstrap 模式中，但由于某种原因它没有显示。模态出现但值“APno”没有出现在“预约号码”旁边，任何人都可以看到任何原因吗？

我的代码如下:

表单

<form method="POST">
     Appointment Number:<br>

  <input type="number" name="apno" id="apno">
  <br>
  <br><br>
  <input type="button" class="btn btn-success success" value="Submit" id="Submitbtn" name ="Submitbtn" data-toggle="modal" data-target="#confirm-submit">
</form> 

模态

<!-- Modal -->
<div class="modal" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                Add apppointment details
            </div>
            <div class="modal-body">
                Please add the following details

                <!-- Submit details -->
                <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST">
                    <tr>
                        <th>Appointment Number: </th>
                        <td id="APNo"></td>
                    </tr>
                    <br>
                    <label for "comments"> Comments: </label>
                    <br>
                    <textarea name="comments" rows="5" cols="30"></textarea>
                    <br>
                    <label for "prescriptions"> Prescriptions: </label>
                    <br>
                    <textarea name="prescriptions" rows="5" cols="30"></textarea>

                    <br><br>

                </form> 

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                <a href="#" id="submit" class="btn btn-success success">Submit</a>
            </div>
        </div>
    </div>
</div>

JS

  $(document).ready(function() {



    $('#Submitbtn').click(function () {
        /* when the button in the form is clicked, display the entered values in the modal */

      $('#APNo').text($('#apno').val());


    });

    $('#submit').click(function () {
        // when the submit button in modal is clicked, submit the form 


         });
         });

Answer 1

您将数据放在 td 元素中，但您的 td 不包含在表格标签中。将您的表格元素包裹在表格标签中，它应该可以正常工作:

$(document).ready(function() {

  $('#Submitbtn').click(function() {
    /* when the button in the form is clicked, display the entered values in the modal */
    $('#APNo').text($('#apno').val());
  });

  $('#submit').click(function() {
    // when the submit button in modal is clicked, submit the form 


  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> Appointment Number:<br>

<input type="number" name="apno" id="apno">
<br>
<br><br>
<input type="button" class="btn btn-success success" value="Submit" id="Submitbtn" name="Submitbtn" data-toggle="modal" data-target="#confirm-submit">

<!-- Modal -->
<div class="modal" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        Add apppointment details
      </div>
      <div class="modal-body">
        Please add the following details

        <!-- Submit details -->
        <form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="POST">
          <table>
            <tr>
              <th>Appointment Number: </th>
              <td id="APNo"></td>
            </tr>
          </table>
          <br>
          <label for "comments"> Comments: </label>
          <br>
          <textarea name="comments" rows="5" cols="30"></textarea>
          <br>
          <label for "prescriptions"> Prescriptions: </label>
          <br>
          <textarea name="prescriptions" rows="5" cols="30"></textarea>

          <br><br>

        </form>

      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
        <a href="#" id="submit" class="btn btn-success success">Submit</a>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>