How can I separate my HTML form submit from my JavaScript form update?

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?

Wouldn't it have been easier to post your code in your question, rather than the diagrams? — j08691, Sep 05 '14 at 15:05
capture the enter key event while the field is being edited and then return default behaviour afterwards? — EvilEpidemic, Sep 05 '14 at 15:06
@j08691 WAY too much code to post here. I thought this way would be better. — Brian, Sep 05 '14 at 15:07
How about the idea to create a hidden form, that puts all data for submitting and submit it manually with `document..submit()`? — Reporter, Sep 05 '14 at 15:08
He means EventListener. For example: http://stackoverflow.com/questions/14542062/eventlistener-enter-key — Lkopo, Sep 05 '14 at 15:09
@Brian Can you post your full code to http://jsfiddle.net/ for example. — Richard Parnaby-King, Sep 05 '14 at 15:09
@RichardParnaby-King Like I said, way too much code to post. This is just a small part of the entire page. — Brian, Sep 05 '14 at 15:10
@reporter I'm not sure how to go about creating a form like that, given the parameters of HTML (i.e., you can put a table within a form, but not vice versa). — Brian, Sep 05 '14 at 15:12
Is it a requirement that you use an actual `form` element for your submission in the `thead`? What about wiring fields individually in JS? Much more cumbersome, but it may be an easier way to accomplish what you're after. — Palpatim, Sep 05 '14 at 15:15
Also, do you have any negotiating room in where the form submission & reset controls are located? It's odd to see them so far separated from the actual fields being submitted. A long table would make this form harder to use, and make the user work harder to keep their mind on the task. — Palpatim, Sep 05 '14 at 15:18
You need to put `onsubmit="return somefunction();"` in your `form` tag like so `
`. Then have your function return false. — imtheman, Sep 05 '14 at 15:23
@imtheman Yes, I could try something like that. I only wish I could embed the form within the THEAD only, that would completely solve my problem. — Brian, Sep 05 '14 at 15:25
@Brian You can put the inserted data into a hidden form via javascript and from the other direction you can use pure php. — Reporter, Sep 08 '14 at 10:34

score 0 · Answer 1 · edited May 23 '17 at 10:33

0

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

edited May 23 '17 at 10:33

Community

1
1

answered Sep 05 '14 at 15:09

danielrw7

120
6

2

OP did not specify jQuery is allowed, so you should either write this as native JavaScript, or explicitly note that your answer requires jQuery. – Palpatim Sep 05 '14 at 15:10
Sorry, I didn't realize that. – danielrw7 Sep 05 '14 at 15:14

How can I separate my HTML form submit from my JavaScript form update?

1 Answers1