Home » Jquery » javascript – Bootstrap modal and jQuery: form inputs are empty

javascript – Bootstrap modal and jQuery: form inputs are empty

Posted by: admin February 24, 2020 Leave a comment

Questions:

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,
    }
}
How to&Answer:

Firstly, it appears that the structure of your modal is missing some items. It should look something like this:

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

Also, I believe form-group‘s are only supposed to be inside forms.

Answer:

The problem has been solved. When the modal window was instantiated, the page also instantiated a second one with class in. So I changed the selector for the window to the following and everything worked
"#my_modal.in #my_form"