Radio-Buttons - mit Textfeld kombiniert - variabel prüfen

H

hallowelt

Grünschnabel
Hallo,

ich suche für folgenden HTML-Code eine Javascript-Funktion:
Innerhalb eines Formulars existieren 3 Radio-Buttons einer Gruppe (Name:Typ1...Typ3) und ein Textfeld (Name:sonstiger Typ).
Der User soll entweder einen Typ per Radio-Button auswählen oder ins Textfeld einen weiteren Typ eingeben. Beides gleichzeitig darf nicht sein.
Jetzt kommt's:
sobald ins Textfeld etwas eingegeben wird, sollen automatisch nur die Radio-Buttons zurückgesetzt werden. Andersherum soll der Wert des Textfeldes zurückgesetzt werden, sobald der User einen Radio-Button auswählt.

Vielen Dank für die Hilfe!
Code: 
<form action="" method="post" name="mail">
<table width="340" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="170"><font size="2" ><u><b>Typ w&auml;hlen:</b></u> </font><font size="1">*</font></td>
<td width="170"></td>
</tr>
<tr>
<td width="170"><font size="2">- </font><font size="2">Typ A</font></td>
<td width="170"><input type="radio" name="Typ" value="Typ1"></td>
</tr>
<tr>
<td width="170"><font size="2">- </font><font size="2">Typ B</font></td>
<td width="170"><input type="radio" name="Typ" value="Typ1"></td>
</tr>
<tr>
<td width="170"><font size="2">- </font><font size="2">Typ C</font></td>
<td width="170"><input type="radio" name="Typ" value="Typ1"></td>
</tr>
<tr>
<td width="170">&nbsp;</td>
<td width="170">&nbsp;</td>
</tr>
<tr>
<td width="170"><font size="2">Sonstiger Typ:</font></td>
<td width="170"><input type="text" name="sonstiges" size="20" maxlength="100" tabindex="1"></td>
</tr>
</table>
</form>
 
Zuletzt bearbeitet von einem Moderator:
Code: 
<script type="text/javascript">

var oRadio3;

function checkC()
{
    if (oRadio3 == undefined) {
        oFormEl = window.document.forms['mail'].elements;
        for (i=0; i<oFormEl.length; i++) {
            if (oFormEl[i].type == 'radio') {
                if (oFormEl[i].value == 'Typ3') {
                    oRadio3 = oFormEl[i];
                }
            }
        }
    }

    oRadio3.checked = true;
}

function clearInput()
{
    window.document.forms['mail'].elements['sonstiges'].value = '';
}

</script>

[...]

<form action="" method="post" name="mail">
    <table width="340" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td width="170">
                <font size="2" ><u><b>Typ wählen:</b></u> </font><font size="1">*</font>
            </td>
            <td width="170"></td>
        </tr>
        <tr>
            <td width="170">
                <font size="2">- </font><font size="2">Typ A</font>
            </td>
            <td width="170">
                <input type="radio" name="Typ" value="Typ1" onclick="clearInput();">
            </td>
        </tr>
        <tr>
            <td width="170">
                <font size="2">- </font><font size="2">Typ B</font>
            </td>
            <td width="170">
                <input type="radio" name="Typ" value="Typ2" onclick="clearInput();">
            </td>
        </tr>
        <tr>
            <td width="170">
                <font size="2">- </font><font size="2">Typ C</font>
            </td>
            <td width="170">
                <input type="radio" name="Typ" value="Typ3">
            </td>
        </tr>
        <tr>
            <td width="170"> </td>
            <td width="170"> </td>
        </tr>
        <tr>
            <td width="170">
                <font size="2">Sonstiger Typ:</font>
            </td>
            <td width="170">
                <input type="text" name="sonstiges" size="20" maxlength="100" tabindex="1"
                       onkeydown="checkC();">
            </td>
        </tr>
    </table>
</form>

