JSFiddle - React, Tailwind, and code Playground

by BenjaminRay

HTML

<form class="loginForm" action="/to/this/script.php">
    <input class="username" type="text" name="username" />
    <input class="password" type="text" name="password" />
    <input class="grouptype" id="grouptype" name="grouptype[]" type="checkbox" value="1" />
    <input class="grouptype" id="grouptype" name="grouptype[]" type="checkbox" value="2" />
    <input class="grouptype" id="grouptype" name="grouptype[]" type="checkbox" value="3" />
    <input class="grouptype" id="grouptype" name="grouptype[]" type="checkbox" value="4" />
    <input class="grouptype" id="grouptype" name="grouptype[]" type="checkbox" value="5" />
    <input class="grouptype" id="grouptype" name="grouptype[]" type="checkbox" value="6" />
    <input class="submitthis" type="submit" name="submit" value="Delete" />
    <input class="submitthis" type="submit" name="submit" value="Edit" />
</form>
<form class="loginForm" action="/to/this/script.php">
    <input class="username" type="text" name="username" />
    <input class="password" type="text" name="password" />
    <input class="grouptype" id="grouptype" name="grouptype[]" type="checkbox" value="1" />
    <input class="grouptype" id="grouptype" name="grouptype[]" type="checkbox" value="2" />
    <input class="grouptype" id="grouptype" name="grouptype[]" type="checkbox" value="3" />
    <input class="grouptype" id="grouptype" name="grouptype[]" type="checkbox" value="4" />
    <input class="grouptype" id="grouptype" name="grouptype[]" type="checkbox" value="5" />
    <input class="grouptype" id="grouptype" name="grouptype[]" type="checkbox" value="6" />
    <input class="submitthis" type="submit" name="submit" value="Delete" />
    <input class="submitthis" type="submit" name="submit" value="Edit" />
</form>
<form class="loginForm" action="/to/this/script.php">
    <input class="username" type="text" name="username" />
    <input class="password" type="text" name="password" />
    <input class="grouptype" id="grouptype"...

JavaScript

$("form.loginForm").submit(function () {
        event.preventDefault();
        var username = $(this).find('.username').val();
        var password = $(this).find('.password').val();
        var grouptype = $(this).find('input[name="grouptype[]"]');

        // Build array of selected grouptype values
        var grouptypedata = [];
        grouptype.each(function (i) {
            if ($(this).is(':checked')) {
                grouptypedata.push($(this).val());
                console.log($(this).val() + ' selected'); // Debugging
            }
        });

        var submitthis = $(this).find('.submitthis').val();
        $.ajax({
            type: "POST",
            url: "../includes/editremoveuser.php?",
            data: ({
                username: username,
                password: password,
                grouptype: grouptypedata,
                submitthis: submitthis
            }),
            success: function (data) {
                $('div.alert1').fadeIn();
                $('div.alert1').html(data);
                $('div.alert1').delay(3000).fadeOut();
            }
        });
        return false;
    });