Code
html
<form id="form_one">
<fieldset>
<legend>Audio Settings</legend>
<div>
<input
type="range"
id="volume"
name="param1"
min="0"
max="100" />
<label for="volume">Volume</label>
<output id="out-volume"></output>
</div>
<div>
<input
type="range"
id="cowbell"
name="param2"
min="0"
max="100"
value="90"
step="10" />
<label for="cowbell">Cowbell</label>
<output id="out-cowbell"></output>
</div>
<input type="submit" value="submit">
</fieldset>
<fieldset>
<legend>Server Output</legend>
<div><output id="server-out-volume"></output></div>
<div><output id="server-out-cowbell"></output></div>
</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();
console.log(result);
let responseArray = result.split('&');
document.getElementById('server-out-volume').value = responseArray[0];
document.getElementById('server-out-cowbell').value = responseArray[1];
} catch (e) {
console.error(e);
}
}
document.getElementById('form_one').addEventListener('submit', function (event) {
event.preventDefault();
sendData();
});
document.getElementById('out-volume').value = document.getElementById('volume').value
document.getElementById('out-cowbell').value = document.getElementById('cowbell').value
document.getElementById('volume').addEventListener('input', function () {
document.getElementById('out-volume').value = this.value;
})
document.getElementById('cowbell').addEventListener('input', function () {
document.getElementById('out-cowbell').value = this.value;
})
php (server)
// index.php (server)
<?php
echo
htmlspecialchars($_POST["param1"])."&"
.htmlspecialchars($_POST["param2"])."&"
.htmlspecialchars($_SERVER['HTTP_HOST']);
?>
