Ergebnis 1 bis 7 von 7
  1. #1
    Conny80 ist offline Foren As
    registriert
    20-12-2005
    Beiträge
    95

    Textboxen abhängig von Textbox, Checkbox und Radiobuttons

    Hallo Leute,
    Ich hatte schon mal ein ähnliches Problem, jedoch hingen keine Zeilen an der Textbox und ich hatte nur Textboxen und keine Texte die ausgeblendet werden sollten. Kann mir hierbei vielleicht noch mal jemand helfen?

    Also:
    Ich habe eine Textbox in der die Anzahl der (getippte Positionen) eingegeben werden soll. Hiervon soll es abhängig sein, welche Zeilen bei aktiver Checkbox und aktivem Radiobutton[1] - (stufenweise) sichtbar sind. Außerdem soll der eingegebene Wert unten vor der Textbox (Fahrer in den Topp…) stehen. Ist der Radiobutton[0] - (exponentiell) aktiv, so sollen alle Textboxen der „Gruppe(stufenweise)“ ausgeblendet werden und nur ein Text erscheinen. Ist die Checkbox deaktiv, so soll das gerade ausgewählte disabled werden, bzw. der Text im style = disabled (z.B. grau).

    Das Problem:
    Was nun nicht geht ist das dauerhafte Ausblenden der Zeilen (Topp 6 in Reihenfolge) und (Topp 8 in Reihenfolge) in abhängigkeit von (getippte Positionen).

    Gruß Conny


    PHP-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
    <title>Beispiel</title> 
    <script type="text/javascript"> 
    <!-- 
    function Aktiv1 (knopf,a,b,c,d){
    frm=document.form1;
    box=frm.c2.checked;
    radio=frm.r2;
    d1=d2=true;
    zeig1=zeig2='';
    if(!knopf)knopf=radio[0].checked?radio[0]:radio[1];
    if(box)radio[0].disabled=radio[1].disabled=false;
    if(knopf==radio[0]){d1=false;zeig1='none';}
    if(knopf==radio[1]){d2=false;zeig2='none';}
    if(!box)d1=d2=radio[0].disabled=radio[1].disabled=true;

    if(knopf==radio[1])document.getElementById('B').style.display = 'none';
    else document.getElementById('B').style.display = '';
    if(!box)document.getElementById('B').style.color = 'gray'; 
    else document.getElementById('B').style.color = 'black';

    frm[a].disabled=frm[b].disabled=frm[c].disabled=frm[d].disabled=d2;

    frm[a].style.display
    =frm[b].style.display
    =frm[c].style.display
    =frm[d].style.display
    =frm[a].parentNode.parentNode.style.display
    =frm[b].parentNode.parentNode.style.display
    =frm[c].parentNode.parentNode.style.display
    =frm[d].parentNode.parentNode.style.display
    =zeig1;
    }

    function Wert(w)

        val=w.value; 
        d=val==''||Number(val)!=parseInt(val)||Number(val)<0?'none':'block'; 
        if(d=='none')
        { 
            alert('Bitte eine positive Ganzzahl eingeben.'); 
            w.select();
            w.focus();
        }


    function Positionen(p,a,b)

        val=p.value; 
        frm=document.form1;
        d=val==''||Number(val)!=parseInt(val)||Number(val)<3||Number(val)>8?'none':'block'; 
        
        if (val<6) t6='none'; else t6='';
        if (val<8) t8='none'; else t8='';
        frm[a].style.display = frm[a].parentNode.parentNode.style.display = t6;
        frm[b].style.display = frm[b].parentNode.parentNode.style.display = t8;
        if(d=='none')
        { 
            alert('Bitte Ganzzahl zwischen 3 und 8 eingeben.'); 
            p.select(); 
            p.focus();
        }
        else
        { 
        document.getElementById('topp').innerHTML=parseInt(val); 
        }

    //--> 
    </script> 
    </head>
    </html> 
    <body onload="Aktiv1(document.form1.r2[0],'topp3','topp6','topp8','voll');">
    <?php
    $topp 
    8;
    $pole 5$srunde 5$sieg 2$triple 8$imTipp 3$bonus 'expo';
    $topp3 8$topp6 16$topp8 32$voll 50;
    echo
    "
    <form name='form1' action='#'> 
    <table width='22%' border='1' cellspacing='1' cellpadding='1' align = 'center'>
        <tr>
            <td valign='top'>
                <table width='100%' border='0' cellspacing='1' cellpadding='1'>
                  <tr>
                    <td width='73%' rowspan='2' align = 'right'>getippte Positionen:</td>
                    <td width='17%' rowspan='2'>"
    ;?>
                            <input type='text' name='top' size='1' maxlength='1' style='text-align:right;' value='<?echo"$topp";?>' onblur="Positionen(this,'topp6','topp8')">
                            <?echo"
                        </td>
                </tr>
                <tr>
                      <td width='10%'>min.3 max.8<td>
                    </tr>
              </table>
        <hr>
          <table width='100%' border='0' cellspacing='1' cellpadding='1'>
                    <tr>
                        <td colspan='4'>"
    ;?>
                            <input type='checkbox' name='c2' 
                                onclick="Aktiv1(null,'topp3','topp6','topp8','voll');" 
                            <?if ($bonus=='stufen' OR $bonus=='expo') echo "checked"; echo">Bonus - System
                        </td>
                    </tr>
                    <tr>
                        <td colspan='2' width='50%'>"
    ;?>
                            <input type='radio' name='r2' 
                                onclick="Aktiv1(this,'topp3','topp6','topp8','voll');" 
                            <?if ($bonus=='expo' OR $bonus=='kein') echo "checked"; echo">exponentiell
                        </td>
                        <td colspan='2' width='50%'>"
    ;?>
                                                    <input type='radio' name='r2' 
                                onclick="Aktiv1(this,'topp3','topp6','topp8','voll')" 
                                onblur="Positionen(top,'topp6','topp8')"; <?echo">stufenweise
                        </td>
                    </tr>
                    <tr>    
                      <td colspan='4' align = 'center' id = 'B'>
                            Die Bonuspunkte werden:<br><b>2^(Richtige Fahrer in Reihenfolge)</b><br>von vorn berechnet.
                        </td>
                    </tr>
                    <tr>    
                      <td colspan='3' align = 'right'>
                            Topp 3 in Reihenfolge:
                        </td>
                      <td width='25%'>
                            <input type='text' name='topp3' size='1' maxlength='2' 
                                style='text-align:right;' value='
    $topp3' onblur='Wert(this)'>
                        </td>
                    </tr>
                    <tr>
                      <td align = 'right' colspan='3'>
                            Topp 6 in Reihenfolge:
                        </td>
                      <td width='25%'>
                            <input type='text' name='topp6' size='1' maxlength='2' 
                                style='text-align:right;' value='
    $topp6' onblur='Wert(this)'>
                        </td>
                    </tr>
                    <tr>
                      <td align = 'right' colspan='3'>
                            Topp 8 in Reihenfolge:
                        </td>
                      <td width='25%'>
                            <input type='text' name='topp8' size='1' maxlength='2' 
                                style='text-align:right;' value='
    $topp8' onblur='Wert(this)'>
                        </td>
                    </tr>
                    <tr>
                      <td align = 'right' colspan='3'>
                            kompletter Tipp:
                        </td>
                      <td width='25%'>
                            <input type='text' name='voll' size='1' maxlength='2' 
                                style='text-align:right;' value='
    $voll' onblur='Wert(this)'>
                        </td>
                    </tr>
                </table>
            <hr>
                <table width='100%' border='0' cellspacing='1' cellpadding='1'>
                    <tr>
                        <td align ='right'>
                            Fahrer in den Topp <span id='topp'>"
    .$topp."</span>:
                        </td>
                      <td>
                            <input type='text' name='text_field' size='1' maxlength='2' 
                                style='text-align:right;' value='
    $imTipp' onblur='Wert(this)'>Punkte
                        </td>
                    </tr>
                </table>
        </td>
      </tr>
    </table>
    </form> 
    "
    ;
    ?>
    Geändert von Conny80 (13-01-2006 um 07:00 Uhr)

  2. #2
    Conny80 ist offline Foren As
    registriert
    20-12-2005
    Beiträge
    95

    AW: Textboxen abhängig von Textbox, Checkbox und Radiobuttons

    Ich hoffe diesmal war mein Beitrag nicht zu ausführlich und/oder zu lang. Ich denke und hoffe, dass es für die nächste Zeit meine letze Frage sein wird.

  3. #3
    Avatar von Xardas
    Xardas ist offline Mitglied
    registriert
    20-12-2005
    Beiträge
    33

    AW: Textboxen abhängig von Textbox, Checkbox und Radiobuttons

    du kannst Texte nicht deaktivieren. Du kannst sie entweder unsichbar machen oder du machst sie grau, so dass es wie disabled aussieht.
    document.getElementById('B').style.color = 'gray'; //oder irgendein Grau
    Ich weiß, was du gerade liest

  4. #4
    Conny80 ist offline Foren As
    registriert
    20-12-2005
    Beiträge
    95

    AW: Textboxen abhängig von Textbox, Checkbox und Radiobuttons

    Ja Danke, das klappt schon mal:

    Code:
    if(!box)document.getElementById('B').style.color = 'gray'; 
    else document.getElementById('B').style.color = 'black';
    Un das ausblenden geht mit:

    Code:
    if (knopf==radio[1])document.getElementById('B').style.display = 'none';
    else 
    document.getElementById('B').style.display = '';
    Nun ist "nur noch" das ausblenden der Zeilen (Topp 6 in Reihenfolge:) und (Topp 8 in Reihenfolge:) in abhängigkeit von (getippte Positionen:). Das geht zur zeit zwar, aber nur wenn die Checkbox aktiv ist und der Radiobutton[1] gewählt ist, danach wirds aber wieder vergessen. Ich denke das hängt mit dem onload zusammen, nur weiß nicht wie man es anderes machen kann.

    Füge ich der Zeile:
    <input type='radio' name='r2' onclick="Aktiv1(this,'topp3','topp6','topp8','voll')";

    noch ein (onchange="Positionen(top,'topp6','topp8')";) an:

    also:
    <input type='radio' name='r2' onclick="Aktiv1(this,'topp3','topp6','topp8','voll')" onchange="Positionen(top,'topp6','topp8')";

    So funtioniert es fast, nur ist immer noch ein zusätzlicher Klick zur Aktualisierung nötig.

    Gruß Conny
    Geändert von Conny80 (13-01-2006 um 04:39 Uhr)

  5. #5
    Conny80 ist offline Foren As
    registriert
    20-12-2005
    Beiträge
    95

    AW: Textboxen abhängig von Textbox, Checkbox und Radiobuttons

    Habe nun

    Code:
    if (knopf==radio[1])document.getElementById('B').style.display = 'none';
    else document.getElementById('B').style.display = '';
    zu

    Code:
    if (knopf==radio[1]){document.getElementById('B').style.display = 'none'; frm[a].select();}
    else document.getElementById('B').style.display = '';
    ich habe aber immer noch einen Fehler, in dem Fall, dass (getippte Positionen) >= 6 ist und der Radiobutton[0] gewählt ist, dann werden nämlich die Zeile(n) (Topp 6 in Reihenfolge) ggf. (Topp 8 in Reihenfolge) unter den Text (Die Bonuspunkte werden...) geschrieben.

    Die Funktion sieht nun so aus:
    Code:
    function Aktiv1 (knopf,a,b,c,d){
    frm=document.form1;
    box=frm.c2.checked;
    radio=frm.r2;
    d1=d2=true;
    zeig1=zeig2='';
    if(!knopf)knopf=radio[0].checked?radio[0]:radio[1];
    if(box)radio[0].disabled=radio[1].disabled=false;
    if(knopf==radio[0]){d1=false;zeig1='none';}
    if(knopf==radio[1]){d2=false;zeig2='none';}
    if(!box)d1=d2=radio[0].disabled=radio[1].disabled=true;
    
    frm[a].disabled=frm[b].disabled=frm[c].disabled=frm[d].disabled=d2;
    
    frm[a].style.display
    =frm[b].style.display
    =frm[c].style.display
    =frm[d].style.display
    =frm[a].parentNode.parentNode.style.display
    =frm[b].parentNode.parentNode.style.display
    =frm[c].parentNode.parentNode.style.display
    =frm[d].parentNode.parentNode.style.display
    =zeig1;
    
    if (knopf==radio[1]){document.getElementById('B').style.display = 'none'; frm[a].select();}
    else document.getElementById('B').style.display = '';
    if(!box)document.getElementById('B').style.color = 'gray'; 
    else document.getElementById('B').style.color = 'black';
    }
    Kann nochmal jemand über der Quelltext sehen und mir sagen was ich verbessern oder ganz anders machen könnte?

    Gruß Conny

    PS: Hier nochmal der Quelltext als Ganzes.
    Angehängte Dateien Angehängte Dateien
    Geändert von Conny80 (13-01-2006 um 13:58 Uhr)

  6. #6
    Conny80 ist offline Foren As
    registriert
    20-12-2005
    Beiträge
    95

    AW: Textboxen abhängig von Textbox, Checkbox und Radiobuttons

    Hallo PIT, weißt Du auch keinen Rat, oder hast keine Lust? Ich hab jetzt echt vieles Probiert, komme aber nicht weiter. Bitte, bitte schau es Dir noch mal an und sag zumindest was falsch sein könnte. Wäre Dir sehr Dankbar.

    Conny

    PS: Werde auch vorerst keine weiteren Fragen stellen, da mir schon klar ist, dass Du auch anderes zu tun hast.

  7. #7
    Conny80 ist offline Foren As
    registriert
    20-12-2005
    Beiträge
    95

    AW: Textboxen abhängig von Textbox, Checkbox und Radiobuttons

    Ich habs

    Vielen, vielen Dank an Pit-r der mir eine große Hilfe war.

    Wünsche euch einen schönen Abend und ein schönes Wochenende.


    PHP-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    <
    html
    <
    head
    <
    meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"
    <
    title>Beispiel</title
    <
    script type="text/javascript"
    <!-- 
    function 
    Aktiv1 (knopf,a,b,c,d)
    {
    frm=document.form1;
    box=frm.c2.checked;
    radio=frm.r2;
    d1=d2=true;
    zeig1=zeig2='';
    if(!
    knopf)knopf=radio[0].checked?radio[0]:radio[1];
    if(
    box)radio[0].disabled=radio[1].disabled=false;
    if(
    knopf==radio[0]){d1=false;zeig1='none';}
    if(
    knopf==radio[1]){d2=false;zeig2='none';}
    if(!
    box)d1=d2=radio[0].disabled=radio[1].disabled=true;

    frm[a].disabled=frm[b].disabled=frm[c].disabled=frm[d].disabled=d2;

    frm[a].style.display
    =frm[b].style.display
    =frm[c].style.display
    =frm[d].style.display
    =frm[a].parentNode.parentNode.style.display
    =frm[b].parentNode.parentNode.style.display
    =frm[c].parentNode.parentNode.style.display
    =frm[d].parentNode.parentNode.style.display
    =zeig1;

    if (
    knopf==radio[1]){document.getElementById('B').style.display 'none'frm[a].select();}
    else 
    document.getElementById('B').style.display '';
    if(!
    box)document.getElementById('B').style.color 'gray'
    else 
    document.getElementById('B').style.color 'black';
    Positionen(frm.topp,'topp6','topp8');
    }

    function 
    Wert(w)

        
    val=w.value
        
    d=val==''||Number(val)!=parseInt(val)||Number(val)<0?'none':'block'
        if(
    d=='none')
        { 
            
    alert('Bitte eine positive Ganzzahl eingeben.'); 
            
    w.select();
            
    w.focus();
        }

    function 
    Positionen(p,a,b)

        
    val=p.value
        
    frm=document.form1;
        
    d=val==''||Number(val)!=parseInt(val)||Number(val)<3||Number(val)>8?'none':'block'
        
        if (!
    frm.r2[0].checked){
            if (
    val<6t6='none'; else t6='';
            if (
    val<8t8='none'; else t8='';
            
    frm[a].style.display t6;
            
    frm[b].style.display t8;
            
    frm[a].parentNode.parentNode.style.display t6;
            
    frm[b].parentNode.parentNode.style.display t8;
        }

        if(
    d=='none')
        { 
            
    alert('Bitte Ganzzahl zwischen 3 und 8 eingeben.'); 
            
    p.select(); 
            
    p.focus();
        }
        else
        { 
        
    document.getElementById('_topp').innerHTML=parseInt(val); 
        }

    //--> 
    </script> 
    </head>
    </html> 
    <body onload="Aktiv1(document.form1.r2[0],'topp3','topp6','topp8','voll');">

    <form name='form1' action='#'> 
    <table width='22%' border='1' cellspacing='1' cellpadding='1' align = 'center'>
        <tr>
            <td valign='top'>
                <table width='100%' border='0' cellspacing='1' cellpadding='1'>
                  <tr>
                    <td width='73%' rowspan='2' align = 'right'>getippte Positionen:</td>
                    <td width='17%' rowspan='2'>
                            <input type='text' name='topp' size='1' maxlength='1' style='text-align:right;' value='8' onblur="Positionen(this,'topp6','topp8')">
                        </td>
                </tr>
                <tr>
                      <td width='10%'>min.3 max.8<td>
                    </tr>
              </table>
        <hr>
          <table width='100%' border='0' cellspacing='1' cellpadding='1'>
                    <tr>
                        <td colspan='4'>
                            <input type='checkbox' name='c2' 
                                onclick="Aktiv1(null,'topp3','topp6','topp8','voll')"; checked>Bonus - System
                        </td>
                    </tr>
                    <tr>
                        <td colspan='2' width='50%'>
                            <input type='radio' name='r2' value='expo'
                                onclick="Aktiv1(null,'topp3','topp6','topp8','voll')"; checked>exponentiell
                        </td>
                        <td colspan='2' width='50%'>
                            <input type='radio' name='r2' value='stufen' 
                                onclick="Aktiv1(this,'topp3','topp6','topp8','voll')" 
                                onblur="Positionen(topp,'topp6','topp8')";>stufenweise
                        </td>
                    </tr>
                    <tr>    
                      <td colspan='4' align = 'center' id = 'B'>
                            Die Bonuspunkte werden:<br><b>2^(Richtige Fahrer in Reihenfolge)</b><br>von vorn berechnet.
                        </td>
                    </tr>
                    <tr>    
                      <td colspan='3' align = 'right'>
                            Topp 3 in Reihenfolge:
                        </td>
                      <td width='25%'>
                            <input type='text' name='topp3' size='1' maxlength='2' 
                                style='text-align:right;' value='1' onblur='Wert(this)' onclick='this.select()'>
                        </td>
                    </tr>
                    <tr>
                      <td align = 'right' colspan='3'>
                            Topp 6 in Reihenfolge:
                        </td>
                      <td width='25%'>
                            <input type='text' name='topp6' size='1' maxlength='2' 
                                style='text-align:right;' value='1' onblur='Wert(this)' onclick='this.select()'>
                        </td>
                    </tr>
                    <tr>
                      <td align = 'right' colspan='3'>
                            Topp 8 in Reihenfolge:
                        </td>
                      <td width='25%'>
                            <input type='text' name='topp8' size='1' maxlength='2' 
                                style='text-align:right;' value='1' onblur='Wert(this)' onclick='this.select()'>
                        </td>
                    </tr>
                    <tr>
                      <td align = 'right' colspan='3'>
                            kompletter Tipp:
                        </td>
                      <td width='25%'>
                            <input type='text' name='voll' size='1' maxlength='2' 
                                style='text-align:right;' value='1' onblur='Wert(this)' onclick='this.select()'>
                        </td>
                    </tr>
                </table>
            <hr>
                <table width='100%' border='0' cellspacing='1' cellpadding='1'>
                    <tr>
                        <td align ='right'>
                            Fahrer in den Topp <span id='_topp'>1</span>:
                        </td>
                      <td>
                            <input type='text' name='imTipp' size='1' maxlength='2' 
                                style='text-align:right;' value='1' onblur='Wert(this)' onclick='this.select()'>Punkte
                        </td>
                    </tr>
                </table>
        </td>
      </tr>
      <tr>
          <td align ='center'>
              <input type='submit' name='Submit'>
          </td>
      </tr>
    </table>
    </form> 
    Gruß Conny
    Geändert von Conny80 (13-01-2006 um 23:01 Uhr)

Ähnliche Themen

  1. Textboxen abhängig von Checkbox und Radiobuttons
    Von Conny80 im Forum JavaScript
    Antworten: 19
    Letzter Beitrag: 12-01-2006, 13:30
  2. Checkbox auf false setzen??
    Von mavebox im Forum JavaScript
    Antworten: 12
    Letzter Beitrag: 19-10-2005, 13:56
  3. checkbox aktivieren/deaktivieren
    Von mavebox im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 08-07-2005, 18:15

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •