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

Question

I have a form surrounding a table on my page with the following layout:

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

The form inputs are in the THEAD, and the previously submitted values are displayed within the TBODY below. When a user enters values in the form, and clicks "submit" or presses "enter" the form is, obviously, submitted.

Also, when a user clicks on any cell within a row within the TBODY, I have JavaScript working that turns that row into an editable row. All static text is replaced with inputs, selects, and checkboxes. This is so a user can edit the data in-line. This is what the users wanted, so I must give it to them. I have tried jqGrid, but it will not work for what I am doing.

Now, here is my issue. Obviously, when a user finishes editing a row and presses "enter" then entire form will submit. This is not the behavior I desire, because I have PHP behind the scenes looking for specific POST values; plus, I don't want the entire page to re-load, I want the AJAX to refresh the area for me. What I need is a way to separate a user pressing "enter" to update a row from a user pressing "enter" for an initial form sumbission.

I have tried using two tables like so:

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

But I have been having absolutely no luck aligning the columns of the two separate tables. They have to line up, and appear to be the same table. I must provide this presentation as this is what is in the requirements document.

So, like my title says, how can I separate the different functions within the same form? How can I separate the initial form submit from the JavaScript update submit?

Answer 1

No jQuery

I'm not sure exactly what the question is, but if you want to prevent a form submit, you can do something like this:

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

You could also use something like this: https://stackoverflow.com/a/8664680/4006027