来自HTML的输入值未传递到模态

Question

我正在尝试将预订id从HTML传递到模态。在图片中，当我单击屏幕的“Reservation：preview”旁边的“Cancel”时，会出现一个模式，它应该包含Reservation：preview的id号

弹出Modal，但没有保留id号。拜托，怎么了？

我遵循了这个教程：https://www.geeksforgeeks.org/how-to-pass-data-into-a-bootstrap-modal/。谢谢.

下面是我的代码：

{% extends "layout.html" %}

{% block title %}
    Index
{% endblock %}

{% block main %}
<p>
    <h3>Welcome {{ firstname }}</h3>
</p>

<table class="table table-striped">
    <thead>
        <tr>
            <th>Seat</th>
            <th>Start date</th>
            <th>End date</th>
            <th>Number of days</th>
            <th>Action</th>

        </tr>
    </thead>

    <tbody>

        {% for histor in history %}

            <tr>
                <td>{{ histor.seat_name }}</td>
                <td>{{ histor.start_date}}</td>
                <td>{{ histor.end_date }}</td>
                <td>{{ numberofdays }}</td>
                <td>
                    <form action="/" method="post">
                        <input tupe="text" class="form-control"  id="idtocancel" name="idtocancel" autocomplete="on" selected placeholder={{ histor.booking_id }}>
                        <button type="button" id="submit" class="btn btn-success tocancel"  data-toggle="modal" data-target="#exampleModal">Cancel {{ histor.booking_id}}</button>
                    </form> 

                </td>
            </tr>
        {% endfor %}

    </tbody>

</table>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
    <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Do you really wish to cancel this booking?</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <h6 id="modal_body"></h6>

    </div>
    <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-dismiss="modal">No, go back</button>
        
        <input class="form-control"  name="bookId" id="bookId"  autocomplete="on" selected>
        <button type="button" id="submit" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">Yes, cancel the booking</button>
    </div>
    </div>
</div>
</div>

<!--JavaScript queries-->


<script type="text/javascript"> 
 
        $("#submit").click(function () {
            var name = $("#idtocancel").val();
            $("#modal_body").html( name);
        }); 

</script> 



{% endblock %}

Answer 1

您将{{histor.booking_id}}的值赋给占位符，而不是使用value=“{{histor.booking_id}}”。然后，为click事件使用class并在此内部使用$(this).prev().val()获取输入值，并将其放在您的模式中。

演示代码：

null

$(".tocancel").click(function() {
  var name = $(this).prev().val(); //use prev
  $("#modal_body").html(name);
  $("#bookId").val(name); //use val here
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<table class="table table-striped">
  <thead>
    <tr>
      <th>Seat</th>
      <th>Start date</th>
      <th>End date</th>
      <th>Number of days</th>
      <th>Action</th>

    </tr>
  </thead>

  <tbody>

    <tr>
      <td>A</td>
      <td>2-10-1</td>
      <td>10-1-10</td>
      <td>5</td>
      <td>
        <form action="/" method="post">
          <!--added value="{{ histor.booking_id }}"-->
          <input type="text" class="form-control" name="idtocancel" autocomplete="on" selected placeholder={{ histor.booking_id }} value="1">
          <button type="button" class="btn btn-success tocancel" data-toggle="modal" data-target="#exampleModal">Cancel 1</button>
        </form>

      </td>
    </tr>
    <tr>
      <td>B</td>
      <td>2-10-1</td>
      <td>10-1-11</td>
      <td>5</td>
      <td>
        <form action="/" method="post">
          <input type="text" class="form-control" name="idtocancel" autocomplete="on" selected placeholder={{ histor.booking_id }} value="2">
          <button type="button" class="btn btn-success tocancel" data-toggle="modal" data-target="#exampleModal">Cancel 2</button>
        </form>

      </td>
    </tr>
  </tbody>

</table>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Do you really wish to cancel this booking?</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h6 id="modal_body"></h6>

      </div>
      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-dismiss="modal">No, go back</button>

        <input class="form-control" name="bookId" id="bookId" autocomplete="on" selected>
        <button type="button" id="submit" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">Yes, cancel the booking</button>
      </div>
    </div>
  </div>
</div>