I would like to share my solution to a little problem that I recently encountered in a project.  I was using tabbed forms and noticed that submitting the form, if you re-open the form in view mode you will see that the form is not appearing with first tab selected. It is selecting the tab last viewed and displaying the visible panel for that tab. What’s happening here is the choice control is saving the value internally of last option (Tab) selected before the form is saved and that’s why when you are trying to view the form it’s selecting the last value it reached and displaying the required panel that is visible for that value. (Incidentially, if you’d like to know more about choice controls and rules, go here.)

That could really be confusing to the user of the form, but we can improve their experience!

So before saving the form if we can set the value of the choice control to the first option forcefully, the problem can be solved.

What to do?

Step 1:

For this you have to set ‘Store Client ID in JavaScript variable’ as yes and have to give ‘Client ID JavaScript variable name’ for the choice(Tabbed) control as follows:

Step 2:

Now Goto Settings and click on “Custom JavaScript” as follows:

Step 3:

Paste the required script to set forcefully the value of Choice(Tab) control

What the code snippet is doing here?

Before saving the form the required JQuery Submit function triggers first and it set the value of the choice control forcefully to the first option value(it could be different as well as per the requirement) before the form is saved. And now the if you open the form it will come up with the first tab selected.  

I hope this helps your users' experience.