Redirect a HTML form and add value from input

Question

I have form where I need to redirect to a new url, and add the value from the input to the new URL

<form action="https://test.test.com/" method="GET">
  <fieldset>
    <legend>bftl</legend>
    <input type="text" name="trackTrace" id="trackTrace" placeholder="Add your Track & Trace">
    <label for="month">Track & Trace</label>
    <input type="submit" class="submit" value="Submit">
  </fieldset>
</form>

After you have enter the Track & Trace number and pressed the submit button you shall be redirected to "https://test.test.com/#/TRACK&TRACENUMBER" in a new tab

Since the URL isn't using standard format you have to process the submit with JS. Have you tried anything so far? — , Nov 05 '21 at 09:18
Listen to the [form submit event](https://stackoverflow.com/a/7410112/519413), then [make a redirect](https://developer.mozilla.org/en-US/docs/Web/API/Location/assign), concatenating the values from the form fields in to the URL. If you need more specific help, please edit the question to show the code you've tried. — Rory McCrossan, Nov 05 '21 at 09:19

score 0 · Answer 1 · answered Nov 05 '21 at 09:25

You need js code like this:

<form action="https://test.test.com/" method="GET" onSubmit="return submitForm()">
  <fieldset>
    <legend>bftl</legend>
    <input type="text" name="trackTrace" id="trackTrace" placeholder="Add your Track & Trace">
    <label for="month">Track & Trace</label>
    <input type="submit" class="submit" value="Submit">
  </fieldset>
</form>
<script>
function submitForm() {
    location.href="https://test.test.com/#/TRACK&"+document.getElementById("trackTrace").value;
    return false;
}
</script>

Redirect a HTML form and add value from input

1 Answers1