Is there a way to craft URLs to fill forms faster?

Question

This is not so much a coding query, but seeking some help on a hack.

For a webpage that has input boxes, can the URL be typed directly with the data such that the entire page loads with the fields pre-filled, without someone having to go through each dropdown box to select the choices?

For example, how can the URL be crafted for the following form, so that the 3 boxes are pre-filled and someone can just click on Search straightaway? Tried this:

https://members.myactivesg.com/facilities/quick-booking?activity_id=18&venue_id=850&chosen_date=2020-08-08

But it doesn't work.

Answer 1

Simply use the URL parameters and add them to the form inputs. Ensure that the format of the value matches the valid value. Should you have this HTML:

<form>
    <input type="number" name="activity_id" id="activity_id">
    <input type="number" name="venue_id" id="venue_id">
    <input type="date" name="chosen_date" id="chosen_date">
</form>

Then you could use this JS:

const qs = window.location.search;
const params = new URLSearchParams(qs);
const entries = params.entries();

entries.forEach(([k, v]) => {
    document.getElementById(k).value = v;
});