<form action="http://php.tomgdow.com" method="POST" id="form_one">
    <fieldset class="info">
        <legend>Personal Info</legend>
        <label for="name" id="label-name">name</label>
        <input type="text" id="name" name="param1">
        <span class="msg_name"></span>

        <div class="checkbox-group">
            <p class="checkbox-message">What are your favourite languages?</p>
            <div class="box">

                <div>
                    <label for="choice-html">HTML</label>
                    <input type="checkbox" name="choice-html" id="choice-html" value="HTML"
                        checked>
                </div>
                <div>
                    <label for="choice-css">CSS</label>
                    <input type="checkbox" name="choice-css" id="choice-css" value="CSS">
                </div>
                <div>
                    <label for="choice-js">JavaScript</label>
                    <input type="checkbox" id="choice-js" name="choice-js" value="JavaScript">
                </div>
            </div>
        </div>

        <input class="submit" type="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 choice</label>
            <output for="choice" id="out-choice"></output>
        </div>
    </fieldset>

    <fieldset>
        <legend>Server</legend>
        <label for="server-response" class="hidden" id="label-server-response">Full Server
            Response</label><br>
        <output id="server-response"></output>
    </fieldset>

</form>

async function sendData() {

    const formData = new FormData(form_one);

    param2 = "";

    const choiceElements = document.querySelectorAll("input[name]")
    const choiceNames = Array.prototype.map.call(choiceElements, el => el.id);
    choiceNames.shift();

    for (const elem of choiceNames) {
        param2 = conditionalCatenate(param2, formData.get(elem), ",");
        formData.delete(elem);
    }

    formData.append('param2', param2)

    try {
        const response = await fetch("https://php.tomgdow.com", {
            method: "POST",
            body: formData
        });

        let result = await response.text();
        let responseArray = result.split('&');
        document.getElementById('out-name').value = responseArray[0];
        document.getElementById('out-choice').value = responseArray[1].replace(/,/g, ' and ')
        document.getElementById('server-response').value = result;

    } catch (e) {
        console.error(e);
    }
}

const idArray = ["label-out-name", "label-out-choice", "label-server-response",
    "out-name", "out-choice", "server-response"];

document.getElementById('form_one').addEventListener('submit', function (event) {

    event.preventDefault();
    if (checkField(event, "name")) {

        sendData();

        let msg = "Greetings from the PHP Server (POST Method)";
        document.getElementById('message').innerHTML = msg;

        for (const elem of idArray) {
            document.getElementById(elem).style.visibility = "visible";
        }
    }
});

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

    for (const elem of idArray) {
        document.getElementById(elem).style.visibility = "hidden";
    }

    document.getElementById('name').value = "";
    document.getElementById('message').innerText = "";

    document.getElementById("choice-html").checked = true;

    for (const element of ["choice-css", "choice-js"]) {
        document.getElementById(element).checked = false;
    }
}); 

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;
}

function conditionalCatenate(str1, str2, sep = "") {
    if (str2) {
        str1 = str1 + sep + str2;
        str1 = str1.replace(/^,/, '');
    }
    return str1;
} 

// index.php (server)

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