Question 46208 in Html Question posted in
Some basic documentation can be found here.

Input field to url – Html

This might be a simple thing for you guys but need support on below..
Will have an input field:
"Input your tracking number" and when the # is entered (let’s say 123456) and clicking the button should link to a certain webpage: https://xxxcargo.com/tracking/123456
this simple… but need your support on how to input in html
thanks in advance
I am a newbie with no solid experience and checked some of the similar posts but were not exactly what i need

Tags:

2

Answers


  1. 0

    You can use javascript for this.

    Steps which you can think of for a similar problem

    1. Use Event listeners to listen to submit of the form
    2. On submit, get the data from the input of the form
    3. Open a new tab with the desired link.

    Here is how you can implement your solution.

    document.querySelector("#myForm").addEventListener("submit", function (e) {
  e.preventDefault(); //stop form from submitting
  window.open(
    " https://xxxcargo.com/tracking/" +
      document.querySelector("#myInput").value,
    "_blank"
  );
});
    <h1>Example</h1>
<div>
 <div id="input_form">
  <form id="myForm">
    Enter your TrackingID <br>
    <input type="text" id="myInput" name="fullname"></input>
   <br>
   <button  type="submit">Track Now</button>
  </form>
</div>

    NOTE: StackOverflow might prevent the code from opening a new tab. But try this locally it should work fine.

    Login or Signup to reply.
  2. 0

    Here’s a working JSFiddle that implements this functionality

    HTML

    <form id="form">
  <input id="tracking" type="text" placeholder="Tracking Number" />
  <button type="submit">Submit</button>
</form>

    JavaScript

    document.getElementById("form").addEventListener("submit", (ev) => {
  ev.preventDefault();
  const tracking = document.getElementById("tracking").value;
  const href = `https://xxxcargo.com/tracking/${tracking}`;
  console.log("Redirecting to", href);
  window.location.replace(href);
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search