Man beachte die neuen Values der Radio Boxen.
Sollte aber nicht weiter stören ;)

Ps: Den Code ruhig in Codetags setzen.
 
Zuletzt bearbeitet von einem Moderator:
Hallo Herr Hofmann,
die Hälfte haben wir schon geschafft, super.

Was funktioniert?
Wenn ein Wert im Feld "Sonstiger Typ" eingetragen ist und der User lieber doch einen anderen Typ auswählen möchte, wird daraufhin der Value im Feld "sonstiger Typ" gelöscht.

Was fehlt?
Hat der User hingegen einen Typ ausgewählt und aktiviert auch noch das Feld "Sonstiger Typ", sollte der bereits ausgewählte Typ zurückgesetzt werden.
Dies funktioniert noch nicht.

Hinweis: die Values der drei auszuwählenden Typen dürfen sich nicht ändern, da dieser per PHP-Formmailer weitergeleitet werden!

VIelen Dank!

Anbei der komplette aktuelle Code:
Code: 
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title></title>
<script type="text/javascript">
<!--
var oRadio3;
function checkC()
{
    if (oRadio3 == undefined) {
        oFormEl = window.document.forms['mail'].elements;
        for (i=0; i<oFormEl.length; i++) {
            if (oFormEl[i].type == 'radio') {
                
            }
        }
    }

    oRadio3.checked = true;
}

function clearInput()
{
    window.document.forms['mail'].elements['sonstiges'].value = '';
}

//--></script>
</head>
<body bgcolor="#ffffff">
<form action="(EmptyReference!)" method="post" name="mail">
<table width="340" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="170">
<font size="2" ><u><b>Typ wählen:</b></u> </font><font size="1">*</font>
</td>
<td width="170"></td>
</tr>
<tr>
<td width="170">
<font size="2">- </font><font size="2">Typ A</font>
</td>
<td width="170">
<input type="radio" name="Typ" value="Typ1" onclick="clearInput();">
</td>
</tr>
<tr>
<td width="170">
 <font size="2">- </font><font size="2">Typ B</font>
</td>
<td width="170">
<input type="radio" name="Typ" value="Typ2" onclick="clearInput();">
</td>
</tr>
<tr>
<td width="170">
<font size="2">- </font><font size="2">Typ C</font>
</td>
<td width="170">
<input type="radio" name="Typ" value="Typ3"  onclick="clearInput();">
</td>
</tr>
<tr>
<td width="170"> </td>
<td width="170"> </td>
</tr>
<tr>
<td width="170">
<font size="2">Sonstiger Typ:</font>
</td>
<td width="170">
<input type="text" name="sonstiges" size="20" maxlength="100" tabindex="1" onkeydown="checkC();">
</td>
</tr>
</table>
</form>
</body>
</html>
 
Hat der User hingegen einen Typ ausgewählt und aktiviert auch noch das Feld "Sonstiger Typ", sollte der bereits ausgewählte Typ zurückgesetzt werden.
Dies funktioniert noch nicht.
Zum Vergrößern anklicken....
Hmm, da werd ich jetzt irgendwie nicht schlau draus.
Wenn der User einen anderen typ wählt, dann wird der vorher ausgewählte doch
automatisch deaktiviert?
Dafür ist doch das name-Attribut gedacht, oder verstehe ich da jetzt was falsch?

Hinweis: die Values der drei auszuwählenden Typen dürfen sich nicht ändern, da dieser per PHP-Formmailer weitergeleitet werden!
Zum Vergrößern anklicken....
Und was hast du dann von den Radio-Buttons?
Drei mal gleicher Name plus drei mal gleicher Value bringt dir genau eine PHP-
Variable:
Code: 
$_POST['Typ'] = 'Typ1';
Wäre nett, wenn du dein problem etwas genauer beschreiben würdest.
 
Hallo,

stimmt, die Values der drei Buttons haben irrtümlich denselben Wert. Ist ein Fehler meinerseits. Die sollen natürlich eindeutig sein.

