Skip to content

Instantly share code, notes, and snippets.

@mtvbrianking

mtvbrianking/form-submission.php

Last active March 25, 2023 10:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mtvbrianking/d9ed8c157ba60b0a3b9a42f3f5a1364a to your computer and use it in GitHub Desktop.
Save mtvbrianking/d9ed8c157ba60b0a3b9a42f3f5a1364a to your computer and use it in GitHub Desktop.
Download ZIP
PHP JS form submission using multipe actions
Raw
form-submission.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Submission</title>
<style>
.form-group {
padding: 5px;
margin: 5px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input {
padding: 7px;
border: 1px solid;
border-radius: 5px;
width: 300px;
}
.form-group input:focus {
outline: 1px solid;
}
.form-group button {
padding: 5px;
}
</style>
</head>
<body>
<?php
if ($params = $_POST) {
var_dump($params);
die();
}
if ($_POST['_action'] == 'save') {
// save configurations...
}
if ($_POST['_action'] == 'test') {
// test connectivity...
}
?>
<h3>Remote API</h3>
<form id="configurations" method="POST" action="">
<div class="form-group">
<label for="client-id">Client ID</label>
<input type="text" id="client-id" name="client_id" value="b2f329ac-a8f3-425a-ad8f-a5714ecd0659" required>
</div>
<div class="form-group">
<label for="client-secret">Client Secret</label>
<input type="text" id="client-secret" name="client_secret" value="34c636e193fe4c2e8f8d2154060eb2d5" required>
</div>
<div id="php-submit" class="form-group">
<button type="submit" name="_action" value="save">PHP - SAVE</button>
<button type="submit" name="_action" value="test">PHP - TEST</button>
</div>
</form>
<script>
(function() {
let form = document.getElementById("configurations");
// ...
})();
</script>
</body>
</html>
@mtvbrianking
Copy link
Author

Approach #2 "js-submit" listening for the form submission event

<div id="js-submit" class="form-group">
    <input type="hidden" id="_action" name="_action" value="">
    <button type="submit" value="save">JS Submit - Save</button>
    <button type="submit" value="test">JS Submit - TEST</button>
</div>
(function() {
    let form = document.getElementById("configurations");

    form.addEventListener("submit", function(event) {
        event.preventDefault();

        if (!form.reportValidity()) {
        return false;
        }

        document.getElementById("_action").value = event.submitter.value;

        form.submit();
    });
})();

@mtvbrianking
Copy link
Author

Approach #3 "js-click-submit" using buttons and listening for click events

<div id="js-click-submit" class="form-group">
    <input type="hidden" id="_action" name="_action" value="">
    <button type="button" id="btn-save">JS Click - SAVE</button>
    <button type="button" id="btn-test">JS Click - TEST</button>
</div>
(function() {
    let form = document.getElementById("configurations");

    document.getElementById("btn-save").onclick = function(event) {
        if (!form.reportValidity()) {
            return false;
        }

        document.getElementById("_action").value = "save";

        form.submit();
    }

    document.getElementById("btn-test").onclick = function(event) {
        if (!form.reportValidity()) {
            return false;
        }

        document.getElementById("_action").value = "test";

        form.submit();
    }
})();

@mtvbrianking
Copy link
Author

Testing

php -S localhost form-submission.php

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment