vIJAy vIJAy - 4 months ago 15
HTML Question

How to pass parameters to a URL from a select form?

I want to pass values from a select form to a URL in order to connect to an external website using iframe solutions.

I'm very to new to .PHP & JavaScript. Please help me out.

This is the form I created to get data from users to pass into a specific URL.

<form action="selectcourier.php" method="GET">
<h1>Select courier service</h1>

<select>
<option value="Select">Select Courier Service</option>
<option value="1">DTDC</option>
<option value="2">AFL</option>
<option value="3">BlueDart</option>
</select>

Consignment Number: <input type="text" name="cNum"><br>

<center><input type="submit"></center>
</form>


selectcourier.php

<body>
<form><center><h3><a href="http://dtdc.com/tracking/tracking_results.asp?action=track&sec=tr&ctlActiveVal=1&Ttype=awb_no&strCnno=H60874238&GES=N&TrkType2=awb_no&strCnno2=<?php echo $_GET["cNum"]; ?>" target="ifrm"> CONFIRM </a><h3></center>




<iframe id="ifrm" width=300 height=300 seamless src="http://example.com/">
</body>


My question:

Hope you have understood that I'm trying to give all courier tracking service right from my website using an iframe. But here I'm unable to differentiate the appropriate URLs for different types of Courier Service to pass the value (cNum) and open that web link in an iframe.

I have all the URLs of all courier services.

Now how can I differentiate them to pick up the appropriate URL when a Courier Service is selected by the User?

Kindly help me, please. Thanks.

Answer

Since you simply want to load a url to an iframe based on the selection, I would go with this. Basic explanation can be found in the comments:

<html lang="en">
    <head>
        <script type="text/javascript">
        // Set global variables
        var serviceSelect;
        var ConNumberElement;

        // Wait for the page to be loaded
        document.addEventListener('DOMContentLoaded', function() {
            // Get required elements
            serviceSelect = document.getElementById("CourierService");
            ConNumberElement = document.getElementById("cNum");
        });

        function loadWebsite(){
            // Get the iframe
            var ifrm = document.getElementById("ifrm");

            // Get Consignment Number
            var ConNumber = ConNumberElement.value;

            // Get Courier Service
            var serviceValue = serviceSelect.value;

            // Make sure a correct service is selected
            if(serviceValue == "1"){ // DTDC is selected
                ifrm.src = "http://dtdc.com/tracking/tracking_results.asp?action=track&sec=tr&ctlActiveVal=1&Ttype=awb_no&strCnno=" + ConNumber + "&GES=N&TrkType2=awb_no&strCnno2=" + ConNumber;
            } else if(serviceValue == "2"){ // AFL is selected
                ifrm.src = ""; // Add the correct url here. Take the example above on how to do it.
            } else if(serviceValue == "3"){ // BlueDart is selected
                ifrm.src = ""; // Add the correct url here. Take the example above on how to do it.
            } else {
                alert("You have to select a correct Courier Service");
            }
        }
        </script>
    </head>
    <body>
        <h1>Select courier service</h1>

        <select id="CourierService">
            <option value="Select">Select Courier Service</option>
            <option value="1">DTDC</option>
            <option value="2">AFL</option>
            <option value="3">BlueDart</option>
        </select>

        Consignment Number: <input type="text" id="cNum"><br>

        <input type="button" onclick="loadWebsite();" value="CONFIRM" />

        <iframe id="ifrm" width=300 height=300 seamless src="http://example.com/">
    </body>
</html>