<form action="https://phptwo.tomgdow.com" method="GET" id="form_one">
    <fieldset class="info">
        <legend>Personal Information</legend>
        <div>
            <label for="name">name</label>
            <input type="text" name="param1" id="name">
        </div>
        <div>
            <label for="email">e-mail</label>
            <input type="email" name="param2" id="email" required><br>
        </div>
        <div>
            <input type="submit" class="submit">
        </div>
    </fieldset>
    <fieldset class="output">
        <legend>Response</legend>
        <div id="message"></div>

        <div>
            <label for="out-name" class="hidden" id="label-out-name">Your name</label>
            <output for="name" id="out-name"></output>
        </div>
        <div>
            <label for="out-email" class="hidden" id="label-out-email">
                Your email address</label>
            <output for="email" id="out-email"></output>
        </div>
        <div>
            <label for="submitted-url" class="hidden" id="label-submitted-url">
                Submitted url (GET)
            </label><br>
            <output for="name email" id="submitted-url"></output>
        </div>
        <div>
            <label for="returned-querystring" id="label-returned-querystring"
                class="hidden">Query String returned from server</label><br>
            <output for="name, email" id="returned-querystring"></output>

        </div>
        <div>
            <label for="server-response" class="hidden" id="label-server-response">
            Full Server Response</label><br>
            <output for="name,email" id="server-response"></output><br>
            <output for="name,email" id="server-response-two"></output>
        </div>
    </fieldset>
</form>
<div id="mydiv"></div>

    <?php
        echo(htmlspecialchars($_GET["param1"])."&"
            .htmlspecialchars($_GET["param2"])."&"
            .htmlspecialchars($_SERVER['HTTP_HOST'])."&"
            .htmlspecialchars($_SERVER['QUERY_STRING'])
            ); 
    ?>

document.getElementById('form_one').addEventListener('submit', function (event) {
    event.preventDefault();
    var param1 = document.getElementById('form_one')[1].value;
    var param2 = document.getElementById('form_one')[2].value;
    makeRequest(
        addQueryStringToUrl('https://phptwo.tomgdow.com', 'param1', param1, 'param2', param2), ajaxCallMe()
    );
    let queryurl = addQueryStringToUrl('https://phptwo.tomgdow.com', 'param1', param1, 'param2', param2)
    console.log("%c %s", "color:green", queryurl)
    document.getElementById("submitted-url").value = queryurl;
    document.getElementById("label-submitted-url").style.visibility = 'visible';

});

function makeRequest(url, fn) {
    let oReq = new XMLHttpRequest();
    oReq.addEventListener("load", fn);
    oReq.open('GET', url);
    oReq.send();
}

function ajaxCallMe() {
    return function ajax() {
        let response = this.responseText;
        let message = "Greetings from the PHP Server (GET Method)";
        let responseArray = response.split('&');
        document.getElementById('out-name').value = responseArray[0];
        document.getElementById('out-email').value = responseArray[1];
        document.getElementById('returned-querystring').value = responseArray[3] + "&" + responseArray[4];
        document.getElementById('server-response').value = responseArray[0] + "&" + responseArray[1] + "&" + responseArray[2] + "&";
        document.getElementById('server-response-two').value = responseArray[3] + "&" + responseArray[4];
        document.getElementById('message').innerHTML = message;
        console.log("%c %s", "color:red", response);
        console.log("%c %s", "color:blue", responseArray[0]);
        console.log("%c %s", "color:blue", responseArray[1]);
        console.log("%c %s", "color:blue", responseArray[2]);
        console.log("%c %s", "color:blue", responseArray[3]);
        console.log("%c %s", "color:blue", responseArray[4]);
        document.getElementById("label-out-name").style.visibility = "visible";
        document.getElementById("label-out-email").style.visibility = "visible";
        document.getElementById("label-returned-querystring").style.visibility = "visible";
        document.getElementById("label-server-response").style.visibility = "visible";
    };
}

function addQueryStringToUrl(url, ...args) {
    var tmp = url + '?';
    if (args.length < 3) {
        // console.log(args);
        tmp = `${tmp}${args[0]}=${args[1]}`;
    }
    else {
        tmp = `${tmp}${args[0]}=${args[1]}`;
        for (let i = 2; i < args.length; i += 2) {
            tmp += `&${args[i]}=${args[i + 1]}`;
        }
    }
    return tmp;
}