HTML5 Forms Action bahavior

Question

Хорошо, я пытаюсь передать параметры, подобные этой ссылке, используя тег формы в HTML

https://pyramisaegypt.seebooking.com/#/booking-engine/room-list?property_id=445586&checkin=2018-11-22&checkout=2018-11-23&noOfAdults=1&noOfChildren=1&noOfRooms=1&promo_code=

но по какой-то причине это всегда происходит после того, как я нажму "отправить"

https://pyramisaegypt.seebooking.com/?property_id=445586&checkin=2018-11-22&checkout=2018-11-23&noOfAdults=1&noOfChildren=1&noOfRooms=1&promo_code=#/booking-engine/room-list

Обратите внимание, что все, что находится после хеша и позади знака вопроса, переносится в конце URL

URL страницы: http://pyramisaegypt.com/test-page/

Мой код

<form id="reservation-widget-wrap-form-element" style="background-color: #f0f0f0; color: #777; padding: 10px; padding-right: 5px; margin-bottom: 20px;" action="https://pyramisaegypt.seebooking.com/#/booking-engine/room-list" method="get" target="_blank">

<div id="children-wrap" style="width: 20%; display: inline-block">
<div class="caption">Hotels</div>
<p><select id="reservation-widget-hotels" style="width: 100%;height: 32px;padding-left: 5px;margin-bottom: 0px;" name="property_id"><option value="547027">Pyramisa Cairo Suites Hotel</option><option value="568389">Pyramisa Sahl Hasheesh Resort</option><option value="31070">Pyramisa Sharm El Sheikh Resort</option><option value="35520">Pyramisa Isis Luxor Resort</option><option value="445586">Pyramisa Isis Island Aswan Resort</option><option value="450628">Pyramisa Isis Corniche Aswan Resort</option></select></p>
</div>

<div id="check-in-wrap" style="display: inline-block; /* background: white;">
<div class="caption">Check-in date</div>
<p><input id="reservation-widget-checkin" class="hasDatepicker" style="width: 125px;height: 50%;" name="checkin" type="date"></p>
</div>
<div id="check-out-wrap" style="display: inline-block; padding: 5px;">
<div class="caption">Check-out date</div>
<p><input id="reservation-widget-checkout" class="hasDatepicker" style="width: 125px;height: 50%;" name="checkout" type="date"></p>
</div>

<div id="adults-wrap" style="display: inline-block;">
<div class="caption">Adults</div>
<p style="width: 100px;"><select id="reservation-widget-adults" style="display: inline-block; width: 121.4px; height: 50%;" name="noOfAdults"><option value="1">1</option><option value="2">2</option></select></p>
</div>
<div id="children-wrap" style="display: inline-block;padding: 5px;width: 100px;">
<div class="caption">Children</div>
<p style="
    width: 100px;
"><select id="reservation-widget-children" style="display: inline-block; width: 121.4px; height: 50%;" name="noOfChildren"><option value="0">0</option><option value="1">1</option><option value="2">2</option></select></p>
</div>

<div class="caption">Number of Rooms</div>
<p style="
    width: 100px;
"><select id="reservation-widget-children" style="display: inline-block; width: 121.4px; height: 50%;" name="noOfRooms"><option value="0">0</option><option value="1">1</option><option value="2">2</option></select></p>
</div>

<div id="children-wrap" style="display: inline-block;padding: 5px;width: 100px; margin-left: 1%;">
<div class="caption">Promo Code</div>
<p style="width: 100px;">
<input type="text" style="width: 100%;" name="promo_code">
</p>
</div>

<p style="display: inline-block; width: 20%; margin-bottom: 0px; margin-left: 2%;"><button id="submit-button" type="submit" style="
    background: #b01c30;
    width: 90%;
    border-radius: 6px;
    height: 35px;
    border: none;
">Online Reservation</button></p>
</form>

Я попробовал каждое решение, чтобы изменить поведение хэша в действии формы, но пока что ничего не помогало.

Answer 1

Возможно, вам стоит посмотреть, как формируется URL. Все, что после #, не отправляется на сервер, так как ссылается на привязку на странице. Поэтому форма «GET» всегда удаляет эти биты.