Also: Folgende Situation stellt sich:
In meinem Formular soll der User grundsätzlich drei schon produzierte Produkte auswählen dürfen oder ein "sonstiges Produkt" eingeben. Mehr braucht dazu nicht gesagt werden. Wichtig ist fogendes:
Wer die Wahl hat, hat die Qual, heißt es. Der User könnte sich während seiner Wahl kurzfristig anders entscheiden. Und dabei soll er komfortabel unterstützt werden.
Fall 1: Er wählt zuerst ein Produkt aus den dreien aus, möchte jedoch nun doch ein sonstiges Produkt eingeben.
Dazu soll dann bei Aktivierung des Textfeldes die vorherige Auswahl gelöscht werden.
Fall 2: Genauso könnte er sich entscheiden, ein sonstiges Produkt einzugeben und später dann doch lieber ein vorgegebenes Produkt auszuwählen.
Dazu sollte bei Anwahl eines der Radio-Buttons der Wert aus dem Textfeld gelöscht werden.
Das ist alles.

Ich hoffe, mich jetzt besser ausgedrückt zu haben, sonst bitte melden!
Danke
 
Hmm, aber genau das macht das Script doch, oder nicht? (Es ist übrigens ge-
testet).

Dazu sollte bei Anwahl eines der Radio-Buttons
Zum Vergrößern anklicken....
Ok, das kannst du ändern, indem du den Teil hier (aus dem Input-Feld):
Code: 
onkeydown="checkC();"

// in den änderst:

onfocus="checkC();"
 
Hallo Herr Hofmann,

ich komme erst jetzt dazu, Ihren Vorschlag aufzunehmen.
Sobald im Browser das Feld "Sonstiger Typ" angeklickt wird, werden weiterhin nicht alle Radiobuttons zurückgesetzt, Typ 3 bleibt aktiviert. Es soll in diesem Fall jedoch keiner aktiviert sein!

Vielen Dank!

Anbei der von mir verwendete Code zum Editieren:
Code: 
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title></title>
<script type="text/javascript">
<!--
var oRadio3;

function checkC()
{
    if (oRadio3 == undefined) {
        oFormEl = window.document.forms['mail'].elements;
        for (i=0; i<oFormEl.length; i++) {
            if (oFormEl[i].type == 'radio') {
                if (oFormEl[i].value == 'Typ3') {
                    oRadio3 = oFormEl[i];
                }
            }
        }
    }

    oRadio3.checked = true;
}

function clearInput()
{
    window.document.forms['mail'].elements['sonstiges'].value = '';
}

//--></script>
</head>
<body bgcolor="#ffffff">
<form action="(EmptyReference!)" method="post" name="mail">
<table width="340" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="170">
<font size="2" ><u><b>Typ wählen:</b></u> </font><font size="1">*</font>
</td>
<td width="170"></td>
</tr>
<tr>
<td width="170">
<font size="2">- </font><font size="2">Typ A</font>
</td>
<td width="170">
<input type="radio" name="Typ" value="Typ1" onclick="clearInput();">
</td>
</tr>
<tr>
<td width="170">
<font size="2">- </font><font size="2">Typ B</font>
</td>
<td width="170">
<input type="radio" name="Typ" value="Typ2" onclick="clearInput();">
</td>
</tr>
<tr>
<td width="170">
<font size="2">- </font><font size="2">Typ C</font>
</td>
<td width="170">
<input type="radio" name="Typ" value="Typ3" onclick="clearInput();">
</td>
</tr>
<tr>
<td width="170"> </td>
<td width="170"> </td>
</tr>
<tr>
<td width="170">
<font size="2">Sonstiger Typ:</font>
</td>
<td width="170">
<input type="text" name="sonstiges" size="20" maxlength="100" tabindex="1" onfocus="checkC();">
</td>
</tr>
</table>
</form>
</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück