Как получить форму для создания объекта FormData () без использования идентификатора в качестве селектора - PullRequest
Новая
       12

Как получить форму для создания объекта FormData () без использования идентификатора в качестве селектора

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

Я пытаюсь получить форму, которая находится внутри div "modal-body", и создать объект FormData (), когда пользователь нажимает модальную кнопку. По особым причинам я не могу получить эту форму по идентификатору или классу, поэтому я делаю это так: 

$('.save-form').click(function() {
    var myform = $(this).parent().parent().find('.modal-body').html();
    var fd = new FormData(myform);
}

Используя. html () или .contents (), я получаю ошибку : " Не удалось создать 'FormData': параметр 1 не относится к типу 'HTMLFormElement' ".

Это работает нормально, если я использую идентификатор в качестве селектора, но, как я уже сказал, я не могу получить его по id. Видимо, FormData () не нравится то, что я передаю ему. Итак, мой вопрос: мне нужно получить форму другим способом или мне нужно сделать преобразование или что-то сначала? Я буду признателен за любую помощь.

Это мой html: 

<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">My Title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="modal-body">
                    <form>
                        <input type="checkbox" name="item-1">
                        <label>Item 1</label>
                        <input type="checkbox" name="item-2">
                        <label>Item 2</label>
                        <input type="checkbox" name="item-3">
                        <label>Item 3</label>
                        <input type="checkbox" name="item-4">
                        <label>Item 4</label>
                    </form>            
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary save-form">Save</button>
            </div>
        </div>
    </div>
</div>

1 Ответ

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

Вам нужно использовать обычный JavaScript или отменить ссылку на объект jQuery при ссылке на тег <form>. Объект FormData () не распознает jQuery Объекты. Должно работать любое из следующего:

Отмена ссылки jQuery Объект 

$('form')[0];
$('form').get(0);

Обычный JavaScript

document.forms[0];
document.querySelector('form');
document.getElementsByTagName('form')[0];

Все вышеперечисленное получит первый тег <form> на веб-странице без каких-либо атрибутов.

Демо 

$('.save-form').click(function() {
  const form = $('form')[0];
  const fd = new FormData(form);
  console.log(fd);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#xModal">
  Modal
</button>

<div id="xModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">My Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
      </div>
      <div class="modal-body">
        <div class="modal-body">
          <form>
            <input type="checkbox" name="item-1">
            <label>Item 1</label>
            <input type="checkbox" name="item-2">
            <label>Item 2</label>
            <input type="checkbox" name="item-3">
            <label>Item 3</label>
            <input type="checkbox" name="item-4">
            <label>Item 4</label>
          </form>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary save-form">Save</button>
      </div>
    </div>
  </div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
...