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

Html – search field to a specific file with entry

For example if i want to seach 112233 in the tracking number field to redirect to that specific file . 112233.php or 112233.html and so on if someone search 442244 for example to redirect to 442244.php or 442244.html , depends on how we will create the tracking pages ! Thank you

https://garny-rentals.com/test/tracking.html is where the field is located

This is the code :

<form class="">
  <div class="col-md-7 col-sm-7">
    <div class="form-group">
      <input type="text" placeholder="Enter your product ID" required="" class="form-control box-shadow">
    </div>
  </div>
  <div class="col-md-5 col-sm-5">
    <div class="form-group">
      <button class="btn-1">track your product</button>
    </div>
  </div>
</form>

I am stuck here !

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you , can you help me implement this ? where do i add it ?


  2. 0

    So basically, on a button click you want to redirect to a new page, right?
    If that’s the case, you don’t need a <form> for that purpose. All you need is to go to a different location using JavaScript:

    document.querySelector("#trackBtn").addEventListener("click", () => {
  const trackingID = document.querySelector("#trackingID").value.trim();

  if (trackingID.length < 2) { // 2 or any desired safe trackingID length
    alert("Invalid tracking ID");
    return; // Exit function here
  }

  // All OK, navigate:
  document.location.assign(`${trackingID}.html`);
});
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-7 col-sm-7">
      <div class="form-group">
        <input id="trackingID" type="text" placeholder="Enter your product ID" required="" class="form-control box-shadow">
      </div>
    </div>
    <div class="col-md-5 col-sm-5">
      <div class="form-group">
        <button id="trackBtn" class="btn btn-primary">Track your product</button>
      </div>
    </div>
  </div>
</div>

    PS: don’t forget to redirect to a 404 page or at least show a notification error on that route like: "This tracking ID is expired or does not exsist".

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search