We have moved our forum to GitHub Discussions. For questions about Phalcon v3/v4/v5 you can visit here and for Phalcon v6 here.
  1. Home
  2. General

Using tabs in Forms & retaining data in them

Hi,

Two issues which I would like to understand:

  • How to retain data in tabs in a form if each tab has an action associated with it. If I modify any field on the tab and move to a new one, the changes are lost. I would like to retain them till the form is saved.

    a. Should I save each tab? Is that a good approach.

    b. Can I save this data in session variable or some other way without a submit?

    c. Should I trigger a submit when tab changes and save to session variable? If yes, then how do I trigger a submit.

    d. Should I use jQuery to manipulate the tabs. I believe it's easy to retain data in tabs with JQuery.

    e. Is there any way to retain data in a tab without using Javascript? See this post: trick : re-populate forms if submission fail.. I couldn't achieve this.

  • Should tabs be created before or after a form declaration. Is there a difference?
{{ elements.getTabs(hr_emp_iid) }}

{{ content() }}

<form id="tree-form-id" method="post" autocomplete="off">

OR

{{ content() }}

<form id="tree-form-id" method="post" autocomplete="off">

{{ elements.getTabs(hr_emp_iid) }}

Amal



1.9k

Tabs and form elements need to be inside <form tag. You can use JQuery or maybe even better to use Bootstrap tabs for manipulating



93.7k
edited Sep '16

As @ntesic mentioned, every form element needs to be inside the <form> tag. After submiting the form Phalcon will populate the fields if errors have occured.

However if you have, lets say 3 tabs:

Tab 1 | Tab 2 | Tab 3 and there are errors in Tab 2 after submit, you can check with JQuery or Phalcon and add active class to open the needed tab.



16.3k

So the right way to code a view is:

<form id="tree-form-id" method="post" autocomplete="off">
{{ elements.getTabs(hr_emp_iid) }}
{{ content() }}
...

I forgot to mention that data in all the tabs is related to the first tab - like lineitems of an invoice or an order. Each tab correspponds to a table (model).

@ntesic I am using nav-tab from bootstrap. How do I manipulate using Bootstrap & PHP - ok, I found some useful info on the net. Will check and try it out. If I use tab-panes then my data is already in panes and they are all alive (have data) but only one of them shows. Even if I change tabs my edited data will not go away. Is that correct?

@Nikolay, I understand what you wrote but core question is - should I save each tab separately on its submit. Should I trigger a submit when the user changes tab?

Really appreciate you guiding me. Thanks



93.7k

@Amal, its totaly up to you to decide if you want to save the data or not. There are two options:

1) Submit whole form at once - Change steps with javascript and on last step submit the whole form and validate;

2) Saving steps data

2.1) If you want to change steps with javascript - Send data of each step with ajax, validate, save and go to next step;

2.2) If every step is differnet url like /step-1/, /step-2/ just submit, vlaidate and redirect to next step.