I am trying to pass the reservation id from HTML to modal. In pictures, when I click “cancel” next to reservation: preview of the screen A modal appears and it should contain the id number of reservation: preview
Modal pops up but without the reservation id number. Please, what’s wrong?
I followed this tutorial: https://www.geeksforgeeks.org/how-to-pass-data-into-a-bootstrap-modal/. Thank you.
Here is my code:
{% 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">×</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 %}
Advertisement
Answer
You are assigning value of {{ histor.booking_id }}
to placeholder instead use value="{{ histor.booking_id }}"
.Then , use class for click event and inside this get value of input using $(this).prev().val()
and put it inside your modal.
Demo Code :
$(".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">×</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>