how to restrict user from click another tabs menu

[airwinx]

Hi All,
I have 3 horizontal tabs menus with different form to let user key in some infor to the text fields.

When user 1st time access this page, all fields are blank. But if user want to go to the second tab, user must key in some infor at the 1st tabs form. How do I check if user didn't key in anything in the 1st tabs form? I want to force user to key in the 1st tab's form in order to allow user to click the second tab form and 3rd tab form.

What I want is if user didn't key in anything at the 1st tab's form, an alert will prompt out and tell the user to key in the text in the textfield at 1st tab form and save the data into mysql DB. Or else he can't even pressed the second tab form or 3rd tab's form.

How should I proceed with this requirement.

I am using php and mysql for data storage. I think of using javascript to do this but my javascript is knowledge is a bit crappy.

[buddylee17]

Use the header function to return the user to the first page if the variable from first page isn't filled in.

<?php
if(empty($_POST['var from first page'])){
header ('Location:page1.php');
}

[airwinx]

I using yui tabview to show the tab menu. All the form is within the same page.

Here is the sample of how my tab menu look like: http://developer.yahoo.com/yui/examples/tabview/frommarkup.html

So when user click 1st tab and then to next tab menu, i need to verify if user is allow to click 2nd tab. Or else force user back to 1st tab. Each tab will have a <div id=tab1>content</div>.

Maybe I should said how to anchor back to the 1st tab content using javascript?

Buddylee17, i try ur method but it juz somehow refresh the whole page.

[johnsquibb]

JavaScript would be the way to go.
You'll probably get better help in the JavaScript/AJAX/DHTML forum on this one.

[buddylee17]

Yeah you'll definitely want some JavaScript incorporated. What I would do:
Disable tabs 2 and 3.
Use onclick handler to send the first form to a php script via an xmlhttprequest(AJAX). If the form validates, send the contents of the second form back and populate with innerHTML and enable the second tab. Also, do the same for the third. If you are not familiar with AJAX, do what john said and repost in the JavaScript/AJAX/DHTML forum.

-notice I said onclick handler. That's only because an onsubmit will cause a page refresh and the form change will not be seamless.