[HTML PHP]tabbladen wisselen en tegelijkertijd opslaan

[Dorgaldir]

Wat heb ik:
Een klanten fiche verdeeld in 3 delen. Naam, opvolging en aankoop.
Als je de klant opent dan krijg je eerst het tablad naam te zien.
Daar kan je zijn gegevens aanpassen, dan moet je op opslaan klikken om het op te slaan.
En dan kan je op een van de twee andere tabbladen klikken om naar een ander te gaan en daar ook wijzigingen te maken.

Wat moet er komen:
Het is de bedoeling dat je in alledrie de tabbladen gegevens kan wijzigen en dan met een keer op opslaan klikken ze alle drie tegelijkertijd op te slaan.
bv.
Ik open een klant en kom in het naam tabblad, ik wijzig daar zijn adres ofzo, dan klik ik niet op opslaan maar rechtstreeks op opvolging en pas daar een datum aan. En dan pas klik ik op opslaan.

Ik heb geen idee hoe ik dit moet doen.
Ik werk met een HTML formulier dat opgedeeld word in drie delen. Het deel dat te zien is kan gekozen worden door gewone buttons die dan een link ala www.mysite.be/fiche?wat=naam of www.mysite.be/fiche?wat=opvolging geven.
en dan heb ik in de fiche gewoon met php

PHP:

<?php
$wat = $_GET['wat'];
?> <FORM ....><?
if ($wat == 'naam')
{
    ?><input type ="tekst"><?
}
elseif ($wat == 'opvolging')
{
   ?><input type ="tekst"><?
}
?><input type ="submit">
</form><?
?>

[NMe]

Als je drie divs hebt voor je tabbladen en met Javascript tussen die tabbladen wisselt, dan hoef je toch alleen maar een <form> daaromheen te zetten en aan het einde een form.Submit() te doen?

[Cartman!]

Precies, en gewoon die formulieren tonen standaard en verbergen met javascript, dan werkt het ook voor mensen zonder JS, die krijgen dan gewoon de 3 invoerblokken onder elkaar te zien

[Dorgaldir]

klinkt handig, alleen is er dan nog het probleem dat ik nog nooit met div's heb gewerkt
*schaam*
enige tips waar ik hier info over kan vinden?

EDIT:Heb een oplossing gevonden.

JavaScript:

<script>
        function showhide(id){
        if (document.getElementById){
        obj = document.getElementById(id);
        obj1 = document.getElementById(1);
        obj2 = document.getElementById(2);
        obj3 = document.getElementById(3);
        obj1.style.display = "none";
        obj2.style.display = "none";
        obj3.style.display = "none";
        obj.style.display = "";
        }
        }
</script> 

HTML:

<A href="#" onclick="showhide('1'); return(false);"><img src="images/Buttons/NAWButton.png"BORDER="0"></A>
<A href="#" onclick="showhide('2'); return(false);"><img src="images/Buttons/OpvolgButton.png"BORDER="0"></A>
<A href="#" onclick="showhide('3'); return(false);"><img src="images/Buttons/KoopButton.png"BORDER="0"></A>

HTML:

<form>
<div id="1" style="display: none;">
**form**
</div>
<div id="2" style="display: none;">
**form**
</div>
<div id="3" style="display: none;">
**form**
</div>
</form>

dit lijkt het toch te doen, dus zal het zo maar laten

[ Voor 78% gewijzigd door Dorgaldir op 27-10-2009 13:45 . Reden: oplossing gevonden ]

[Cartman!]

Alleen zonde dat je een div met id "1" niet is toegestaan, de parser hier geeft dit ook al netjes aan...

[NMe]

Numerieke id's mogen inderdaad niet. Verder: waarom een anchor tag (<a>) als je ook gewoon een onclick event op je image kan plaatsen? Die je vervolgens niet hoeft te cancelen met "return false;". Verder is dit wel een heel erg smerige/non-portable variant. Wat je eigenlijk zou willen is deze structuur:

HTML:

<div class="tabGroup">
  <ul class="tabDefinition">
    <li id="tab1" class="active">Tab 1</li>
    <li id="tab2">Tab 2</li>
    <li id="tab3">Tab 3</li>
  </ul>
  <div id="tab1content" class="tabContent active">
    Dit is tab 1.
  </div>
  <div id="tab2content" class="tabContent">
    Dit is tab 2.
  </div>
  <div id="tab3content" class="tabContent">
    Dit is tab 3.
  </div>
</div>

Vervolgens zou je in Javascript door alle li's in ul.tabDefinition heen kunnen lopen, en daar een onclick event aan hangen (element.onclick = functieNaam). Die functie doet niet meer dan alle li's in je tabDefinition aflopen (tip: de parent van de parent van het element dat de onclick afvuurde in mijn opzet) en de huidige tab active maken/andere tabs inactive maken, en hetzelfde met alle tabcontent divs. Als je dat goed opzet in een Javascript-file die je op al je pagina's includet, dan is het enige wat je moet doen om nieuwe tabs te maken, de HTML ervoor tikken.

Styling zul je er uiteraard nog bij moeten verzinnen zodat de li's naast elkaar geshowd worden en een leuke border krijgen. Maar da's vrij triviaal.

[ Voor 5% gewijzigd door NMe op 28-10-2009 15:45 ]

[Dorgaldir]

Ik snap wat je bedoeld, alleen ben ik niet zo'n krak in javascript spijtig genoeg. Nog nooit echt de tijd gehad om dat deftig te leren, hier en daar wel een enkel weetje maar geen echte ervaring, dus weet niet geheel hoe ik hieraan moet beginnen.