html - 在 jinja 循环中创建新的 html/css 元素的问题 (Django)

Question

我正在尝试在 form 中的 jinja 循环内创建新的 html/css 元素，我正在填充从 django View 中获取的数据。所有正常的浏览器端的东西，比如点击按钮时的弹出窗口都很好。但是只有最后一个按钮成功发出 GET 请求，而每个按钮都必须这样做。这是我的表格:

            <form method="GET" action="{% url 'search_results' %}">
            {% csrf_token %}
                {% for name,quali,field,address,pro,c in data %}
                    <div class="ser_tile">
                        <img src={{pro}} id="user_dr" >
                        <button class="btn_tile"  id="btn1"  data-toggle="modal" data-target="#{{c}}">Visit Page</button>
                        <button class="btn_tile"  id="btn1" data-toggle="modal" data-target="#b{{c}}">Book Appointment</button><br/><br/>
                        <span >
                            Name: {{name}}&nbsp;&nbsp;&nbsp;
                            <span class="fa fa-star checked"></span>
                            <span class="fa fa-star checked"></span>
                            <span class="fa fa-star checked"></span>
                            <span class="fa fa-star checked"></span>
                            <span class="fa fa-star"></span><br/>
                            Degree: {{quali}}<br/>
                            Specialist: {{field}}<br/>
                            Hospital: Pradyumna Bal Memorial Hospital<br/>
                            Address: {{address}}

                        </span>
                    </div><br>




            <div class="modal fade" id="{{c}}" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">Profile</h4>
                        </div>
                        <div class="modal-body">

                            <center>
                                <div class="modal_cov"></div>
                                <img class="modal_ico" src={{pro}}><br/><b>{{name}}</b><br/>Pradyumna Bal Memorial Hospital
                                <hr/>
                            </center>
                            <div>
                                <table>
                                    <tr>
                                        <td class="td"><b> Specialist:</b></td>
                                        <td>
                                            {{field}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><b> Ratting:</b></td>
                                        <td>
                                            3
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><b>Available On:</b></td>
                                        <td>
                                            Monday(10:30AM : 5:00PM), Thursday(10:30AM : 1:00PM) , Saturday(10:30AM : 1:00PM)
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><b>Minimum Chagre:</b></td>
                                        <td>
                                            Rs:500/-
                                        </td>
                                    </tr>
                                </table>

                            </div>
                        </div>
                        <div class="modal-footer qq{{c}}">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button class="btn_tile"  data-toggle="modal"  data-target="#b{{c}}" data-dismiss="modal">Book Appointment</button>
                        </div>
                    </div>
                </div>
            </div>
             <script>
                $(".btn_tile").click(function(event){
                    event.preventDefault();
                });
            </script>
            <div class="modal fade" id="b{{c}}" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">Profile</h4>
                        </div>
                        <div class="modal-body">

                            <center>
                                <div class="modal_cov"></div>
                                <img class="modal_ico" src={{pro}}><br/><b>{{name}}</b><br/>Pradyumna Bal Memorial Hospital
                                <hr/>
                            </center>
                            <div>

                                <table>
                                    <tr>
                                        <td class="td"><b> Date:</b></td>
                                        <td>
                                            <input name="date" class="td_in" type="date">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td ><b> Time:</b></td>
                                        <td>
                                            <input name="time" class="td_in" type="time">
                                        </td>
                                         <td>
                                           <b>Avilable times:&nbsp; </b>
                                        </td>
                                        <td>
                                           1:00PM, 3:00PM
                                        </td>
                                    </tr>
                                </table>


                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="submit" name="book" value="confirm" class="btn_tile" >Confirm Booking</button>
                        </div>
                    </div>
                </div>
            </div>

            <hr/>
            {% endfor %}
        </form> 

这个特定的按钮(确认预订)必须生成一个 GET 请求，但它没有生成。数组 request.GET() 返回 None。

here is a screenshot of the popup

Answer 1

您可以尝试将按钮插入到如下表单中....

<form method="get" action="<YOUR DESIRED ACTION>">
    <button type="submit" name="book" value="confirm" class="btn_tile" >Confirm Booking</button>
</form>

希望对你有帮助