Send HTML Checkbox Form Data through AJAX

Question

I have a HTML Form set up like this:

<form class="modal-content start-planning " id="ProfileStep2" name="ProfileStep2" method="POST">
                    <div class="planroll-nav">
                        <a href="#" class="prev" onclick="GoToStep('ProfileStep1')">Back</a>
                        <span>2 / 8</span>
                        <a href="#" class="next" onclick="GoToStep('ProfileStep3')">Skip</a>
                    </div>
                    <div class="planroll-imgbx" style="background-image:url(images/icon/pic2.png)"></div>
                    <div class="start-here-bx">
                        <div class="">
                            <div class="planroll-title">
                                <h3>Select up to 5 ideal Wedding Styles...</h3>
                            </div>
                            <input type="hidden" id="userid" name="userid" value="<? echo $user_id; ?>">
                            <ul class="select-list clearfix list-inline list-2">
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style1" name="style1" value="Traditional">
                                        <label class="custom-control-label" for="style1">Traditional</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style2" name="style2" value="Alternative">
                                        <label class="custom-control-label" for="style2">Alternative</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style3" name="style3" value="Festival">
                                        <label class="custom-control-label" for="style3">Festival</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style4" name="style4" value="Goth">
                                        <label class="custom-control-label" for="style4">Goth</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style5" name="style5" value="Urban">
                                        <label class="custom-control-label" for="style5">Urban</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style6" name="style6" value="DIY">
                                        <label class="custom-control-label" for="style6">DIY</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style7" name="style7" value="Rustic">
                                        <label class="custom-control-label" for="style7">Rustic</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style8" name="style8" value="Historical">
                                        <label class="custom-control-label" for="style8">Historical</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style9" name="style9" value="Religious">
                                        <label class="custom-control-label" for="style9">Religious</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style10" name="style10" value="Vintage">
                                        <label class="custom-control-label" for="style10">Vintage</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style11" name="style11" value="Elegant">
                                        <label class="custom-control-label" for="style11">Elegant</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style12" name="style12" value="Themed">
                                        <label class="custom-control-label" for="style12">Themed</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style13" name="style13" value="Vegan">
                                        <label class="custom-control-label" for="style13">Vegan</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style14" name="style14" value="Eco-Friendly">
                                        <label class="custom-control-label" for="style14">Eco-Friendly</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style15" name="style15" value="Musical">
                                        <label class="custom-control-label" for="style15">Musical</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style16" name="style16" value="Boho">
                                        <label class="custom-control-label" for="style16">Boho</label>
                                    </div>
                                </li>
                                <li>
                                    <div class="custom-control custom-checkbox checkbox-lg">
                                        <input type="checkbox" class="custom-control-input" id="style17" name="style17" value="Country">
                                        <label class="custom-control-label" for="style17">Country</label>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="modal-footer text-center">
                        <button type="submit" id="ProfileStep2" name="ProfileStep2" class="btn gradient" data-toggle="tooltip" data-placement="top" onclick="GoToStep('ProfileStep3')" title="Congrats! Even your names look great together.">Next Step</button>
                    </div>
                </form>

I am trying to pass the data through an AJAX script on Form Submit using the following script

$(document).ready(function(){
                $('#ProfileStep2').on('submit', function(e){
                    
                    //Stop the form from submitting itself to the server.
                    e.preventDefault();
                    var userid2 = $('#userid').val();
                    var style1 = $('#style1').val();
                    var style2 = $('#style2').val();
                    var style3 = $('#style3').val();
                    var style4 = $('#style4').val();
                    var style5 = $('#style5').val();
                    var style6 = $('#style6').val();
                    var style7 = $('#style7').val();
                    var style8 = $('#style8').val();
                    var style9 = $('#style9').val();
                    var style10 = $('#style10').val();
                    var style11 = $('#style11').val();
                    var style12 = $('#style12').val();
                    var style13 = $('#style13').val();
                    var style14 = $('#style14').val();
                    $.ajax({
                        type: "POST",
                        url: 'system/wedmanagerdata.php',
                        data: {userid2: userid2, style1: style1, style2: style2, style3: style3, style4: style4, style5: style5, style6: style6, style7: style7, style8: style8, style9: style9, style10: style10, style11: style11, style12: style12, style13: style13, style14: style14},
                        success: function(data){
                            alert(data);
                        }
                    });
                });
            });

And then on the PHP side, I am processing the data with a simple PHP script

$userid2 = false;
if(isset($_POST['userid2'])){
    $userid2 = $conn->real_escape_string($_POST['userid2']);
    $style1 = $conn->real_escape_string($_POST['style1']);
    $style2 = $conn->real_escape_string($_POST['style2']);

}

I had to try this way as I couldn't get the script working with the input as id="style[]" without the page refreshing or breaking the AJAX script. The issue is, the AJAX is sending constant on positions for the checkboxes, which means all variables are showing and not just the ones selected? If anybody has a better functional method which they can help me with that would be great?

Your getting the values of the checkboxes without checking if they're checked first. That's why you get all values and not just the checked ones. This might help https://stackoverflow.com/questions/9493531/send-multiple-checkbox-data-to-php-via-jquery-ajax — cOle2, Feb 22 '21 at 20:53
I've altered my code to reflect that like var style = new Array(); $("input:checked").each(function() { style.push($(this).val()); }); $.ajax({ type: "POST", url: 'system/wedmanagerdata.php', data: {userid2: userid2, style: style}, but still not getting anything through? — Snappysites, Feb 22 '21 at 21:11

score 0 · Accepted Answer · answered Feb 22 '21 at 21:37

You can simplify this a great deal.

Start by including all your style names in an array:

    $styles = ["Traditional","Alternative","Goth"];  // Add the others, and more


// Create the <ul> and <li> tags

echo '<ul class="select-list clearfix list-inline list-2" > ';

for ($i=0; $i<count($styles);$i++) {
    echo <<<EOT
       <li>
           <div class="custom-control custom-checkbox checkbox-lg">
           <input type="checkbox" class="custom-control-input" id="style{$i}" name="style[]" value="{$styles[$i]}">
           <label class="custom-control-label" for="style{$i}">$styles[$i]</label>
           </div>
       </li>
EOT;
}
echo "</ul>";

Now, in your AJAX call, use $.serialize to get the form data

    $(document).ready(function () {
        $('#ProfileStep2').on('submit', function (e) {

//Stop the form from submitting itself to the server.
            e.preventDefault();
            form_data = $(this).serialize();
            $.ajax({
                type: "POST",
                url: 'system/wedmanagerdata.php',
                data: form_data,
                success: function (data) {
                    alert(data);
                }
            });
        });
    });

In your wedmanagerdata.php script you should see your checked style names (and only the checked ones) in $_POST['style'].

Send HTML Checkbox Form Data through AJAX

1 Answers1