0

I am facing a situation whereby only the first form in the forloop in the code below can submit data. The rest of the forms after the first forloop posts empty data. What could be the problem. I believe my views is good since it's able to process the data from the first form. I believe the problem should be in the code below only that i cannot figure where the issue is

When i hit submit button on the subsequent form i get the following in the shell

[12/Mar/2020 12:07:17] "POST /hotels/conference/cart/twiga-boardroom-3/ HTTP/1.1" 302 0
[12/Mar/2020 12:07:18] "GET /hotels/conference/panari-hotel HTTP/1.1" 200 34389

HTML CODE

{% for item in object.conferenceroom_set.all %}
<div class="room-item">

                                            <div class="row gap-20">

                                                <div class="col-12 col-sm-12 col-md-6">
                                                    <div class="row gap-20">

                                                        <div class="col-12 col-sm-4 col-md-4">
                                                            <div class="image">
                                                                <img src="{{ item.room_photo.url }}" alt="{{ item.object.name }}" />
                                                            </div>
                                                            <p></p>
                                                            {% if user.is_authenticated and item.user == user %}
                                                            <a href="#" class="btn btn-primary btn-xs">Edit</a>
                                                             <a href="#" class="btn btn-danger btn-xs">Delete</a>
                                                            {% endif %}
                                                        </div>

                                                        <div class="col-12 col-sm-12 col-md-8">
                                                            <div class="content">
                                                                <h5><a href="#">{{ item.room_Name }}</a></h5>
                                                                <p>{% for list in item.features_as_list %}
                                                            <span class="icon-font"><i class="fas fa-check-circle text-primary"></i> {{ list }} </br></span> {% endfor %}</p>
                                                                <p class="max-man">Max. Guests : <span class="badge badge-primary">{{ item.room_Capacity }}</span>
                                                                <p class="price"><span class="number text-secondary"><small>Ksh</small>{{ item.room_Price|intcomma }}</span> per guest</p>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-6" >

                                                    <div class="row gap-20 justify-content-between">
                            <form method="POST" action="{% url 'conference-update-booking-2' item.slug %}" class='pull-right'>

                                                        <div  id="airDatepickerRange-general"  class="col-12 col-sm-8 col-md-8">

                                                            <div class="form-group">
                                                                <label class="line12 font13 spacing-05 mt-5 mb-10 block">Check-in</label>
                                                                <div class="form-icon-left">
                                                                    <span class="icon-font text-muted"><i class="bx bx-calendar"></i></span>
                                                                    <input type="text" name='checkin'id="dateStart-general" class="form-control form-readonly-control" placeholder="dd/mm/yyyy">
                                                                </div>
                                                            </div>

                                                            <div class="form-group">
                                                                <label class="line12 font13 spacing-05 mt-5 mb-10 block">Check-out</label>
                                                                <div class="form-icon-left">
                                                                    <span class="icon-font text-muted"><i class="bx bx-calendar"></i></span>
                                                                    <input type="text" name='checkout' id="dateEnd-general" class="form-control form-readonly-control" placeholder="dd/mm/yyyy">
                                                                </div>
                                                            </div>

                                                        </div>

                                                        <div class="col-12 col-sm-4 col-md-4">

                                                            <div class="form-group form-spin-group mb-5">
                                                                <label class="line12 font13 spacing-05 mt-5 mb-10 block">Attendants</label>
                                                                <div class="form-icon-left">
                                                                    <span class="icon-font"><i class="dripicons-user text-muted"></i></span>
                                                                    <input name='qty' class="form-control touch-spin-03 form-readonly-control" value="1" readonly/>
                                                                    </div>
                                                                    <label class="line12 font13 spacing-05 mt-5 mb-10 block">Reserve</label>
                                                                    <label class="line12 font13 spacing-05 mt-5 mb-10 block"></label>


                                                                    <!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-sm btn-block" data-toggle="modal" data-target="#exampleModal2">
  Book
</button>

<!-- Modal -->
<div class="modal" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel2">Book Accomodation</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="col-12" style="padding-left:0px">
                      <input type="checkbox" id="myCheck"  onclick="myFunction()"> Do you also wish to book rooms for your guests' stay?
                      <p></p>
                      <p></p>
                      <p></p>
                    </div>
                    <div class="row" id="text" style="display:none">

                        <div class="row gap-20 gap-lg-30 mb-20">
                                        <div class="col-8">
                                            <div class="form-group mb-0" style="padding-left:15px">
                                    <select class="custom-select custom-select-md" name="single_hotel_room">
                                        <option selected="" disabled>Select Single room</option>
                                        {% for room in object.room_set.all %}
                                        <option>{{ room.id}}-{{ room.room_Type}}@{{ room.room_Price}}</option>
                                        {%endfor %}
                                    </select>

                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="form-group mb-10" style="padding-right:15px">
                                                <div class="form-icon-left">
                                            <span class="icon-font"><i class="dripicons-user text-muted"></i></span>
                                            <input name='single-guests' class="form-control touch-spin-03 form-readonly-control" value=""/>

                                            </div><label class="line12 font13 spacing-05 mt-5 mb-10 block">Guests</label>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="row gap-20 gap-lg-30 mb-20">
                                        <div class="col-8">
                                            <div class="form-group mb-0" style="padding-left:15px">
                                    <select class="custom-select custom-select-md" name="double_hotel_room">
                                        <option selected="" disabled>Select Double room</option>
                                        {% for room in object.room_set.all %}
                                        <option>{{ room.id}}-{{ room.room_Type}}@{{ room.room_Price}}</option>
                                        {%endfor %}
                                    </select>

                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="form-group mb-10" style="padding-right:15px">
                                                <div class="form-icon-left">
                                            <span class="icon-font"><i class="dripicons-user text-muted"></i></span>
                                            <input name='double-guests' class="form-control touch-spin-03 form-readonly-control" value=""/>

                                            </div><label class="line12 font13 spacing-05 mt-5 mb-10 block">Guests</label>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="row gap-20 gap-lg-30 mb-20">
                                        <div class="col-8">
                                            <div class="form-group mb-0" style="padding-left:15px">
                                    <input type="date" id="checkindate"  name="checkindate" class="form-control form-readonly-control">
                                           <label class="line12 font13 spacing-05 mt-5 mb-10 block">CheckIn Date</label>
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="form-group mb-10" style="padding-right:15px">
                                                <div class="form-icon-left">
                                            <span class="icon-font"><i class="dripicons-user text-muted"></i></span>
                                            <input name='nights' class="form-control touch-spin-03 form-readonly-control" value=""/>

                                            </div><label class="line12 font13 spacing-05 mt-5 mb-10 block">Nights</label>
                                            </div>
                                        </div>

                                    </div>

                    </div>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary btn-sm btn-block">Continue</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>



                                                            </div>


                                                        </div>

                                                    </div>

                                                </div>

                                            </div>

                                        </div>
                                        {% csrf_token %}
                                    </form>
                    {% endfor %}```
Muteshi
  • 820
  • 1
  • 10
  • 25

1 Answers1

0

I want to answer this question myself so that if there will be any newbie who will face this problem will get a solution here. Only the first form in the forloopwould submit or post data because i was using the same name for the modal div id tag. I modified my code above by generating unique modal div id. To do this i added {{forloop.counter}} to id="exampleModalLabel. This ensured that every autogenerated modal would be generated with unique div id tag. I hope this helps someone. Thanks

Muteshi
  • 820
  • 1
  • 10
  • 25