App flow question

[eluser]jtotheb[/eluser]
I've got an app that i've made but i'm not happy with the way it works for the end user, i feel it may be a bit counter intuitive so i hoped someone could provide some advice.

The app is a series of forms for the user to select or deselect options. The forms are split into tabs. So there are 5 tabs, and each tab contains a form. Each tab is a real page and not ajax tabs.

The way it works at the moment is that someone makes their amendments on a tab and then click a submit button that runs a query with the new values and gives them a number back. Then they move on by clicking another tab to go to another form. You don't have to fill the forms in any particular order and you can go back and forth too. What i'm finding is that people are using the form but then clicking on a new tab and forgetting to click the submit button and so losing their changes.

What i think i want to happen is that when they click on another tab, it submits the form and then moves them onto the new tab that they clicked on. The only trouble is i don't know how to make the tabs submit the current form and then move onto the relevant tab they clicked on. Is this something i can do with javascript? Could anyone provide a bit of sample code if so?

I'd really appreciate any help with this!

[eluser]Dam1an[/eluser]
To submit a form using a text link you can do

Code:

<form name="form1" action="controller/function">
    <label>Name: </label>&lt;input type="text" name="first_name" /&gt;&lt;br />
    <label>Surname: </label>&lt;input type="text" name="last_name" /&gt;&lt;br />
    <A href="[removed] submitform()">Submit</A>
&lt;/form&gt;

<scrip-t language="javascript">
function submitform() {
  document.form1.submit();
}
</scrip-t>

Thats should give you an idea of how to go about it

[eluser]Evil Wizard[/eluser]
you could put a hook in to the script that switches tabs to submit the form, however that could lead to empty form submission and failed validation, resulting in false negatives. That said you could have a "is_dirty" check for the form, for instance when an input box changes, a checkbox/radio button is clicked and then in the tab change code check if the form state is dirty and submit the form but add the target of the tab change to the post data so the correct tab page is loaded on processing the form.

ADDED:
I would also suggest using JQuery to achieve this

[eluser]jtotheb[/eluser]
Ah okay cool, thank you. How would i go about passing a hidden form item that says which tab was pressed so i can redirect? Or do you think that is not the right way to go about it?

[eluser]jtotheb[/eluser]
I am using jquery for some other stuff so i'll see what i can do with it. Perhaps i've just gone the wrong way about this entirely!

[eluser]Evil Wizard[/eluser]

Code:

$('#my_tabs_id').select(function(event, ui) {
    $my_form = $('#my_form_id');
    var tag = '<input type="hidden" name="tab_target" value="' + $(this).tabs('option', 'selected') ' + "/>';
    $my_form.append(tag);
    $my_form.submit();

I've not tried that but it is along the lines of what you're looking for I think

[eluser]jtotheb[/eluser]
Ah right, yes i see. Thank you very much!

[eluser]jtotheb[/eluser]
@Evil Wizard Do i need the latest version of jquery alone for this to work? Or do i also need some jquery ui js too?

Cheers!

[eluser]jtotheb[/eluser]
I've got latest jquery but this still isn't working for me! Should this jquery function be turning the tab into a clickable link? If so should i remove the <a> from within the tab? It doesn't seem to do anything!

[eluser]jtotheb[/eluser]
Don't worry, ignore me! I've worked out what is going on. Cheers!!