Two submit buttons in one form

Server-side inspection (talking in a secret language with your server)

In the server-side script (like handler.php), you'll verify the submitAction. The value will unravel whether the user's intention was to "save" or "publish":

if ($_POST['submitAction'] == 'save') {
  // Act like a squirrel storing acorns, save the form data
} elseif ($_POST['submitAction'] == 'publish') {
  // Time to release the pigeons, let's publish the data
}


This method reduces dependence on button text, ensuring reliability despite label changes.

Decision points and options (pick a tool from the toolbox)

Redirecting button actions with formaction

If each submit button has to initiate a unique action processed by different server-side scripts, employ the formaction attribute:

<button type="submit" formaction="save.php">Save (grab your helmet)</button>
<button type="submit" formaction="publish.php">Publish (get ready to fly)</button>


This sends the form data to the specified URL, effectively separating the actions with no further need for server-side identification.

The <button> vs <input> duel

<button> tags are versatile and customizable, but <input type="submit"> can yield similar results:

<input type="submit" name="submitAction" value="save" />
<input type="submit" name="submitAction" value="publish" />


Choose based on your UI needs and browser compatibility requirements. It's like choosing between a chocolate cake 🍰 and a cheesecake 🧀!

Code that travels through time (supporting older browsers)

In case your audience uses vintage browsers that might not support formaction, consider adding a JavaScript fallback:

document.getElementById('publishButton').addEventListener('click', function() {
  // 🚀 Launching to publish.php
  this.form.action = 'publish.php';
});


Traps to avoid (watch your step!)

The intricacies of the GET method

In the event of form submission via the GET method, the input names and values are appended to the URL. It’s like leaving crumbs for Hansel and Gretel:

<form method="get">
  <input type="submit" name="submitAction" value="save" />
  <button type="submit" name="submitAction" value="publish">Let's publish!</button>
</form>


After submission, the URL may appear as: http://example.com/form?submitAction=publish

Backend safety nets

Regardless of button naming, ensure your server-side scripts can handle missing submitAction values. It's like an emergency parachute:

if (isset($_POST['submitAction'])) {
  // We know what to do! Proceed with the action
} else {
  // Safety measures, default action or error message
}


Go-to pointers for a smooth ride

Button names that tell a story

While naming submit buttons, steer clear of ambiguous terms. Pick descriptive names to aid in code readability and future maintenance:

<button type="submit" name="saveButton">Save like there's no tomorrow</button>
<button type="submit" name="publishButton">Publish like a proud author</button>


Guiding users casually

Inside the <button> tag, place useful text. Serve some direction to users and enhance their interaction:

<button type="submit" name="action" value="save">Save your work (it'll be safe, promise!)</button>
<button type="submit" name="action" value="delete" style="color: red;">Delete your work (are you sure?)</button>


Form methods with top hats and bowties

Consider the method of form submission (GET or POST) in relation to security and data size. GET exposes data in the URL, while POST sends it stealthily and is the better pick for sensitive or huge data.