DONT ADD ANYTHING HERE!

Information

What is your favourite county

Response
Server

Notes

  1. To select an option by default, use selected
  2. <option value="kildare" selected >Kildare</option>

Code

HTML
<form action="https://php.tomgdow.com" method="post" id="form_one" name="form_oney">
    <fieldset class="info">
        <legend>Information</legend>
        <label for="name">Name</label>
        <input type="text" id="name" name="param1">
        <span class="msg_name"></span>

        <p>What is your favourite county</p>

        <select name="param2" id="select-county">
            <optgroup label="Connaught">
                <option value="galway">Galway</option>
                <option value="leitrim">Leitrim</option>
                <option value="mayo">Mayo</option>
                <option value="roscommon">Roscommon</option>
                <option value="sligo">Sligo</option>
            </optgroup>
            <optgroup label="Munster">
                <option value="clare">Clare</option>
                <option value="cork">Cork</option>
                <option value="kerry">Kerry</option>
                <option value="limerick">Limerick</option>
                <option value="tipperary">Tipperary</option>
                <option value="waterford">Waterford</option>
            </optgroup>
            <optgroup label="Leinster">
                <option value="carlow">Carlow</option>
                <option value="dublin">Dublin</option>
                <option value="kildare" selected >Kildare</option>
                <option value="kilkenny">Kilkenny</option>
                <option value="laois">Laois</option>
                <option value="longford">Longford</option>
                <option value="louth">Louth</option>
                <option value="meath">Meath</option>
                <option value="offaly">Offaly</option>
                <option value="westmeath">Westmeath</option>
                <option value="wexford">Wexford</option>
                <option value="wicklow">Wicklow</option>
            </optgroup>
            <optgroup label="Ulster">
                <option value="antrim">Antrim</option>
                <option value="armagh">Armagh</option>
                <option value="cavan">Cavan</option>
                <option value="derry">Derry</option>
                <option value="donegal">Donegal</option>
                <option value="fermanagh">Fermanagh</option>
                <option value="monaghan">Monaghan</option>
                <option value="tyrone">Tyrone</option>

            </optgroup>
        </select>
        <input type="submit" value="Submit Me!" class="submit">
    </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 county is </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> 
JavaScript
async function sendData() {

    const formData = new FormData(form_one);

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

        let result = await response.text();
        let responseArray = result.split('&');

        let choice = responseArray[1].charAt(0).toUpperCase() + responseArray[1].slice(1);
        document.getElementById('out-name').value = responseArray[0];
        document.getElementById('out-choice').value = choice;
        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) {

    const formData = new FormData(form_one);

    event.preventDefault();

    if (checkField(event, "name")) {
        sendData();

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

        for (const key of formData.keys()) {
            console.log("%c %s", "color:red", key)
        }

        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 = "";

});
php (server)
// index.php (server)

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

References