JS/ CSS/ PHP hidden/vissible bei checkbox

mathi77 · 31.01.2010

Hallo,

leider bin ich noch nicht so sattelfest in JavaScript und bitte um Eure Hilfe!

Gebe in meinem Formular mittels While-Schleife Daten von MySQL aus und dazu eine Checkbox. Diese Checkbox soll dann eine genaue Beschreibung aus der mysql tabelle aufrufen sobald angeklickt!
Leider funzt es nur immer beim 1. Datensatz

Muss ich noch was beachten? Danke im voraus & lg Mathi

Code:

<style type="text/css">
        #beschreibung_, #speichern_
        {
            visibility: hidden;
        }
    </style>
    
    <script type="text/javascript">
        function showHide()
        {
            if(document.getElementById('checkbox_').checked)
            {
                document.getElementById('beschreibung_').style.visibility = 'visible';
                document.getElementById('speichern_').style.visibility = 'visible';
            }
            else
            {
                document.getElementById('beschreibung_').style.visibility = 'hidden';
                document.getElementById('speichern_').style.visibility = 'hidden';
            }
        }
    </script>

PHP:

                $sql = "SELECT * FROM tbl_branchen ORDER BY branche ASC";
                $result = mysql_query($sql) or die("ERROR: ".mysql_error());
                while($data = mysql_fetch_array($result)){
                echo '<input type="checkbox" value="">&nbsp;'.$data['branche'].'</input><input class="button" type="submit" name="loeschen" id="loeschen" value="loeschen" onclick="Brancheloeschen('.$data['id_branche'].');"/>                    
                <input type="checkbox" name="checkbox_" id="checkbox_" onclick="showHide();"/><input type="text" name="beschreibung" / id="beschreibung_" value="'.$data['beschreibung'].'" ><input class="button" type="submit" name="speichern" id="speichern_" value="speichern"/>
                <br/>';
                }
                echo ('
                </fieldset>
                <input name ="neueBranche" id="neueBranche" type="text" value="" />
                <input type="checkbox" id="aktiv" name="aktiv[]" value=""/>&nbsp;aktiv
                <input class="button" type="submit" name="neu" id="neu" value="neu"/>

saila · 31.01.2010

AW: JS/ CSS/ PHP hidden/vissible bei checkbox

Code:

/**
* den Checkboxen musst du als id Attribut noch eine Laufvariable mitgeben.
* Bsp.: checkbox_1, checkbox_2 usw..
*/
$(document).ready(function() {
    $('#deinFormTagId input:checkbox').live('click', function() {
        var feldId = parseInt(this.id.replace('_',''));
        var ladeDatensatz = $(this).val();
        
        $.ajax({
            type: 'POST',
            url: 'url_und_datei_welche_die_db_abfragt', // in dieser Datei wird der Select ausgelöst und das Ergebnis in der Datei per echo ausgegeben
            data: selectDatas': ladeDatensatz, // das ist mit $_POST in der in "url" genannten Datei zu prüfen
            success: function(data) {
                if(data) {
                    // hier erfolgt die Ausgabe z.B. in eine div-Box
                    $('#ausgabe').html(data);
                    // oder in einen input-type text
                    $('#beschreibung_'+ feldId).val(data);
                } else {
                    // Hinweis bei einem Fehler
                    $('#error-box').html('Bitte prüfen oder alternativ eine Datei aufrufen um dem Admin eine Mail zu senden');
                }
            }
    });
});

mathi77 · 31.01.2010

AW: JS/ CSS/ PHP hidden/vissible bei checkbox

Danke saila für deine rasche Antwort!

Kann ich das ganze auch ohne ajax lösen?
Kenn mich in dem Gebiet gar nicht aus :-(

danke & lg Mathi

saila · 31.01.2010

AW: JS/ CSS/ PHP hidden/vissible bei checkbox

Du kannst - sofern das der Select zulässt die erforderlichen Daten für den click mit in die while geben und in eine Box legen, welche nicht angezeigt wird. Also css: display: none;

Bei click kannst du entweder den Inhalt der jeweiligen div-box in den input-tag übernehmen oder einfach nur die div-box wieder anzeigen lassen.

mathi77 · 31.01.2010

AW: JS/ CSS/ PHP hidden/vissible bei checkbox

irgendwie hab ich jetzt einen knoten im hirn :-(

damit ich jeder checkbox eine laufende id übergebe, nehme ich die id der mySql Datenbank.... somit eindeutig...

nur funzt es trotzdem nicht....wo bleib ich da hängen?

Code:

</script>

    <style type="text/css">
        #beschreibung_, #speichern_
        {
            visibility: hidden;
        }
    </style>
    
    <script type="text/javascript">
        function showHide(id)
        var beschreibung_ = 'beschreibung_'+id;
        var speichern_ = 'speichern_'+id;
        
        {
            if(document.getElementById('checkbox_').checked)
            {
                document.getElementById('beschreibung_').style.visibility = 'visible';
                document.getElementById('speichern_').style.visibility = 'visible';
            }
            else
            {
                document.getElementById('beschreibung_').style.visibility = 'hidden';
                document.getElementById('speichern_').style.visibility = 'hidden';
            }
        }
    </script>

PHP:

    while($data = mysql_fetch_array($result)){
                echo '<input type="checkbox" value="">&nbsp;'.$data['branche'].'</input><input class="button" type="submit" name="loeschen" id="loeschen" value="loeschen" onclick="Brancheloeschen('.$data['id_branche'].');"/>                    
                <input type="checkbox" id="checkbox_" name="checkbox_"  onclick="showHide('.$data['id_branche'].');"/>
                <input type="text" name="beschreibung" / id="beschreibung_'.$data['id_branche'].'" value="'.$data['beschreibung'].'" >
                <input type="submit" name="speichern" id="speichern_'.$data['id_branche'].'" value="speichern"/>
                <br/>';
                }

danke, lg Mathi

saila · 31.01.2010

AW: JS/ CSS/ PHP hidden/vissible bei checkbox

Hier fehlt zumindest mal die "id"

Code:

[COLOR=Black]
[/COLOR] [COLOR=Black]id="checkbox_" name="checkbox_"
[/COLOR]

sollte wohl eher:

Code:

[/COLOR][COLOR=Black]id="checkbox_'. [/COLOR][COLOR=Black]$data['id'][/COLOR][COLOR=Black] .'" name="checkbox_[/COLOR][COLOR=Black]'. [/COLOR][COLOR=Black]$data['id'][/COLOR][COLOR=Black] .'[/COLOR][COLOR=Black]"
[/COLOR]

lauten.

Für jQuery: Auf die Seite:

Bitte kostenlos registrieren, damit du die Links siehst.

gehen, download starten und das hier lesen:

Bitte kostenlos registrieren, damit du die Links siehst.

Am einfachsten die Datei jquery.js in den head einbinden und einen neue Datei erstellen wie z.B. "meinejs.js". In die meine.js wird dann folgendes eingetragen:

Code:

[/COLOR][/COLOR][/COLOR]
$.noConflict();
[COLOR=#000000][COLOR=#dd0000][COLOR=Black]
$(document).ready( function() {
 /**
  * hier die genannten Funktionen
 */
});

Es gibt unteranderem auch ein Tutorial hier bei PSD zum Thema jQuery.