If checkbox checked, definiere für value XYZ

**Floddr** · 05.04.2010, 13:38

Hallo!

Ich bin neu hier, da man mir in einem anderen Forum leider nicht helfen konnte. Ich habe von JS eigentlich keine Ahnung, aber gelegentlich muss man sich ja doch damit auseinandersetzen.

Der Titel deutet schon an, was ich vorhabe. Eigentlich einfach:
Ich habe mehrere Checkboxen. Wählt man eine, soll in einem Eingabefeld ein Text erscheinen. (Das Textfeld wird als 'hidden' definiert.)

PHP-Code:


<?php $BLABLIBLUB = "SUCHWORT"; ?>

Hiermit wird das Wort (ein Suchwort) für BLABLIBLUB definiert. Klar.

Code:

<script language="javascript" type="text/javascript">
<!--
if(document.adminForm.XYZ.checked == true){
    document.adminForm.metakey.value = '<?php echo $BLABLIBLUB; ?>';  
}
//-->

Wenn die entsprechende Checkbox (hier namens XYZ im Formular adminForm) gewählt ist, soll $BLABLIBLUB (im adminForm in dem Textfelt metakey für value) ausgegeben werden.

Code:

<input type="hidden" name="metakey" id="metakey">

Hier das Feld.

Das ganze funktioniert leider nicht.

Die Fehlerkonsole von FF gibt folgendes aus, wenn ich die Seite öffne:
"document.adminForm is undefined"

Dabei verweist FF auf die Zeile mit folgendem Inhalt:

PHP-Code:


