DONT ADD ANYTHING HERE!

Personal Information

Response
Client Side
Server

Notes

  1. This page uses fetch to send and receive data from the server, rather than ajax/XMLHttp
  2. Uses POST method to send
  3. accesskey for reset is r (⌃⌥ r on Mac)
  4. accesskey for submit is s (⌃⌥ s on Mac)

Code

html
<form action="https://somesite.php" method="POST" 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" accesskey="s">
            <output id="access-key-submit"></output>
        </div>
        <div>
            <input type="reset" value="Reset Form" accesskey="r">
            <output id="access-key-reset"></output>
        </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>
    </fieldset>
    <fieldset>
        <legend>Client Side</legend>
        <label for="param1" class="hidden" id="label-param1">
            <code>formData.get('param1')</code></label>
        <output id="param1"></output><br>
        <label for="param2" class="hidden"
            id="label-param2"><code>formData.get('param2')</code></label>
        <output id="param2"></output>
    </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);

    document.querySelector("#param1").value = formData.get('param1');
    document.querySelector("#param2").value = formData.get('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-email').value = responseArray[1];
        document.getElementById('server-response').value = result;

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

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

    event.preventDefault();

    sendData();

    let msg = "Greetings from the PHP Server (POST Method)";
    document.getElementById('message').innerHTML = msg;
    document.getElementById("label-out-name").style.visibility = "visible";
    document.getElementById("label-out-email").style.visibility = "visible";
    document.getElementById("label-param1").style.visibility = "visible";
    document.getElementById("label-param2").style.visibility = "visible";
    document.getElementById("label-server-response").style.visibility = "visible";

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

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