[SOLVED] tabbing system (PHP)

[anujgarg]

I am using tabbing system in my site. My form structure is as follows -

 

1) There are 4 tabs on the top of the page saying-

    a) General Information

    b) Qualification

    c) Experience

    d) Project Details

Each tab section contains 6 fields (textboxes, radio buttons, dropdowns, textarea). Each tab has next/prev button to navigate to other tab.

 

2) 10 more fields are there below these 4 tabs. These 10 fields are totally separate of the above 4 tabs.

 

This form has only one submit button at the bottom.

 

I want to know how can I insert the values of controls/fields in the tabbing sections and the outside panel of the form, all at once.

 

My idea for tabbing section is - Keeping all the data in cookies and insert it with the click of submit button.

 

                              (OR)

 

Should I use AJAX to insert/update the fields in table on click of next button presented in the tabs?

 

What you people say???

 

 

 

 

 

[LemonInflux]

From what I understand, I think it would be better not to use AJAX. Have all of the form already on the page, and just use javascript to flip it over. That way, you can, as well as making your javascript unobtrusive, hold all the data on the page without having to use cookies and other things that could be blocked by the user's browser

 

----------------

Now playing: Linkin Park - Wth>You (Chairman Hahn ft. Aceyalone)

via FoxyTunes

[anujgarg]

But my question is how to hold data throughout the tabbing navigation.

 

Suppose I filled out the fields in tab1 then navigate to 2nd tab then to 3rd tab, now I want to come back to 1st tab from 3rd tab through 2nd, here I want to hold data as I previously filled in.

 

I used setcookies() for the same to hold data but the data gets lost when I navigate more than 1 tab.

[Third_Degree]

Have just one page with all the forms, but separate each tab's forms in their own separate div. Then use javascript to hide/show each div when each tab is clicked.

[anujgarg]

Third_Degree

 

I think you did not get my point. Please read my question carefully. Sorry to say but I am not asking what your replying.

[Barand]

Please read Third_degree's reply carefully as I don't think you got his point.

 

With one minor change

 

... but separate each tab's forms fields in their own separate div ...

 

 

it exactly answers your question:

 

But my question is how to hold data throughout the tabbing navigation.

 

Suppose I filled out the fields in tab1 then navigate to 2nd tab then to 3rd tab, now I want to come back to 1st tab from 3rd tab through 2nd, here I want to hold data as I previously filled in.

[LemonInflux]

That's what we answered though, isn't it? If we hold the forms in different tabs, and have the tabs loaded already, then data won't be lost because the form is still there?

 

----------------

Now playing: August Burns Red - The Truth of a Liar

via FoxyTunes

[tmallen]

1. There's no reason you can't hold onto all of that data client-side using JavaScript

2. If that's too fragile, make each tab switch "forward" trigger a DB save using a simple AJAX request, and if you want to drop this data between tabs, use another request to fetch the form data from the server when navigating to a previously visited tab.

 

Both ways are easy to implement.

[anujgarg]

tmallen

 

_{1. There's no reason you can't hold onto all of that data client-side using JavaScript}

 

But how can I implement the Javascript to hold these values? I used cookies for the same but whenever I am trying to retrieve these cookies values via PHP (by using $_COOKIE['cookiename']), I get 'NULL' value. I am not getting any value that has been set by setCookie() in javascript.

 

