HTML5 Forms Action bahavior - html

Question

Okay I'm trying to pass parameters like this link here using form tag in 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=
but for some reason it always becomes this after i hit submit
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
Notice that whatever is after the hash and behind the question mark gets transferred at the end of the url
The page url is http://pyramisaegypt.com/test-page/
My code is
<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>
i tried every solution out there to change the behavior of the hash in the action of the form but nothing seemed to be working so far.

Answer 1

Perhaps you should look at how a URL is formed. Anything after a # is not sent to the server as it refers to an anchor on the page. Therefore a "GET" form will always strip out those bits.