Vysuvanie

elo · Napísal **elo**: 31.05.2012 13:59

Ahojte,

robím formulár, ktorý po označení chechboxu má vysunúť pod ním ďalšie atribúty (label, drop down a pod.)

Mám tam tento kód:

Kód:

 <script type="text/javascript">
document.getElementById('vm_zamestnanec_field').onclick = function(){  
    if (document.getElementById('vm_zamestnanec_field').checked)
    {
      document.getElementById("vm_jsemzamestnanec").style.display = "block";
    }
    else
    {
     document.getElementById("vm_jsemzamestnanec").style.display = "none";
     }
  }
</script>
  
<style>         
#vm_jsemzamestnanec {display:none;}
</style>

Tu je HTML:

Kód:

<tr>
         <td class="key">
            <label class="vm_zamestnanec" for="vm_zamestnanec_field">
               Zamestnanec VŠ
            </label>
         </td>
         <td>
            <input type="checkbox" name="vm_zamestnanec" id="vm_zamestnanec_field" value="1" />
         </td>
      </tr>
      <tr>
         <td class="key">
            <label class="vm_jsemzamestnanec" for="vm_jsemzamestnanec_field">
               Jsem zamestnanec VŠ
            </label>
         </td>
         <td>
            <select id="vm_jsemzamestnanec" name="vm_jsemzamestnanec" size="0">
   <option value="Vybrat">Vybrat</option>
   <option value="ČVUT">CVUT</option>
   <option value="VSCHT">VSCHT</option>
   <option value="Ostatní">Ostatni</option>
</select>

         </td>
      </tr>

Po označení checkboxu sa vysunie drop down ale checkbox nereaguje na popis "Jsem zamestnanec VŠ" - aj tento popis sa má schovávať.

Aký kód mám vložiť do scriptu aby sa schovával aj popis? (niečo mi tam chýba)

Ďakujem.

shaggy · Napísal **shaggy**: 31.05.2012 18:12

Urobíš to rovnako, ako si urobil zobrazovanie/skrývanie toho selectu.
Dáš tomu label-u nejaké id (aby sa ti s nim jednoducho manipulovalo) a budeš mu nastavovať display tak, ako to robíš pri selecte.

elo · Napísal autor témy **elo**: 31.05.2012 18:58

Nejde to inak vyriešiť?

Pred tým som to mal takto:

Kód:

Kód:

                                  
 <script type="text/javascript">
document.getElementById('vm_student_field').onclick = function(){  

    if (document.getElementById('vm_student_field').checked)
    {
      document.getElementById("vm_vyberteskolu_div").style.display = "block";
     document.getElementById("vm_vyberteskolu_input").style.display = "block";
    }
    else
    {
     document.getElementById("vm_vyberteskolu_div").style.display = "none";
     document.getElementById("vm_vyberteskolu_input").style.display = "none";
    }
  }
</script>  

<style>         
#vm_vyberteskolu_div,#vm_vyberteskolu_input {display:none;}
</style>
    

HTML

Kód:

 <br style="clear:both;" /><div id="vm_student_div" class="formLabel "><label for="vm_student_field">Student</label> </div>
         <div class="formField" id="vm_student_input">
<input type="checkbox" name="vm_student" id="vm_student_field" value="1" /><br /></div>
                  <br style="clear:both;" /><div id="vm_vyberteskolu_div" class="formLabel "><label for="vm_vyberteskolu_field">Jsem studentem</label> </div>
         <div class="formField" id="vm_vyberteskolu_input">

<select name="vm_vyberteskolu[]" id="vm_vyberteskolu" class="inputbox" size="0" >
   <option value="">Vybrat</option>
   <option value="ČVUT - Fakulta stavební">ČVUT - Fakulta stavební</option>
   <option value="ČVUT - Fakulta architektúry">ČVUT - Fakulta architektúry</option>
   <option value="ČVUT - Fakulta strojní">ČVUT - Fakulta strojní</option>
   <option value="ČVUT - Fakulta elektrotechnická">ČVUT - Fakulta elektrotechnická</option>
   <option value="ČVUT - Fakulta informačních technologií">ČVUT - Fakulta informačních technologií</option>
   <option value="ČVUT - Ostatní fakulty">ČVUT - Ostatní fakulty</option>
   <option value="VŠCHT">VŠCHT</option>
   <option value="Jiná škola">Jiná škola</option>
</select>

Teraz to je potrebné upraviť inak.

Ďakujem za pomoc.

