Question

我正在尝试使用AJAX发布表单。但是每次发布时，我都会在控制台中看到Empty string passed to getElementById().。我不是JavaScript人士，但是此消息甚至无法调试问题所在。谁能帮助我理解这一点？

错误的来源来自util.js。错误对应的行是：

  try {
    return document[method](selector) ? validSelector : null
  } catch (err) {
    return null
  }

ID #contact-form是唯一的。实际上，我是网站上唯一的页面，我可以说这与我的声音音色一样独特。我不明白为什么这不是一个有效的选择器。

我的JQuery版本：3.2.1

引导程序版本：4

下面是我的代码。

表单HTML：

                <form id= "contact-form" action="" method="post" enctype="multipart/form-data">
            <div class="form-group mt-5">
              <div class="input-group input-group-alternative">
                <div class="input-group-prepend">
                  <span class="input-group-text"><i class="ni ni-user-run"></i></span>
                </div>
                <input class="form-control" name="name" id="name" placeholder="Your name" type="text" required>
              </div>
              <div class="help-block with-errors"></div>
            </div>
            <div class="form-group">
              <div class="input-group input-group-alternative">
                <div class="input-group-prepend">
                  <span class="input-group-text"><i class="ni ni-email-83"></i></span>
                </div>
                <input class="form-control" name="email" placeholder="Your email" type="email" required>
              </div>
              <div class="help-block with-errors"></div>
            </div>
            <div class="form-group">
              <div class="input-group input-group-alternative">
                <div class="input-group-prepend">
                  <span class="input-group-text"><i class="ni ni-chat-round"></i></span>
                </div>
                <input class="form-control" name="phone" placeholder="Your number" type="tel" required>
              </div>
              <div class="help-block with-errors"></div>
            </div>
            <div class="form-group">
                <div class="input-group input-group-alternative"">
                  <div class="custom-file">
                    <input type="file" class="custom-file-input" id="file-attachment">
                    <label class="custom-file-label" for="file-attachment">Choose file</label>
                  </div>
                </div>
            </div>
            <div class="form-group mb-4">
              <textarea class="form-control form-control-alternative" name="message" rows="4" cols="80" placeholder="Your message..." required></textarea>
            </div>
            <div>
              <input type="submit" name = "send" class="btn btn-default btn-round btn-block btn-lg" value="Send">
            <div id="mail-spinner" class="spinner-border m-5" role="status" style="display: none;">
              <span class="sr-only">Loading...</span>
            </div>
              <div id = "mail-status" class="messages"></div>
            </div>
          </form>

AJAX JS：

"use strict";
$(document).ready(function() {

// File Upload

$('input[type="file"]').change(function(e){
    var fileName = e.target.files[0].name;
    $('.custom-file-label').html(fileName);
});

// Form AJAX

$("#contact-form").on('submit', (function(e) {
    e.preventDefault();
    $('#mail-spinner').show();
    $.ajax({
        url: "handlers/send-mail.php",
        type: "POST",
        data: $(this).serialize(),
        contentType: false,
        cache: false,
        processData: false,
        success: function(data){
            $("#mail-status").html(data);
            $('#mail-spinner').hide();
        },
    });
}));
});

空字符串传递给getElementById（）-Bootstrap 4和AJAX

0 个答案: