[Javascript] Dynamisch tabindex aanpassen*

[Verwijderd]

Ik heb een pagina, waarbij, afhankelijk van de keuze uit een selectbox verschillende inputvelden worden getoond..

nu heb ik dit gedaan door mbv onchange de display te veranderen van 'none' naar 'block' en andersom.. dit werkt verder uitstekend..

het probleem wil nu dat als ik van een bepaald input veld naar een volgende wil (met tab) dat hij ook langs de inputvelden gaat die op display:none; staan.. uiterst vervelend dus

nu dacht ik dynamisch aan te passen met javascript (zie code onderaan), maar dat werkt niet...

heeft iemand een idee hoe ik dit aan kan pakken?

JavaScript:

      switch(type) {
        case 'ANSI':
          triptime.tabindex = 2;
          startvalue.tabindex = 3;
          submit.tabindex = 4;
          break;
        case 'IEC':
          k.tabindex = 2;
          a.tabindex = 3;
          timedial.tabindex = 4;
          startvalue.tabindex = 5;
          submit.tabindex = 6;
          triptime.tabindex = -1;
          break;

[Verwijderd]

wat werkt niet? wat is de fout?

ik gok dat een variabelenaam als "submit" wel eens problemen zou kunnen geven, kies eens iets anders?

[BtM909]

Wil je voortaan een iets meer beschrijvende titel bedenken?

---

En je hebt vast en zeker gezocht met google en daarbij kwam je vast en zeker de eerste hit tegen: http://forums.devarticles.com/t2382/s.html

Wat werkt er niet precies met dit voorbeeld?

[ Voor 66% gewijzigd door BtM909 op 08-11-2005 14:12 ]

[Verwijderd]

ik gok dat een variabelenaam als "submit" wel eens problemen zou kunnen geven, kies eens iets anders?

heb ik al veranderd, maar dat maakt geen verschil.. daar zal het dus niet aan liggen..

En je hebt vast en zeker gezocht met google en daarbij kwam je vast en zeker de eerste hit tegen: http://forums.devarticles.com/t2382/s.html

Ik heb inderdaad met google gezocht, ben deze hit toch niet tegengekomen (andere zoektermen denk ik ). Maar dat geeft niet, want deze hit beschrijft mijn probleem niet

Wat ik dus heb is dat ik bij het laden van de pagina een aantal input elementen met een bepaalde tabindex volgorde heb. Als ik nu (dmv een selectbox) een aantal divs laat 'verdwijnen' (mbv display:none; ) en andere juist laat zien, dan doet zich het probleem voor dat als ik op tab druk hij naar het volgend element gaat, ook al staat deze op display: none;.. (je ziet dus nis, maar er gebeurt wel wat )

kortom: de 'oude' tabvolgorde blijft gewoon staan en wordt niet ge-update met de door jscript ingesteld tabvolgorde

en dat is hetgene wat niet werkt met dit voorbeeld..

wat ik dus wil: een tabindex die dynmiasch verandert met de (op dat moment) zichtbare input elementen (en dus de onzichtbare uitsluit).

[ Voor 9% gewijzigd door Verwijderd op 08-11-2005 14:26 ]

[Verwijderd]

geef eens wat meer info / code / foutmelding dan, want nu zitten we gewoon maar te raden.

Ik neem aan dat je je switch statement, in tegenstelling tot je geposte code hierboven, wel afsluit?

[BtM909]

Als je toch het voorbeeld een beetje beter bekijkt, dan zie je dat er een mogelijkheid wordt geboden om naar de volgende tabindex te springen. Wat denk je wat er gebeurt als je bij de focus van een veld checkt wat of de display op none staat (en je dus de volgende tabindex activeert)

[Verwijderd]

in het formulier:

HTML:

      <tr>
        <td><label for="timechar">Time Charateristic:</label></td>
        <td>
          <select id="timechar" name="timechar" onchange="updateTabindex();checkChar();doUpdate();" tabindex="1">
            <option value="0" selected="selected">Definite time</option>
            <option value="1">IEC Standard Inverse</option>
            <option value="2">IEC Very Inverse</option>
            <option value="3">IEC Extremely Inverse</option>
            <option value="4">ANSI Moderately Inverse</option>
            <option value="5">ANSI Very Inverse</option>
            <option value="6">ANSI Extremely Inverse</option>
          </select>
        </td>
      </tr>
      <tr id="trip_time_row">
        <td><label for="trip_time">Trip time:</label></td>
        <td><input type="text" name="triptime" id="trip_time" value="0" onblur="doUpdate();" tabindex="2"></td>
      </tr>      
      <tr id="param1_row" style="display:none;">
        <td><label for="param1" id="param1_label">k:</label></td>
        <td><input type="text" name="param1" id="param1" value="" onblur="doUpdate();"></td>
      </tr>
     
  <!--      nog wat rijen.... -->
      <tr>
        <td><label for="istart">Start value:</label></td>
        <td><input type="text" name="startvalue" id="istart" value="0" tabindex="3"></td>
        <td rowspan="8" align="right"><button type="submit" id="subm" name="submit" tabindex="4" onsubmit="if(checkDial())return(saveData(this,nrInputs));">Save settings</button></td>
      </tr>

in de javascript:

code:

function checkChar() {
      getParams();
      var settings = new Array();
      switch(curveType) {
        case 0:
          settings['triptime']   = 'block';
          settings['param1']     = ['none', '', ''];
          settings['param2']     = ['none', '', ''];
          settings['param3']     = ['none', ''];
          settings['timedial']   = 'none';
          break;
        case 1:
          settings['triptime']   = 'none';
          settings['param1']     = ['block', 'k:', 0.14];
          settings['param2']     = ['block', 'a:', 0.02];
          settings['param3']     = ['none', ''];
          settings['timedial']   = 'block';
          break;
        case 2:
          settings['triptime']   = 'none';
          settings['param1']     = ['block', 'k:', 13.5];
          settings['param2']     = ['block', 'a:', 1.0];
          settings['param3']     = ['none', ''];
          settings['timedial']   = 'block';
          break;
        // Nog meer cases met hetzelfde
      }

      triptime_row.style.display   = settings['triptime'];
      par1_row.style.display       = settings['param1'][0];
      par1_label.innerText         = settings['param1'][1];
      par1.value                   = settings['param1'][2];
      par2_row.style.display       = settings['param2'][0];
      par2_label.innerText         = settings['param2'][1];
      par2.value                   = settings['param2'][2];
      par3_row.style.display       = settings['param3'][0];
      par3.value                   = settings['param3'][1];
      timedial_row.style.display   = settings['timedial'];
    }
    function updateTabindex() {
      getParams();
     
      switch(type) {
        case '':
          triptime.tabindex = 2;
          startvalue.tabindex = 3;
          submi.tabindex = 4;
          break;
        case 'IEC':
          k.tabindex = 2;
          a.tabindex = 3;
          timedial.tabindex = 4;
          startvalue.tabindex = 5;
          submi.tabindex = 6;
          triptime.tabindex = -1;
          break;
        case 'ANSI':
          A.tabindex = 2;
          B.tabindex = 3;
          p.tabindex = 4; 
          timedial.tabindex = 5;
          startvalue.tabindex = 6;
          submi.tabindex = 7;
          triptime.tabindex = -1;
          break;
      }
    }

Het switch staement sluit ik idd wel af.. beetje verkeerd gekopieerd.. ik krijg verder trouwens ook geen foutmeldingen oid..

[Verwijderd]

A.setAttribute('tabindex', '5')?

[Verwijderd]

nope.. dat werkt ook niet..

heb inmiddels wel de oplossing gevonden. Door de onzichtbare input elementen op disabled te zetten sluit je ze uit van de tabindex. Zo gaat hij automatisch naar het volgende, niet-gedisablede (en dus zichtbare) element.

tnx voor de moeite iig!