Pass select option in bootstrap 5 modal ajax

Question

I have a bootstrap 5 modal box to load a from in ajax mode. This is my code:

<div class="modal" data-bs-backdrop="false" id="add_category">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="fetch-data"></div>
        </div>
    </div>
    <script>
        $(document).ready(function(){
            $("#add_category").on("show.bs.modal", function (e) {
                $.ajax({type:"post",url:"mysite.com/wizard.php",data:"add_category",success:function(data){$(".fetch-data").html(data);}});
            });
        });
    </script>

and this is wizard.php:

<?php

function wizard_content() {
    
    $wizard_content = '
        <div class="modal-content">
            <div class="modal-header"><h4 class="modal-title">TITLE</h4><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
                <div class="modal-body">
                    <div class="mb-3">
                        <form id="category_add" class="category_add" method="post" action="'.htmlspecialchars($_SERVER["PHP_SELF"]).'">
                            <label for="category_title" class="form-label">Category Title</label>
                            <input type="text" name="title" id="category_title" class="form-control" value="" placeholder="">
                            <label for="menu">Menu:</label>
                            <select name="menu" id="menu" class="form-select form-select-lg mb-3" form="category_add">
                                <option value="none">No Menu</option>
                                <option value="Menu1">Menu1</option>
                                <option value="Menu2">Menu2</option>
                            </select>
                            <input class="addsubmit btn btn-success btn-sm" type="submit" value="Create">
                        </form>
                    </div>
                </div>
        </div>
    ';
    
    return $wizard_content;
}
?>

Everything is ok in my code and form work, all input field are send currect data but select options are null.

What is my mistake? Thank you

Answer 1

I solved the problem by changing this line:

<select name="menu" id="menu" class="form-select form-select-lg mb-3" form="category_add">

to this line:

<select name="menu" id="menu" class="form-select form-select-lg mb-3">

because in ajax mode, my code can't identify the form name. Is this solution ok?