My AJAX request is not retrieving the value from my select element in my form

I tried to retrieve my select html element like this because i need the owner_id from people :

// Call Store Method

    $("body").on("submit", "form", function (e) {
        e.preventDefault();
        if ($(this).hasClass("update")) {
            return update($(this));
        }
        return store($(this));
    });

// Store Method
function store($form) {
    let data = {
        name: $form.find('input[name="name"]').val(),
        chip_number: $form.find('input[name="chip_number"]').val(),
        sexe: $form.find('input[name="sexe"]').val(),
        is_sterilize: $form.find('input[name="is_sterilize"]').val(),
        birthday: $form.find('input[name="birthday"]').val(),
        owner_id: $form.find('select[name="owner_id"]').val(),
    };

    $.post("/animals", { data: data })
        .done(function (result) {
            $(".content").html(result);
        })
        .fail(function (err) {
            console.warn("error in store", err);
        });
}

Here's my form:

<form action="/" method="post" class="store">
    <input required type="text" name="name" placeholder="Nom">
    <input required type="text" name="chip_number" placeholder="Numéro de puce">
    <input required type="text" name="sexe" placeholder="Sexe">
    <input required type="text" name="is_sterilize" placeholder="Est-il stérilisé">
    <input required type="date" name="birthday" placeholder="Date de naissance">

    <label for="owner_id">Propriétaire:</label>
    <select required id="owner_id" name="owner_id" placeholder="Propriétaire">
        <?php foreach ($owners as $owner) : ?>
            <option value="<?= $owner->id ?>"><?= $owner->firstname . " " . $owner->lastname ?></option>
        <?php endforeach; ?>
    </select>

    <button class="create">Enregistrer</button>
</form>

When I go to the network on my browser, I have this result:

data[name]    "dqsdq"
data[chip_number]    "qsdqs"
data[sexe]    "sdqsd"
data[is_sterilize]    "dqsdq"
data[birthday]    "2023-06-21"

My owner_id is not there; I can't resolve it.

What I tried?

Replace select by an input:

let data = {
    owner_id: $form.find('input[name="owner_id"]').val(),
}

<form action="/" method="post" class="store">
    <input required type="text" name="owner_id" placeholder="Proprietaire">
    <button class="create">Enregistrer</button>
</form>

I don't know why, but this way is working...

Via Active questions tagged javascript - Stack Overflow https://ift.tt/v3fiK9q