AJAX call not sending data through

Question

I am created a form that has a SELECT drop-down that I can SELECT a user and then their current division I have in my database outputs. This works great. However, I am trying to add/create a new script that I can UPDATE the current division that user is in, but I am not getting it to work correctly.

            <label>Current Division
                <input type="text" id="current_division">
            </label>
            <form name="update_group_form" action="" type="POST">   
                <select name="division_name">
                    <option value="1">East</option>
                    <option value="2">West</option>
                </select>
                <input type="submit" value="submit" name="division_update_button">
            </form>

My AJAX call #1

I am getting an error for the + next to user in the data.

$(document).ready(function(){ 
        $("#update_group_form").on("change", function(){
            $user = this.value;
            $.ajax({ 
                url: "update_division.php", 
                type: "POST",
                data: {
                "username="+$user,
                //console.log($user);
                division_name: $(this).find('select[name="group_id"]').val()
                },
                success: function(text){ 
                     alert(data);
            },
             error: function(jqXHR, textStatus,errorThrown )
            {
              // alert on an http error 
              alert( textStatus +  errorThrown );
            }
        });
        return false;
    });
});

This is the AJAX call #2 of how I get the current division of the user I select. It works perfectly and I do not get an error for the + next to user...

$(document).ready(function(){ 
            $("#member_division").on("change", function(){
                $user = this.value;
                $.ajax({ 
                    url: "show_division.php", 
                    type: "POST",
                    data: "username="+$user, 
                    success: function(text){ 
                        if(text == "Error!"){ 
                            alert("Unable to get user info!"); 
                        } else { 
                            var txtArr = text.split('|');
                            //0: Contains current division
                            //1: Contains losses
                            $("#current_division").val(txtArr[0]);
                            //$("#losses").val(txtArr[1]);
                        } 
                    }, 
                    error: function(xhr, textStatus, errorThrown){ 
                        alert(textStatus + "|" + errorThrown); 
                    } 
                });
            });
        });

Posting my PHP file in case this will help anyone..

$update_division = $_POST['division_name'];


$con = mysqli_connect("localhost","","","");
    /* check connection */
    if (mysqli_connect_errno()) {
        printf("Connect failed: %s\n", mysqli_connect_error());
        exit();
    }
    $stmt = $con->prepare("UPDATE division FROM team_rankings WHERE username = :user");
    if ( !$stmt || $con->error ) {
     // Check Errors for prepare
        die('User Group update prepare() failed: ' . htmlspecialchars($con->error));
    }
    if(!$stmt->bind_param('i', $update_division)) {
    // Check errors for binding parameters
        die('User Group update bind_param() failed: ' . htmlspecialchars($stmt->error));
    }
    if(!$stmt->execute()) {
        die('User Group update execute() failed: ' . htmlspecialchars($stmt->error));
    }
?>

What is wrong with my AJAX call #1

Answer 1

Data is an object here, so to add username you should make the data to look like

data: {
username: $user,
division_name: $(this).find('select[name="group_id"]').val()
}

Also, probably you need to add id to the form, because for now you don't have id #update_group_form only name.

Answer 2

because in your first ajax you are trying to alert data but you are passing text

if you endpoint is correct you should have:

$(document).ready(function(){ 
        $("#update_group_form").on("change", function(){
            $user = this.value;
            $.ajax({ 
                url: "update_division.php", 
                type: "POST",
                data: {
                "username="+$user,
                //console.log($user);
                division_name: $(this).find('select[name="group_id"]').val()
                },
                success: function(data){ 
                     alert(data);
            },
             error: function(jqXHR, textStatus,errorThrown )
            {
              // alert on an http error 
              alert( textStatus +  errorThrown );
            }
        });
        return false;
    });
});