if(document.adminForm.XYZ.checked == true){

Daraufhin hat man mir schon den Tipp gegeben, nachzuschauen, ob das Form wirklich adminForm heißt. Und, ja, so heißt es:

PHP-Code:


<form method="post" name="adminForm">

...



</form>

**the0bone** · 05.04.2010, 13:42

Bin zwar auch nicht DER Spezi auf dem Gebiet... aber versuch mal

PHP-Code:


<form method="post" name="adminForm" id="adminForm">

...



</form>

**Floddr** · 05.04.2010, 14:04

Nein, leider war's das nicht.

Hier der Code, den ich mal, so wie er ist probiert habe:

PHP-Code:


<form method="post" name="adminForm" id="adminForm">

<?php $BLABLIBLUB = "SUCHWORT"; ?>



        <script language="javascript" type="text/javascript">

<!--

if(document.adminForm.XYZ.checked == true){

    document.adminForm.metakey.value = '<?php echo $BLABLIBLUB; ?>';  

}

//-->

</script>



<input type="checkbox" name="XYZ" value="XYZ">





<input type="textarea" name="metakey" id="metakey">                       



</form>

Damit man's sieht, habe ich das Eingabefeld sichtbar gemacht und die Datei auf einen Übungsserver geladen (www.phplernen.bplaced.net/form.php).

**wildmieze** · 05.04.2010, 14:24

hmm .. ich bin auch nur Laie, aber Du könntest mal

Code:

if(document.forms["adminForm"].XYZ.checked == true){  
document.forms["adminForm"].metakey.value ="";

ausprobieren.

... oder - falls nicht zwingend nötig - die Angabe des Formulars ganz weglassen:

Code:

if(document.getElementById("XYZ").checked == true){  
document.getElementById("metakey").value ="";

evlt. hilft auch schon, wenn Du dem metakey vorab ein leeres value mitgibst - aber das passt dann nicht so ganz zur Fehlermeldung ..

EDIT: grad noch eingefallen: vielleicht bringt es auch was, wenn das script erst nach </form> aufgerufen wird? Vielleicht muss das Ding geschlossen werden, damit es erkannt wird .. *kratzamkopp* .. ok, ist n Schuss ins Blaue, aber möglich ist ja fast Alles

**webcreate** · 05.04.2010, 14:41

Bitte schön:

PHP-Code:


<?php $BLABLIBLUB = "SUCHWORT"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Form</title>
        <script language="javascript" type="text/javascript">
        /*<![CDATA[*/
            window.onload = function()
            {
                document.getElementById( 'XYZ' ).addEventListener( "click", showBox, true );
            }
            
            function showBox( evt ) 
            {
                var myField = document.getElementById( 'metakey' );
                if(evt.target.checked == true)
                {
                    myField.value = '<?php echo $BLABLIBLUB; ?>';
                    myField.style.visibility = 'visible';
                }
                else
                {
                    myField.value = '';
                    myField.style.visibility = 'hidden';
                }
            }
        /*<]]>*/
        </script>
    </head>
    <body>
            <input type="checkbox" name="XYZ" id="XYZ" value="XYZ" />
            <input type="text" name="metakey" id="metakey" style="visibility: hidden;"/>                
    </body>
</html>

**Floddr** · 05.04.2010, 14:49

VIELEN DANK!

Müssen die Informationen wirklich im HEAD stehen?
Wenn das nachher verbaut ist, würde ich das eher ungern so machen.

Und noch etwas: Das Textfeld soll nie erscheinen.

Dann kann ich vermutlich aus

Code:

 myField.style.visibility = 'visible';

einfach

HTML-Code:

 myField.style.visibility = 'hidden';

machen, oder?

Und noch eine letzte Frage.. (jaja, ich weiß^^):
Muss ich den Script für jeden Metakey (für jedes Suchwort) wiederholen?
Ich hätte dann nämlich MEHRERE Checkboxen und EIN verstecktes Textfeld, in denen die Suchbegriffe aufgelistet werden sollen. (Leerzeichen zwischen den Begriffen).

**webcreate** · 05.04.2010, 15:31

1. Das Script oben ist nicht Crossrowserkompatibel, nutze das Neue.
2. Warum Script nicht in den Header? Man sollte seinen Code logisch aufbauen.
3. Welchen Sinn hat es, ein Textfeld zu füllen, wenn es nie angezeigt wird? Nun sag nicht, es geht dir nur um einen zu übergebenden Wert ....

Das neue Script Arbeitet dann mit einem Array an Objekten und für jede Checkbox/Input muss nur ein neues Array-Element abgelegt werden.

PHP-Code:


<?php 
$value1 = "SUCHWORT"; 
$value2 = "SUCHWORT Nummer 2"; 
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Form</title>
        <script language="javascript" type="text/javascript">
        /*<![CDATA[*/
            window.onload = function()
            {
                var obj = new Array();
            
                obj[0] = document.getElementById( 'XYZ' );
                obj[0].kindNode = 'metakey';
                obj[0].kindValue = '<?php echo $value1; ?>'

                obj[1] = document.getElementById( 'ABC' );
                obj[1].kindNode = 'metakey2';
                obj[1].kindValue = '<?php echo $value2; ?>'

                for(n = 0; n < obj.length; n++)
                {
                    if(obj[n].addEventListener)
                    {
                        obj[n].addEventListener( "click", showBox, true );
                    }
                    else
                    {
                        obj[n].attachEvent("onclick", showBox );
                    }
                }
            }
            
            function showBox( evt ) 
            {
                if (!evt) var evt = window.event;
                if (evt.target) targ = evt.target;
                else if (evt.srcElement) targ = evt.srcElement;

                var myField = document.getElementById( targ.kindNode );
                if(targ.checked == true)
                {
                    myField.value = targ.kindValue;
                }
                else
                {
                    myField.value = '';
                }
            }
        /*<]]>*/
        </script>
    </head>
    <body>
            <input type="checkbox" name="XYZ" id="XYZ" value="XYZ" />
            <input type="text" name="metakey" id="metakey" style="visibility: hidden;"/> 
            <br />
            <input type="checkbox" name="ABC" id="ABC" value="1" />
            <input type="text" name="metakey2" id="metakey2" style="visibility: hidden;"/> 
    </body>
</html>

**Floddr** · 05.04.2010, 15:38

Vielen, vielen Dank.

Ab hier komme ich klar.

Das ganze ist Bestandteil eines Eintragsformulars in Joomla. Mit dem definiert man die Metakeys, die über das Suchformular (das ich ebenfalls entsprechend anpasse) dann suchen kann.
Die User sollen also nicht "SUCHWORT" eingeben. Sie sollen es nie zu sehen bekommen. Die wählen einfach ein Kästchen (oder aber auch mehrere) und klicken auf "Search".
Ich mache das bewusst nicht mit Kategorien und Bereichen, weil die bereits einem anderen Zweck dienen.
Das ganze ist zwar etwas komisch, vielleicht auch umständlich, aber es klappt.
Ich habe keine Lust tausende von Plugins zu installieren. Ich mag lieber Sachen, die ich verstehe (nur leider bin ich mit JS noch nicht so weit).

**webcreate** · 05.04.2010, 16:26

Nun hatte ich das ja noch anders, du wolltest ja nur ein Textfeld. Dies ist in JS noch etwas umständlicher,, hier mein Ansatz und nun habe ich keine Lust mehr.

PHP-Code:


<?php 
$value1 = "SUCHWORT"; 
$value2 = "SUCHWORT2"; 
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Form</title>
        <script language="javascript" type="text/javascript">
        /*<![CDATA[*/
            window.onload = function()
            {
                var obj = new Array();
            
                obj[0] = document.getElementById( 'XYZ' );
                obj[0].kindNode = 'metakey';
                obj[0].kindValue = '<?php echo $value1; ?>'

                obj[1] = document.getElementById( 'ABC' );
                obj[1].kindNode = 'metakey';
                obj[1].kindValue = '<?php echo $value2; ?>'

                for(n = 0; n < obj.length; n++)
                {
                    if(obj[n].addEventListener)
                    {
                        obj[n].addEventListener( "click", showBox, true );
                    }
                    else
                    {
                        obj[n].attachEvent("onclick", showBox );
                    }
                }
            }
            
            function showBox( evt ) 
            {
                if (!evt) var evt = window.event;
                if (evt.target) targ = evt.target;
                else if (evt.srcElement) targ = evt.srcElement;

                var myField = document.getElementById( targ.kindNode );
                var check = myField.value.split(" ");
                if(targ.checked == true)
                {
                    if(!in_array(targ.kindValue, check))
                    {
                        check.push(targ.kindValue);
                    }
                }
                else
                {
                    if(in_array(targ.kindValue, check))
                    {
                        for(n = 0; n < check.length; n++)
                        {
                            if(check[n] == targ.kindValue)
                            {
                                check.splice(n, 1);
                            }
                        }
                    }
                }
                var returnString = check.join(" ");
                myField.value = returnString;
            }

            function in_array( item, arr )
            {
                for(p=0;p<arr.length;p++) if (item == arr[p]) return true;
                return false;
            }
        /*<]]>*/
        </script>
    </head>
    <body>
            <input type="checkbox" name="XYZ" id="XYZ" value="XYZ" />
            <input type="checkbox" name="ABC" id="ABC" value="1" />
            <br />
            <input type="text" name="metakey" id="metakey" style="visibility: hidden;"/> 
    </body>
</html>

**janB** · 15.04.2010, 18:01

Hi,

ich habe diesen Beitrag über Yahoo gefunden, da ich vor einem ähnlichem Problem stehe. Folgendes Problem bei mir:

Ich habe 2 Radiobuttons, abhängig davon welcher RadioButtons ausgewählt wird soll ein DIV-Element angezeigt werden. Dies klappt soweit auch ganz gut, mit einem Hacken. Es funktioniert nur im Firefox. Der IE macht einfach nichts wenn man draufklickt. An Folgender Zeile hat er zu mäkeln:

Code:

document.getElementById( 'XYZ' ).addEventListener( "click", showBox, true );

Fehlermeldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht

Hat jemand eine Idee wie ich das lösen könnte ? Denn ohne IE Kompatibilität nützt mir das ganze leider wenig

Gruß Jan

**webcreate** · 15.04.2010, 21:28

Man könnte sich mal mein Script anschauen (und versuchen zu verstehen !!) und dann erkennen, dass da ein Lösungsansatz für Crossbrowserkompatibilität enthalten ist ...

zur Startseite vom TP

Thema: If checkbox checked, definiere für value XYZ

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

If checkbox checked, definiere für value XYZ

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

input type="radio" - checked wieder 'unchecken'?

Wenn radiobutton checked -> Inputfeld deaktivieren

Checkbox nur eine von zwei checked

Gegenstueck von checked???

automatisches "checked" bei Radio-Buttons

Aktive Benutzer

Aktive Benutzer

Berechtigungen