shaggy · Napísal **shaggy**: 31.05.2012 23:40

elo píše:

Nejde to inak vyriešiť?
Teraz to je potrebné upraviť inak.

Tak to uprav inak.

elo · Napísal autor témy **elo**: 01.06.2012 14:55

Kód:

Kód:

<style>         
#vm_jsemzamestnanec, #1 {display:none;}
</style>

Ako to ID sem mozem vlozit?

Kód:

       echo '      <tr>' . "\n";
       echo '         <td class="key">' . "\n";
       echo '            <label class="' . $_field['name'] . '" for="' . $_field['name'] . '_field">' . "\n";
       echo '               ' . $_field['title'] . ($_field['required'] ? ' *' : '') . "\n";
       echo '            </label>' . "\n";
       echo '         </td>' . "\n";
       echo '         <td>' . "\n";
       echo '            ' . $_field['formcode'] . "\n";
       echo '         </td>' . "\n";
       echo '      </tr>' . "\n";

Dakujem.

Takto?

shaggy · Napísal **shaggy**: 01.06.2012 20:54

ID nemôže byť iba číslo.
Vložíš ho tam rovnako, ako napr. class, alebo atribút "for".

elo · Napísal autor témy **elo**: 01.06.2012 22:18

Kód:

<label class="' . $_field['name'] . '" for="' . $_field['name'] . '_field">' . "\n";
       echo '               ' . $_field['title'] . ($_field['required'] ? ' *' : '') . "\n";
       echo '            </label>' . "\n"; 

Skusal som ako som skusal nedari sa mi to ID sem vlozit.

To ID ale musi byt robene cez premennu, lebo ide o dynamicky web.

Moze to byt takto?

Kód:

' . $id['name'] . '

Dakujem.

shaggy · Napísal **shaggy**: 01.06.2012 23:50

Citácia:

Skusal som ako som skusal nedari sa mi to ID sem vlozit.

To je síce pekné, ale nikde v tom hornom kóde nevidím ani len náznak toho, že by si to skúšal. Daj sem to, čo si skúšal.

Citácia:

To ID ale musi byt robene cez premennu

To je logické, preto som ti napísal, že to vložíš rovnako, ako class alebo for.

Citácia:

Moze to byt takto?

Čo tak to skúsiť?

elo · Napísal autor témy **elo**: 02.06.2012 11:07

Kód:

<label class="' . $_field['name'] . '" for="' . $_field['name'] . '_field">' . ' . $id['name'] . '"\n";
       echo '               ' . $_field['title'] . ($_field['required'] ? ' *' : '') . "\n";
       echo '            </label>' . "\n";

Takto som skusal, priradit label-u ID ale nieco robim zle, lebo to neberie.

Som rad, ze mate trpezlivost.

Dakujem.

Ďuri · Napísal **Ďuri**: 02.06.2012 11:39

Otvor si v prehliadaci vygenerovany zdrojovy kod a pozri sa, co ti z toho vyliezlo.

elo · Napísal autor témy **elo**: 02.06.2012 11:55

Prave ze, zobrazi sa len vrch formularu a to co chcem upravovat tam vobec nieje a nezoberie ani CSS a nezobrazi ani zvysok webu.

Musel som to nekorektne vlozit - ID.

Dakujem.

shaggy · Napísal **shaggy**: 03.06.2012 23:43

Samozrejme, že si to "nekoretne" vložil.
Ja sa vôbec čudujem, že ten tvoj kód nevyhodil syntaktickú chybu, pretože ja tam chybu (s úvodzovkami/apostrofami) vidím.

elo · Napísal autor témy **elo**: 04.06.2012 9:32

Kód:

<label class="' . $_field['name'] . '" for="' . $_field['name'] . '_field" ID="' . $ID['name'] . '_field">' . "\n";
       echo '               ' . $_field['title'] . ($_field['required'] ? ' *' : '') . "\n";
       echo '            </label>' . "\n"; 

Takto to môže byť?

Dobre tam vkladám tento kód s ID?

Kód:

ID="' . $ID['name'] . '_field"

Ď.

shaggy · Napísal **shaggy**: 04.06.2012 18:28

Keď si pozrieš vygenerovaný html kód, máš tam to id?
Ak áno - vkladáš ho dobre.
Ak nie - nevkladáš ho dobre.

Kurňa, už sa nauč urobiť niečo sám, to máme robiť všetko za teba? Ak to takto pôjde ďalej, tak tú tému hodím tam, kam patrí.

elo · Napísal autor témy **elo**: 04.06.2012 22:06

