<form action="https://php.tomgdow.com" method="POST" id="form_three">
    <fieldset>
        <legend>Information</legend>
        <div>
            <label for="name">Name</label>
            <input type="text" name="param1" id="name" placeholder="name">
            <span class="msg_name"></span>
        </div>
        <p class="radio-message">What is your fav color?</p>
        <div class="box">
            <div>
                <label for="blue">Blue</label>
                <input type="radio" name="userchoice" id="blue" value="blue">
            </div>
            <div>
                <label for="green">Green</label>
                <input type="radio" name="userchoice" id="green" value="green">
            </div>
            <div>
                <label for="red">Red</label>
                <input type="radio" name="userchoice" id="red" value="red" checked>
            </div>
        </div>
        <input type="submit" class="submit" value="Submit Me!">

    </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-choice" class="hidden" id="label-out-choice">
                Your Favourite color
            </label>
            <output for="blue green red" id="out-choice"></output>
        </div>

        <div>
            <label for="submitted-params" class="hidden" id="label-submitted-params">
                Submitted params (POST)
            </label><br>
            <output for="name email" id="submitted-params"></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>
        </div>
    </fieldset>
</form>

document.getElementById('form_three').addEventListener('submit', function (event) {
    if (checkField(event, "name")) {
        event.preventDefault();
        var param1 = document.getElementById('form_three')[1].value;
        var colors = document.getElementsByName("userchoice");

        var color_val;

        for (var i = 0; i < colors.length; i++) {
            if (colors[i].checked) {
                color_val = colors[i].value;
            }
        }
        var params = generateParams('param1', param1, 'param2', color_val);
        console.log("%c %s", "color:green", params)
        document.getElementById("submitted-params").value = params;
        document.getElementById("label-submitted-params").style.visibility = 'visible';
        makePostRequest("https://php.tomgdow.com", params, ajaxCallMe());
    }
});

function ajaxCallMe() {
    return function ajax() {
        let response = this.responseText;
        let message = "Greetings from the PHP Server (POST Method)";
        let responseArray = response.split('&');
        document.getElementById('out-name').value = responseArray[0];
        document.getElementById('out-choice').value = responseArray[1];
        document.getElementById('message').innerHTML = message;
        document.getElementById('server-response').value = responseArray[0] + "&" + 
           responseArray[1] + "&" + responseArray[2]

        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]);

        document.getElementById("label-out-name").style.visibility = "visible";
        document.getElementById("label-out-choice").style.visibility = "visible";
        document.getElementById("label-server-response").style.visibility = "visible";
    };
}

document.getElementById('name').addEventListener('focus', function () {
    document.getElementsByClassName('msg_name')[0].style.backgroundColor = "white";
    document.getElementsByClassName('msg_name')[0].innerText = "";
});

function generateParams(...args) {
    var tmp = "";
    if (args.length < 3) { tmp += `${args[0]}=${args[1]}`; } else {
        tmp += `${args[0]}=${args[1]}`;
        for (let i = 2; i <
            args.length; i += 2) { tmp += `&${args[i]}=${args[i + 1]}`; }
    }
    return tmp;
}

function makePostRequest(url, params, fn) {
    let oReq = new XMLHttpRequest();
    oReq.addEventListener("load", fn);
    oReq.open('POST', url);
    oReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // oReq.setRequestHeader("Content-length", params.length);
    // oReq.setRequestHeader("Connection", "close");
    oReq.send(params);
}

  function checkField(event, in_id) {
    event.preventDefault();
    let tmp = document.getElementById(in_id);
    if (tmp.value === '') {
      var msgName = document.getElementsByClassName('msg_name')[0];
      msgName.innerHTML = "!Required field";
      msgName.style.backgroundColor = "red";
      return false;
    }
    return true;
  }

// index.php (server)

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