Simple HTML/PHP Form

That Guy · 3 May 2020 at 10:17

So I’m working on a simple intranet page for work, it will be using a bootstrap template and be hosted on a private github repo.

Its all text apart from the 1 form I need to quickly track customers parcels when then are on the phone.

I just need 2 boxes next to each other on the form, one to enter tracking number and the other to enter a postcode, along with a button that says “Track”

This will be using the URL below with the two variables. I think I need to use the PHP GET function from the research I have done but not sure?

Code:

https://dx-track.com/track/DX.aspx?consno=[TRACKING_NUMBER]&postcode=[POST_CODE]

Anyone able to advise on this please?

Peter UK · 3 May 2020 at 13:00

So when you submit the form you want it to go to that page with the values filled in already?

If that's the case you don't need PHP at all, you can do it with simple HTML, I'm not a frontend guy but this should get you pretty much there:

HTML:

<form action="https://dx-track.com/track/DX.aspx">
<label for="consno">Tracking Number: </label>
<input type="text" name="consno" id="consno">
<label for="postcode">Postcode: </label>
<input type="text" name="postcode" id="postcode">
<input type="submit">
</form>

Dup · 3 May 2020 at 13:14

Something like the below should do it, it'll direct to the DHL site and leave your intranet however this will be the case unless they have an API you casn use to return the tracking info.

HTML:

<form id="trackingForm" action="https://dx-track.com/track/DX.aspx" method="get">
    <label for="consno">Consignment No:</label>
    <input type="text" name="consno" id="consno">
    <label for="postcode">Postcode:</label>
    <input type="text" name="postcode" id="postcode">
    <input type="submit" value="Submit">
</form>

Just add on the Bootstrap classes to make it look nice.

Doh, almost the same ar Peters! haha.

That Guy · 3 May 2020 at 13:22

Absolutely amazing thanks for your help peeps!

Peter UK · 3 May 2020 at 13:40

Dup said:
Doh, almost the same ar Peters! haha.

To be fair I'm not sure there's many other ways you can write this!

That Guy · 30 May 2020 at 10:43

Thank you for the above examples I have used them to make 4 different tracking forms, and they all work perfect there is one I am struggling to create, I’m certain its an easy one but I cannot get my head around it.

It’s to track using this URL layout:

Code:

https://www.collectplus.co.uk/track/[TRACKING-NUMBER]

So its just that tracking number at the end that changes, I think this is confusing me because the URL layout doesn’t use any ? or = symbols its just a straight URL if that makes sense.

Thanks in Advance

visibleman · 30 May 2020 at 15:10

Could be tidier but something like the below should work -

Code:

<form name="cpForm" id="cpForm">
    <label for="trackingNo">Tracking No:</label>
    <input type="text" name="trackingNo" id="trackingNo">
    <input type="submit" value="Submit">
</form>
<script>
    document.querySelector("#cpForm").addEventListener("submit", function(e) {
        e.preventDefault(); // Prevent Default Submit
        var eltrackingNumber = document.getElementById("trackingNo");
        if (eltrackingNumber.value.length !== 0) window.location.replace("https://www.collectplus.co.uk/track/" + eltrackingNumber.value);
    });
</script>