JavaScript, Ajax Form Submit - ошибка первого элемента

Question

Я знаю, что этот базовый предмет много раз обсуждался, и я использовал код, который был опубликован здесь, в моем собственном приложении.Однако я столкнулся с ошибкой, которую просто не могу исправить, и это сводит меня с ума.У меня есть форма с двумя скрытыми элементами управления (которые не были проблемой в других формах), файловый элемент управления, некоторые стандартные элементы управления вводом и текстовое поле ... (пример формы приведен ниже).Когда я пытаюсь отправить его с помощью JavaScript (и Ajax), я получаю сообщение об ошибке, которое не могу устранить:

TypeError: Аргумент 1 из FormData.constructor не реализует интерфейс HTMLFormElement.

Форма:

<form class='form form-horizontal' method='post' action='' name='attachment_form' id='attachment_form'>
  <input value=1 name='event_link3' id='event_link3' hidden />
  <input value=9683 name='contributor_link3' id='contributor_link3' hidden />
  <div class='row'>
     <!-- file upload option -->
     <div class='col-lg-5 col-11'>
        <div class='form-group file-upload'>
           <label>Select File to Upload:</label><br />
           <input type='file' class='form-control' id='attachment_file' 
                                    name='attachment_file' accept='.pdf, .mp4, .mov, .avi, .f4v' 
                                    data-toggle='tooltip' data-placement='bottom'
                                    title='File to be uploaded should be &#39;standard&#39; video or pdf format'
                             />
        </div> <!-- / form-group -->
     </div> <!-- // col-5 -->
     <div class='col-1'>            <a name='attachment_clear'
                             onclick='attachment_clear()'
                             class='btn btn-primary btn-md clearButton'
                             data-toggle='tooltip' data-placement='bottom' title='Clear Selection'
                             style='margin-left: -12px !important; margin-top: 40px !important;'>
                             <i class='fa fa-trash' aria-hidden='true'></i></a>
     </div> <!-- // col-1 -->
     <div class='col-lg-6 col-12'>
        <label>Web Link/URL:</label><br />
        <input type='url' class='form-control'
                                 id='web_url' name='web_url' 
                                 data-toggle='tooltip' data-placement='bottom'
                                 title='Web address must include http:// or https:// to be valid'
                          />
     </div> <!-- // col-6 -->
  </div> <!-- // row -->
  <div class='row'>
     <div class='col-lg-6 col-12'>
        <label>Short Description:</label>
        <input class='form-control' name='short_description' id='short_description'
                                 data-toggle='tooltip' data-placement='bottom'
                                 title='A short description of the file (displayed for link)' required/>
     <p class='help-block'><b>Short Description is Required</b> -- the text will be used
                       to display as text for the file link.</p>
     </div> <!-- // col-6-->
     <div class='col-lg-6 col-12'>
        <label>File Description:</label>
        <textarea class='form-control' name='description' id='description' rows=5 required></textarea>
        <p class='help-block'><b>Description is Required</b> -- Describe the file or link in as much
                          detail as you need ... you can also format this to some extent (see toolbar)</p>
     </div> <!-- // col-12-->
  </div> <!-- // row -->
  <button id='attachment_submit' name='attachment_submit' class='btn btn-primary' style='margin-top: 10px;'><i class='fa fa-upload'></i>&nbsp;Upload Attachment</button>
</form>

Код Javascript для работы с формой основан на коде, который я извлек здесь на StackOverflow, и успешно работает в других местах.Я не могу понять, что отличается или что-то не так с этим ...

$("#attachment_form").submit(function(e)
  {
     e.preventDefault();

     // first thing, clear out the message div used for this (if there's anything there):
     document.getElementById("attachment_message").innerHTML = "";

     // validation:
     var filename_check = document.getElementById( "attachment_file" ).value;
     var web_url_check  = document.getElementById( "web_url" ).value;
     if ( filename_check == "" && web_url_check == "" )
     {
        alert( "You must either select a file to upload or enter a web address ..." );
        return;
     }
     // on the flip side:
     if ( filename_check != "" && web_url_check != "" )
     {
        alert( "You must either select a either file to upload or a web address, not both ..." );
        return;
     }

     // get value from TinyMCE
     var description  = tinymce.get('description').getContent();
     // make sure it's in the textarea by the same name
     document.getElementById( "description" ).value = description;


     // this has always worked in the past, but having issues:
     var formData = new FormData(this);
 // this is where the error occurs when I open the web console of my browser

Я надеюсь, что кто-то имеет опыт работы с этим и может сказать мне, в чем заключается ошибка, так как я полностью озадачен на данный момент.(Я проверил «this.id» в предупреждении, чтобы убедиться, что я использую правильную форму ...)

Answer 1

Хорошо, я нашел свою проблему (благодаря предложению посмотреть журнал вывода Art3mix выше) .Проблема заключалась в том, что у меня был тег div, который был также , называемый «attachment_form» (у меня есть разборный (bootstrap 4) div, который открывается кнопкой, и я даже не думал об этомчто я назвал форму так же, как div).Изменяя это (и ссылки на него) на «attachment_window» вместо этого, это решает все это.Вот это да.Спасибо за предложение посмотреть журнал вывода консоли.Я редко, если вообще смотрю на это.

Answer 2

Возможно, вызов FormData ожидает элемент DOM, а не элемент jQuery.Попробуйте передать this [0] или this.get (), чтобы получить элемент Html формы.