Mastering Form Submission: Detect Which Submit Button Is Clicked

In the dynamic world of web development, forms play a crucial role in user interaction. One common challenge developers face is to detect which submit button is clicked when a form is submitted. In this guide, we’ll explore the techniques to detect it. Get ready to unravel the mystery of clicked submit buttons with easy-to-follow steps and explanations.

Understanding the Need for Button Detection in Forms

Before diving into the technical aspects, let’s grasp why it’s essential to determine which submit button a user clicked. This knowledge sets the stage for a more informed approach to handling form submissions. In the next section, we will see the implementation on how to detect which submit button is clicked when a form is submitted.

Implementation: Detect which submit button is clicked

We may have a case when we have multiple submit buttons and we want to detect which button is clicked. In this article, we will see how to detect which submit button is clicked when a form is submitted using PHP language.

isset() — Determine if a variable is declared and is different than null

php.net

The PHP isset() function is used to check whether a variable is set or not. The isset() function returns a boolean (true or false). So, we can detect which submit button is clicked using the PHP isset() function.

When a submit button is clicked via the mouse button or keyboard’s enter button, the browser sends the name and value of the button safely when the POST method is used.

Let’s assign a unique name to each submit button, if you use the same names then you will get invalid results.

HTML form

The HTML form is:

<input type="submit" name="button_reset" value="Reset" />
<input type="submit" name="button_save" value="Save" />
<input type="submit" name="button_delete" value="Delete" />

PHP Script

Now that we have assigned unique names to each input now we need to write some PHP code.

The PHP code would look like this:

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['button_reset'])) {
        // reset button is clicked
    } 
    else if (isset($_POST['button_save'])) {
        // save button is clicked
    } 
    else if (isset($_POST['button_delete'])) {
       // delete button is clicked
    } 
    else {
        // display error e.g. invalid form submission or access denied
    }
}
?>

The “else” part will handle the requests that are not coming from the form. It is highly recommended to apply security and sanitization on forms to prevent attackers. The good practice is to always have an else part for each “if” statement to handle the exceptions.

When an invalid request is sent through the form, the form controller should handle the error. In this way you can apply one-level security on your form which will accept only the actual request and invalid requests will be discarded.

The JavaScript implementation

For those favoring a more concise and elegant solution, we’ll also look into the jQuery solution. jQuery is the most polular JavaScript library. We’ll see how jQuery can be used to detect which submit button is clicked.

Incorporating jQuery Library

Include the jQuery library in your project to leverage its powerful features effortlessly.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Streamlined jQuery Code for Button Detection

Explore a concise jQuery snippet that achieves the same result as our basic JavaScript function.

$(document).ready(function () {
    $('form').submit(function () {
        const clickedButton = $('button[type="submit"]:focus');
        // Utilize 'clickedButton' to gather information about the clicked button
    });
});

Note

Always consider cross-browser compatibility and adhere to best practices when incorporating JavaScript or jQuery in your projects.

Testing and Implementation: Ensuring Seamless Integration

Before deploying these techniques in your live projects, thorough testing is crucial. We’ll guide you through the testing process, ensuring that button detection seamlessly integrates with your forms.

Conclusion: Empowering Form Interactivity

You’ve mastered the art for detect which submit button is clicked in forms when form is submitted. This knowledge opens the door to personalized form interactions, providing a more intuitive and responsive user experience. Feel free to explore additional features and enhancements based on your project’s requirements.

By incorporating button detection techniques, you’re not just handling form submissions; you’re creating forms that understand and respond to user input in a more tailored manner.

See how to apply CSRF in the PHP application.