javascript - 为什么我的表单没有使用 jQuery .submit() 发布？

Question

我正在开发一个系统，允许用户将书籍添加到他们的图书馆。我正在使用 jquery UI 对话框，并使用此脚本的前半部分将大约 20 行插入到数据库中。

但是，正如我在后半部分突然添加的那样，帖子信息没有显示在发布的页面上，我完全不知道为什么。

这本应该是一个快速添加，但却变成了令人头痛的事情。

表格:

<form id="addbookform" action="../models/Books/addBook_submit.cfm" method="POST">
<div style="display: none;" id="addBook" title="Add a Book to Your Library">
    <input type="hidden" id="InputType" name="InputType" value="Add"/>
    <input type="hidden" id="bookempID" name="bookempID"/>

    <label class="labelstyle" >ISBN:</label>
    <input type="text" maxlength="17" id="ISBN" name="ISBN">

    <label class="labelstyle" >Title:</label>
    <input type="text" maxlength="100" size="50" id="Title" name="Title">*

    <label class="labelstyle">Author's First Name:    </label>
    <input type="text" maxlength="50" id="AFName" name="AFName">

    <label class="labelstyle">Author's Middle Name:</label>
    <input type="text" maxlength="50" id="AMName" name="AMName">

    <label class="labelstyle">Author's Last Name:</label>
    <input type="text" maxlength="50" id="ALName" name="ALName">*

    <label class="labelstyle">Date Read:</label>
    <input type="text" id="DateRead" name="DateRead">
</div>
</form>

Javascript:

function addBook() {
  $("#addBook").dialog({
    autoOpen: true,
    width: ($(document).width()*.55),
    height: ($(document).height()*.7),
    modal: true,
    buttons: {
              "Add Book": function() {
                          //checkBook();
                          $('#addbookform').submit();
                          },
              Cancel: function() { $(this).dialog("close"); }
    }
  });
}

上面的部分在我开始构建之前就可以工作 checkBook() 。然而，现在它不再起作用了。

编辑:

该表格由以下人员发起: <input type="button" class="buttonstyle" value="Add Book" onclick="addBook()" />(这有效)

Answer 1

我认为您的表单必须“可见”才能发布元素。无论 css 显示类型如何，jQuery 当然可以查看和访问所有元素，但我相信“提交”操作要求发布到服务器的元素可见。我注意到您尝试提交的所有表单元素都位于 DIV 元素内，其 css 属性为 Display:none;