How to Send Text and Image File Data at The Same Time to MySQL Database Without Refreshing The Page

I don’t know how to send text, checkbox, radio data and also image file at the same time using ajax jquery post (in order not to refresh the page).

Here are the codes I have.

index.php

<form action="save.php" method="POST">
    Your Name : <input type="text" name="username" id="username">

    <BR>

    Your Sex : 

    <input type="radio" class="get_gender" name="gender" id="genderM" value="Male">Male
    <input type="radio" class="get_gender" name="gender" id="genderF" value="Female">Female

    <BR>

    Your Hobbies : 

    <input type="checkbox" class="get_hobby" name="basket" id="basket" value="Basketball">Basketball
    <input type="checkbox" class="get_hobby" name="foot" id="foot" value="Football">Football
    <input type="checkbox" class="get_hobby" name="volley" id="volley" value="Volleyball">Volleyball

    <BR>

    Your Grade : 

    <select name="grade" id="grade">
        <option value="1>1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>

    <BR>

    Upload Photo : <input type="file" name="image" id="image">

    <BR>

    <input type="button" name="save" id="save" value="Save" onclick="save()">
</form>

save.php

<?php
include "connection.php";

$usename = $_POST['username'];
$gender = $_POST['gender'];
$hobby = $_POST['hobby'];
$grade = $_POST['grade'];
$photo = $_FILES['image']['name'];

$sql = "insert into user
(username, gender, hobby, grade, photo)
values('$username','$gender','$hobby','$grade','$photo')";
$query = mysqli_query($con,$sql);

header("location: index.php");
?>

index.js

function save(){

    var username = document.getElementById("username").value;
    var grade = document.getElementById("grade").value;

    var hobby = [];
    $('.get_hobby').each(function(){
        if($(this).is(":checked"))
        {
            hobby.push($(this).val());
        }
    });
    hobby = hobby.toString();

    var gender = [];
    $('.get_gender').each(function(){
        if($(this).is(":checked"))
        {
            gender.push($(this).val());
        }
    });
    gender = gender.toString();


    $.ajax({
        type: "POST",
        url: 'save.php',
        data: {
            username: username,
            hobby: hobby,
            hobby: hobby,
            grade: grade
        },
        success: function(result){
        }
    });
}

Please help

Answer

You can simplify your save function – and send both form data and an image at the same time by using a FormData object:

function save_data() {
    var formData = new FormData($('#userform')[0]);
    $.ajax({
        url: '/test13.php',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function (response) {
            alert(response);
        }
    });
}

Note you need a couple of other changes. The form needs an id attribute e.g.

<form id="userform">

You should change the name attributes of the hobbies to hobby[] i.e.

<input type="checkbox" class="get_hobby" name="hobby[]" id="basket" value="Basketball">Basketball
<input type="checkbox" class="get_hobby" name="hobby[]" id="foot" value="Football">Football
<input type="checkbox" class="get_hobby" name="hobby[]" id="volley" value="Volleyball">Volleyball

And you need to add

processData: false,
contentType: false,

To your ajax object.

In your PHP code, you would need to assemble $hobby from the raw form values:

$hobby = implode(',', $_POST['hobby']);

and you should include a check for $_POST['gender'] being set:

$gender = $_POST['gender'] ?? '';

I needed to change the name of your function as save was causing conflicts. I renamed it to save_data. You may not find this is an issue.