javascript - 如何将我的 HTML 表单提交与我的 JavaScript 表单更新分开？

Question

我的页面上有一个围绕表格的表单，布局如下:

+-------------------------------------------------+
|                      FORM                       |
|  +-------------------------------------------+  |
|  |                   TABLE                   |  |
|  | +---------------------------------------+ |  |
|  | |       |       | THEAD |       |       | |  |
|  | +---------------------------------------+ |  |
|  | +---------------------------------------+ |  |
|  | |       |       | TBODY |       |       | |  |
|  | |  row  |   ~   |   ~   |   ~   |   ~   | |  |
|  | |  row  |   ~   |   ~   |   ~   |   ~   | |  |
|  | |  row  |   ~   |   ~   |   ~   |   ~   | |  |
|  | |  row  |   ~   |   ~   |   ~   |   ~   | |  |
|  | |  row  |   ~   |   ~   |   ~   |   ~   | |  |
|  | |  row  |   ~   |   ~   |   ~   |   ~   | |  |
|  | |  row  |   ~   |   ~   |   ~   |   ~   | |  |
|  | |  row  |   ~   |   ~   |   ~   |   ~   | |  |
|  | |  row  |   ~   |   ~   |   ~   |   ~   | |  |
|  | +---------------------------------------+ |  |
|  | +---------------------------------------+ |  |
|  | |                 TFOOT                 | |  |
|  | +---------------------------------------+ |  |
|  +-------------------------------------------+  |
|                                                 |
|          SUBMIT                  RESET          |
+-------------------------------------------------+

表单输入在 THEAD 中，之前提交的值显示在下面的 TBODY 中。当用户在表单中输入值并单击“提交”或按“输入”时，表单显然已提交。

此外，当用户单击 TBODY 中某一行内的任何单元格时，我会使用 JavaScript 将该行转换为可编辑行。所有静态文本都替换为输入、选择和复选框。这样用户就可以在线编辑数据。这就是用户想要的，所以我必须给他们。我已经尝试过 jqGrid，但它不适用于我正在做的事情。

现在，这是我的问题。显然，当用户完成对一行的编辑并按下“回车”键时，整个表单将提交。这不是我想要的行为，因为我在幕后使用 PHP 寻找特定的 POST 值；另外，我不想重新加载整个页面，我希望 AJAX 为我刷新该区域。我需要的是一种方法，可以将按下“enter”键更新行的用户与按下“enter”键进行初始表单提交的用户区分开来。

我试过像这样使用两个表:

+-------------------------------------------------+
|                      FORM                       |
|  +-------------------------------------------+  |
|  |                   TABLE                   |  |
|  | +---------------------------------------+ |  |
|  | |       |       | THEAD |       |       | |  |
|  | +---------------------------------------+ |  |
|  +-------------------------------------------+  |
+-------------------------------------------------+
   +-------------------------------------------+
   |                   TABLE                   |
   | +---------------------------------------+ |
   | |       |       | TBODY |       |       | |
   | |  row  |   ~   |   ~   |   ~   |   ~   | |
   | |  row  |   ~   |   ~   |   ~   |   ~   | |
   | |  row  |   ~   |   ~   |   ~   |   ~   | |
   | |  row  |   ~   |   ~   |   ~   |   ~   | |
   | |  row  |   ~   |   ~   |   ~   |   ~   | |
   | |  row  |   ~   |   ~   |   ~   |   ~   | |
   | |  row  |   ~   |   ~   |   ~   |   ~   | |
   | |  row  |   ~   |   ~   |   ~   |   ~   | |
   | |  row  |   ~   |   ~   |   ~   |   ~   | |
   | +---------------------------------------+ |
   | +---------------------------------------+ |
   | |                 TFOOT                 | |
   | +---------------------------------------+ |
   +-------------------------------------------+

但我在对齐两个单独表格的列时完全没有运气。他们必须排队，而且看起来是同一张 table 。我必须提供此演示文稿，因为这是需求文档中的内容。

那么，正如我的标题所说，我怎样才能将同一表单中的不同功能分开？如何将初始表单提交与 JavaScript 更新提交分开？

Answer 1

没有 jQuery

我不确定问题到底是什么，但是如果你想阻止表单提交，你可以这样做:

$('#myform').submit(function(e) {
    //proccess form elements
    //ajax call
    e.preventDefault();
});

你也可以使用这样的东西:https://stackoverflow.com/a/8664680/4006027