_{2. If that's too fragile, make each tab switch "forward" trigger a DB save using a simple AJAX request, and if you want to drop this data between tabs, use another request to fetch the form data from the server when navigating to a previously visited tab.}

 

I am avoiding this method as it will take a lot of time to communicate with server and respond back to client.

[proggR]

With a variable? You can hold the values in variables and then submit the finished results all at once to the server. Or like already mentioned you can have it dynamically updating a DB with AJAX.

[Third_Degree]

You won't have to "hold" these values. Just output them to the page and hide/show them with css every time a new tab is clicked.

[anujgarg]

Third_Degree

 

Thanks for your reply. But I still have some doubts,

 

First,

But, in the end of the form, I have to submit all these values along with the other values of form.

Will I be able to submit all those values at which I am applying show/hide??

 

Second,

How could I show/hide the values with CSS? I think that we can show/hide controls (textbox etc.) only with css by - 

 

document.getElementById('txtboxId').style.display = "none"

[Third_Degree]

Yes you can submit all the values, and for your second part you can also use

 

document.getElementById('div').style.visibility='hidden';

[Barand]

Here's an example. Should make it a little clearer for you

 

<?php 
if (isset($_POST['btnSubmit']))
{
    echo '<p>Your input data :</p>';
    echo '<pre>', print_r($_POST, true), '</pre>';
    echo '<hr/>';
}
?>

<html>
<head>
<meta name="generator" content="PhpED Version 4.5 (Build 4513)">
<title>Hidden form sections</title>
<meta name="author" content="Barand">
<meta name="creation-date" content="08/09/2008">

<style type='text/css'>
div     {
    font-family: arial;
    font-size: 9pt;
}

div.tab {
    background-color: #999;
    color: #FFF;
    height: 30px;
    width: 100px;
    text-align: center;
    font-weight: 600;
    padding: 10px;
    margin: 10px;
    float: left;
}

div.formsection {
    padding: 0px;
    width: 500px;
    height: 0px;
    overflow: hidden;
    visibility: hidden;
}

fieldset {
    padding: 50px 20px;
    margin: 20px;
}
</style>

<script type='text/javascript'>
    var currentSection = "part1";
    
    function showHideSection (id)
    {
        var currObj = document.getElementById(currentSection);
        var newObj =  document.getElementById(id);
        
        currObj.style.visibility = "hidden";
        currObj.style.height = "0px";
        
        newObj.style.visibility = "visible";
        newObj.style.height = "200px";
        
        currentSection = id;
    }
</script>
</head>
<body>
<form method='post'>
    <div>
          <div class='tab' onclick='showHideSection("part1")'>Part 1</div>
          <div class='tab' onclick='showHideSection("part2")'>Part 2</div>
          <div class='tab' onclick='showHideSection("part3")'>Part 3</div>
          <br style='clear: both'>
    </div>
    
    <div class='formsection' id='part1' style='visibility: visible; height: 200'>
          <fieldset>
          <legend>section one</legend>
                Item 1  <input type='text' name='item1' /><br /><br />
                Item 2  <input type='text' name='item2' />
          </fieldset>
    </div>

    <div class='formsection' id='part2'>
          <fieldset>
          <legend>section two</legend>
                Item 3  <input type='text' name='item3' /><br /><br />
                Item 4  <select name='item4'> <option>option a</option> <option>option b</option> </select>
          </fieldset>
    </div>

    <div class='formsection' id='part3'>
          <fieldset>
          <legend>section three</legend>
                Item 5  <input type='text' name='item5' /><br /><br />
                Item 6  <input type='text' name='item6' />
          </fieldset>
    </div>
    
    <div>
          <input type="submit" name="btnSubmit" value="Submit">
    </div>
</form>
</body>
</html>

[anujgarg]

Thank you all for your replies.

 

But, what if I would not like to use "visibility:visible/hidden" method of css?

 

I want to use "display:none/block" method for the same. Then how can I hold values during tabbing? Also, I am having a combination of prev/next buttons at the bottom of each div. So, I have to maintain these buttons along with the tabs navigation. As per my knowledge, I would have to apply the same function (as on div) on these buttons.

 

TIA

[peddel]

another way to hold values is use php and open a session

store the variables as session variables

the variables wont go away unless u would close down firefox completely

 

heres link to using sessions

 

http://www.tizag.com/phpT/phpsessions.php

 

[Barand]

Good luck!

[Third_Degree]

Good luck!

 

hahaha ditto