Member Avatar for 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.

  • 3 Contributors
  • 4 Replies
  • 96 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by buddylee17

Dani AI

Generated

As noted, the page uses a single HTML document with YUI TabView markup. The most reliable pattern is twofold: block tab changes on the client until required fields on tab 1 are filled, and enforce the same rule on the server when data is saved (so users cannot bypass client checks). That matches the direction from and expands on by showing a minimal, practical implementation.

A small, framework-agnostic listener can prevent tab clicks that target tab2 or tab3 when tab1 is empty:

document.addEventListener('click', function (e) {
  var a = e.target.closest('a[href^="#tab"]');
  if (!a) return;
  var dest = a.getAttribute('href');
  if (dest === '#tab2' || dest === '#tab3') {
    var req = document.querySelector('#tab1 input[name="yourRequiredField"]');
    if (!req || req.value.trim() === '') {
      e.preventDefault();
      alert('Please complete the first tab before proceeding.');
      req && req.focus();
    }
  }
});

To save tab1 without leaving the page and then enable other tabs, submit via fetch and respond with JSON. On success remove a disabled class or attribute so clicks are allowed:

document.getElementById('saveTab1').addEventListener('click', function (ev) {
  ev.preventDefault();
  var fd = new FormData(document.getElementById('formTab1'));
  fetch('save_tab1.php', { method: 'POST', body: fd })
    .then(r => r.json())
    .then(json => {
      if (json.success) {
        document.querySelectorAll('a[href="#tab2"], a[href="#tab3"]').forEach(a => {
          a.classList.remove('disabled');
          a.removeAttribute('aria-disabled');
        });
      } else {
        alert(json.error || 'Save failed');
      }
    });
});

Server side must validate and return JSON. Always use prepared statements for DB inserts. For UX, gray-out disabled tabs with CSS (pointer-events:none for modern browsers) and set aria-disabled for screen readers. If using YUI TabView, hook its tab-selection API or intercept clicks on the tab headers as shown above so the TabView widget never switches to blocked tabs.

Recommended Answers

All 4 Replies

Member Avatar for 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');
}
Member Avatar for 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:

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.

Member Avatar for johnsquibb

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

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.