DEV Community

Cover image for How To Submit Multiple Checkbox Value to PHP using jQuery & Ajax
Code And Deploy
Code And Deploy

Posted on


How To Submit Multiple Checkbox Value to PHP using jQuery & Ajax

Originally posted @ visit and download the sample code:

In this post, I will show to you an example on how to submit multiple checkbox value to PHP using jQuery and ajax. In my previous post I posted about on how to loop the checked checkbox value in jquery. Now we will send it to the server-side so that the PHP can read it and process to MySQL database.

Sample Output

Here is the sample output of this function.


HTML, CSS, and Javascript Code

Here is the complete HTML, CSS and Javascript code:

<!DOCTYPE html>
    <meta charset="utf-8">
    <title>Loop Checkbox Value in jQuery</title>

    <style type="text/css">
        .result-wrapper {
            display: none;
    <form id="form" action="server.php">
        <label>What animals you have at home?</label>

            <input type="checkbox" name="animals[]" value="Dog"> Dog
            <input type="checkbox" name="animals[]" value="Cat"> Cat
            <input type="checkbox" name="animals[]" value="Pig"> Pig
        <button type="button" id="submit">Submit</button>


  <script type="text/javascript">
    $(document).ready(function() {

        $("#submit").on("click", function() {
            var $this           = $(this); //submit button selector using ID
            var $caption        = $this.html();// We store the html content of the submit button
            var form            = "#form"; //defined the #form ID
            var formData        = $(form).serializeArray(); //serialize the form into array
            var route           = $(form).attr('action'); //get the route using attribute action

            // Ajax config
                type: "POST", //we are using POST method to submit the data to the server side
                url: route, // get the route value
                data: formData, // our serialized array data for server side
                beforeSend: function () {//We add this before send to disable the button once we submit it so that we prevent the multiple click
                    $this.attr('disabled', true).html("Processing...");
                success: function (response) {//once the request successfully process to the server side it will return result here
                    // do something here after successfully submitted
                complete: function() {
                    $this.attr('disabled', false).html($caption);
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    // You can put something here if there is an error from submitted request

Enter fullscreen mode Exit fullscreen mode

PHP Code

Here is the PHP code to catch the submitted form via ajax. Filename: server.php. Which I call it in previous code in form attribute action="server.php".


    $request = $_REQUEST;


Enter fullscreen mode Exit fullscreen mode

Now you have the complete code on how to do it. Now its your time to test it to your end.

Below are the sample file naming of this code.


I hope this tutorial can help you. Kindly visit here if you want to download this code.

Happy coding :)

Top comments (0)

11 Tips That Make You a Better Typescript Programmer


1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!