Button to submit form data to another URL containing # - html

Question

This is my HTML:
<form action="http://example.com/rezervari/index.html#/hotelbooking" method="get">
<input type="hidden" name="hotel" value="<?= $hotel ?>" class="form-control">
<input type="hidden" name="roomtypegroups" value="<?= $roomtypegroups ?>" class="form-control">
<div class="form-row">
<div class="col">
<div class="form-group">
<label>Sosire</label>
<div class="input-group mb-3">
<input id="from" type="text" name="from" value="<?= $arrival == 'CURRENT' ? date('Y-m-d') : $arrival ?>" class="form-control datepicker1">
<div class="input-group-append datepicker1-h">
<span class="input-group-text" id="basic-addon2"><i class="fa fa-calendar-check-o" aria-hidden="true"></i></span>
</div>
</div>
</div>
</div>
<div class="col">
<div class="form-group">
<label>Plecare</label>
<div class="input-group mb-3">
<input id="to" type="text" name="to" value="<?= $arrival == 'CURRENT' ? date('Y-m-d', strtotime(date('Y-m-d') . ' ' . $departure . ' day')) : date('Y-m-d', strtotime($arrival . ' ' . $departure . ' day')) ?>" class="form-control datepicker2">
<div class="input-group-append datepicker2-h">
<span class="input-group-text" id="basic-addon2"><i class="fa fa-calendar-times-o" aria-hidden="true"></i></span>
</div>
</div>
</div>
</div>
</div>
When I submit the form, the URL loses the "#" and messes it up, and that's no good because the query doesn't work on the secondary website, as it becomes:
http://example.com/rezervari/index.html?hotel=14315&roomtypegroups=44332&from=2020-11-23&to=2020-11-24&roomscount=1&adult=1#/hotelbooking
Instead, it should be:
http://example.com/rezervari/index.html#/hotelbooking?hotel=14315&roomtypegroups=44332&from=2020-09-91&to=2020-09-14&adult=1&numchild1=1&numchild2=1&numchild3=1
How can I pass on the link without the "#" getting removed and the whole URL messed up? Thanks!

Answer 1

Fragment IDs are supposed to link to a specific part of a webpage and are resolved client-side.
Consequently they must go after the query string.
When you submit a GET method form, it will replace everything after the start of the query string in the action with the newly generated query string.
If you have some kind of hack which reads the fragment ID client-side, and you need to put the query string inside the fragment ID so that that code can read it, you can't use the standard form submission logic.
You'll need to add a submit event handler to the form with JavaScript, prevent the default action, build the URL yourself and then navigate to it (e.g. by assigning it to location).