javascript – Bootstrap modal and jQuery: form inputs are empty

I’m using form inside a modal window in my application which uses Bootstrap.
Form looks like this:

<div class="modal fade" id="my_modal">
    <div class="modal-dialog modal-lg">
        <div class="form-group">
            <form class="form-horizontal" id="my_form">
                <div class="form-group">
                    <div class="col-sm-10">
                        <input type="file" name="file" id="my_file">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-10">
                        <input type="text" name="my_text" id="my_text" class="form-control select-resource-form-control">
                    </div>
                </div>
                <button id="my_button" type="button" class="btn btn-primary btn-send">Send</button>
            </form>
        </div>
    </div>
</div>

When I’m trying to send form data of this form, both file and text fields are empty at the recieveing part, and following commands in console also confirm that the form is empty:

when I use modal fade

If I replace the modal fade attribute in the root tag,for example, with modal-body, everything works just fine, but I need a modal window for my purposes, which shows up, sends the response and closes.
when I use modal-body

Would appreciate any ideas/workarounds about this

UPDATE:
ajax for the query is:

let form = $("#my_form").get(0);
$.ajax({
        url: "some/url/Im/sending/data/to",
        method: "POST",
        data: new FormData(form),
        cache: false,
        contentType: false,
        processData: false,
    }
}

<div class="modal fade" ...
   <div class="modal-dialog" ...
      <div class="modal-content">
          <div class="modal-body">
              your form

Answer：

Tags: input, java, javascriptjavascript, jquery