2

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?

Brian
  • 1,726
  • 2
  • 24
  • 62
  • 1
    Wouldn't it have been easier to post your code in your question, rather than the diagrams? – j08691 Sep 05 '14 at 15:05
  • 1
    capture the enter key event while the field is being edited and then return default behaviour afterwards? – EvilEpidemic Sep 05 '14 at 15:06
  • 1
    @j08691 WAY too much code to post here. I thought this way would be better. – Brian Sep 05 '14 at 15:07
  • @EvilEpidemic Not sure what you mean here. – 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

1 Answers1

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

Community
  • 1
  • 1
danielrw7
  • 120
  • 6