Vystup HTML je:

Kód:

Nieje tam vidiet 'name'

Keby som to vedel, nepisal by som sem.

D.

// pridané po 49 minútach od posledného príspevku

Uz som to nasiel:

Kód:

<label class="' . $_field['name'] . '" for="' . $_field['name'] . '_field" ID="' . $_field['name'] . '_field">' . "\n";

Ako mam zavolat ID?

Takto ked to vlozim vm_spusobpredani_field nic sa nedeje:

Kód:

 <script type="text/javascript">
document.getElementById('vm_zrizenikarty_field').onclick = function(){  
    if (document.getElementById('vm_zrizenikarty_field').checked)
    {
      document.getElementById("vm_spusobpredani").style.display = "block";
      document.getElementById("vm_spusobpredani_field").style.display = "block";
    }
    else
    {
     document.getElementById("vm_spusobpredani").style.display = "none";
    document.getElementById("vm_spusobpredani_field").style.display = "none";     
    }
  }
</script>
       
<style>         
#vm_spusobpredani, #vm_spusobpredani_field {display:none;}
</style>

// pridané po 1 hodine 34 minútach od posledného príspevku

Uz sa to podarilo, konecne.

Hladal som tu vo fore sposob ako upravit kod, mrzi ma, ze ste to brali zle ale uz je to ok.

Dakujem.

elo · Napísal autor témy **elo**: 07.08.2012 19:59

Riesim podobnu vec tak nezakladam nove vlakno.

Po kliknuti na checkbox sa ma schovat a zase vysunut bocny panel.

Tu je kod:

Kód:

            
            <script type="text/javascript">
document.getElementById('schovaj').onclick = function(){ 

    if (document.getElementById('schovaj').checked)
    {
      document.getElementById("Mod1_div").style.display = "block";
    }
    else
    {
     document.getElementById("Mod1_div").style.display = "none";
    }
  }
</script> 

<style>         
#Mod1_div {display:none;}
</style> 

Volne vlozeny chechbox:

Kód:

Html:

Kód:

<div id="ja-container" class="wrap ja-r1 clearfix">
      <div id="ja-main-wrap" class="main clearfix">
         <div id="ja-main" class="clearfix">
                   
                                        
               
                     <div class="ja-moduletable ja-masonry moduletable_menu" id="Mod1">
      <div class="moduletable-inner clearfix">
                           <h3><span>Main Menu</span></h3>
                  <div class="ja-box-ct clearfix">
         
<ul class="menu">
<li class="item-101"><a href="/" >Home</a></li><li class="item-103 current active"><a href="/index.php/titul" >Titul</a></li></ul>
         </div>
      </div>
    </div>
     
               
                        
            
            
            
            <script type="text/javascript">
document.getElementById('schovaj').onclick = function(){ 

    if (document.getElementById('schovaj').checked)
    {
      document.getElementById("Mod1_div").style.display = "block";
    }
    else
    {
     document.getElementById("Mod1_div").style.display = "none";
    }
  }
</script> 

<style>         
#Mod1_div {display:none;}
</style> 

Checkbox zobrazi ale zatial nereaguje - skryt / zobrazit nefunguje.

Kde moze byt chyba?

D.

Ďuri · Napísal **Ďuri**: 07.08.2012 20:31

Mozes skusit pouzit Firebug (alebo ine vyvojarske nastroje pre svoj prehliadac) a pozriet sa do konzoly, aku chybu to hlasi, ale na prvy pohlad vidim, ze neexistuje ziadny element s id=schovaj. (Iba nejaky s name=schovaj, ale to IDcko sa samo od seba iba vdaka tomu nevymysli.)

elo · Napísal autor témy **elo**: 07.08.2012 21:00

Dakujem, opravil som to takto:

Kód:

ale stale to nejde.

Firebug vypise:

TypeError: document.getElementById("schovaj") is null
[Break On This Error]

document.getElementById('schovaj').onclick = function(){

ale "schovaj" je vlozene ako ID pri checkboxe

D.

Ďuri · Napísal **Ďuri**: 07.08.2012 23:01

V case behu skriptu este nemusi ony element existovat v strome dokumentu. Spusti svoj kod az po nacitani stranky, tj. udalost window.onload.

elo · Napísal autor témy **elo**: 08.08.2012 8:46

Uz to mam dakujem.

Ako spravit aby sa po nacitani stranky zobrazil modul - bez reakcie checkboxu? az ked kliknem nan az potom aby sa schoval?

D.