Bootstrap модально и jQuery: входные данные формы пусты - PullRequest
Новая
       7

Bootstrap модально и jQuery: входные данные формы пусты

0 голосов
/ 20 февраля 2020

Я использую форму внутри модального окна в моем приложении, которое использует Bootstrap. Форма выглядит следующим образом: 

<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>

Когда я пытаюсь отправить данные формы этой формы, и поле файла, и текстовое поле остаются пустыми в принимающей части, и следующие команды в консоли также подтверждают, что форма пусто:

когда я использую модальное затухание

Если заменить тег modal fade в теге root, например, на modal-body, все работает просто отлично, но мне нужно модальное окно для моих целей, которое отображается, отправляет ответ и закрывается. когда я использую модальное тело

Буду признателен за любые идеи / обходные пути по этому поводу

ОБНОВЛЕНИЕ: ajax для запроса: 

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,
    }
}

Ответы [ 2 ]

1 голос
/ 20 февраля 2020

Во-первых, похоже, что в структуре вашего модала отсутствуют некоторые элементы. Это должно выглядеть примерно так: 

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

Кроме того, я считаю, что form-group должны быть только внутри form с.

0 голосов
/ 20 февраля 2020

Проблема была решена. Когда модальное окно было создано, страница также создала второе окно с классом in. Поэтому я изменил селектор для окна на следующее, и все заработало "#my_modal.in #my_form"

...