Enablen nach Eingabe

Web_spider · 1 September 2006

Hi Leutz

Ich bräuchte mal eure Hilfe:
Ich möchte dass in meinem Formular mein Abschick Button erst dann enabled wird, wenn der User alles Ausgefüllt hat. Ich habe hier mal was gecoded, klappt aber net :(

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
       <title>Registrierung</title>
<script language="javascript" type="text/javascript">
function beginn
{
var a = 1;
while ( a != 2 )
{
//Vorname
if (document.reg.vorname.value="")
{
    document.reg.abschicken.disabled="true";
}
else
{
    document.reg.abschicken.disabled="false";
}
//Nachname
if (document.reg.nachname.value="")
{
    document.reg.abschicken.disabled="true";
}
else
{
    document.reg.abschicken.disabled="false";
}
//Email
if (document.reg.email.value="")
{
    document.reg.abschicken.disabled="true";
}
else
{
    document.reg.abschicken.disabled="false";
}
//Email wdh
if (document.reg.emailwdh.value="")
{
    document.reg.abschicken.disabled="true";
}
else
{
    document.reg.abschicken.disabled="false";
}
//Passwort
if (document.reg.pass.value="")
{
    document.reg.abschicken.disabled="true";
}
else
{
    document.reg.abschicken.disabled="false";
}
//Passwort wdh
if (document.reg.passwdh.value="")
{
    document.reg.abschicken.disabled="true";
}
else
{
    document.reg.abschicken.disabled="false";
}
//Account
if (document.reg.accountname.value="")
{
    document.reg.abschicken.disabled="true";
}
else
{
    document.reg.abschicken.disabled="false";
}
//Kennung
if (document.reg.kennung.value="")
{
    document.reg.abschicken.disabled="true";
}
else
{
    document.reg.abschicken.disabled="false";
}
}
}
</script>
</head>
<body onload="document.reg.abschicken.disabled='true'; beginn();">
<form action="" method="post" name="reg">
    <table border="1" style="background-image: url('bgimages/mainbg.jpg'); border: 2px outset gold;">
        <tr>
            <td colspan="2" align="center"><b>Benutzerinformationen</b></td>
        </tr>
        <tr>
            <td width="200">Vorname: </td>
            <td><input type="text" name="vorname" id="vorname" size="30" tabindex="1" /></td>
        </tr>
        <tr>
            <td width="200">Nachname: </td>
            <td><input type="text" name="nachname" id="nachname" size="30" tabindex="2" /></td>
        </tr>
        <tr>
            <td width="200">Geburtsjahr: </td>
            <td><input type="text" name="gebjahr" id="gebjahr" size="10" tabindex="3" /></td>
        </tr>
        <tr>
            <td width="200">Email: </td>
            <td><input type="text" name="email" id="email" size="40" tabindex="4" /></td>
        </tr>
        <tr>
            <td width="200">Email (Wiederholung): </td>
            <td><input type="text" name="emailwdh" id="emailwdh" size="40" tabindex="5" /></td>
        </tr>
        <tr>
            <td width="200">Passwort: </td>
            <td><input type="text" name="pass" id="pass" size="30" tabindex="6" /></td>
        </tr>
        <tr>
            <td width="200">Passwort (Wiederholung): </td>
            <td><input type="text" name="passwdh" id="passwdh" size="30" tabindex="7" /></td>
        </tr>
        <tr>
            <td colspan="2" align="center"><b>Account Daten</b></td>
        </tr>
        <tr>
            <td width="200">Name des Accounts: </td>
            <td><input type="text" name="accountname" id="accountname" size="30" tabindex="8" /></td>
        </tr>
        <tr>
            <td width="200"><a href="" style="color: red;">Volk: </a></td>
            <td><select name="volk" tabindex="9"><option>Menschen</option>
            <option value="Zwerge">Zwerge</option>
            <option value="Elfen">Elfen</option>
            <option value="Orks">Orks</option>
            <option value="Untote">Untote</option>
            <option value="Dunkelelfen">Dunkelelfen</option>
            <option value="Elementare">Elementare</option>
            </select>
            &nbsp;&nbsp;&nbsp;<a href="#" style="color: red;">info</a>
            </td>
        </tr>
        <tr>
            <td width="200">Kennungsfrage: </td>
            <td><input type="text" name="a" id="a" size="30" value="Was &auml;rgert sie am meisten?" readonly="readonly" /><br />
                <b>Wichtig: Merken sie sich die Antwort.</b><br />
                <input type="text" name="kennung" id="kennung" tabindex="10" size="30" />
            </td>
        </tr>
        <tr>
            <td><input name="abschicken" type="button" onclick="document.reg.submit();" value="Abschicken" /></td>
            <td><input name="reset" type="reset" value="Reset" /></td>
        </tr>
    </table>
</form>
</body>
</html>

Hoffe auf Hilfe

mfg web_spider

Artemis · 1 September 2006

Mein Beispiel:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>Registrierung</title>
		<script language="javascript" type="text/javascript">
			function checkValidity()
			{
				with(document.reg)
				{
					if ((username.value != '') && (password.value != '') && (passwordrepetition.value != ''))
					{
						submit.disabled = '';
					}
					else
					{
						submit.disabled = 'disabled';
					}
				}
			}
		</script>
	</head>
	<body onload="javascript:document.reg.submit.disabled = 'disabled';">
		<form action="" method="post" name="reg">
			<p><label for="username">Benutzername:</label> <input type="text" id="username" onkeyup="javascript:checkValidity()" /></p>
			<p><label for="password">Passwort:</label> <input type="password" id="password" onkeyup="javascript:checkValidity()" /></p>
			<p><label for="passwordrepetition">Passwort (wiederholen):</label> <input type="password" id="passwordrepetition" onkeyup="javascript:checkValidity()" /></p>
			<p><input type="submit" id="submit" /> <input type="reset" id="reset" /></p>
		</form>
	</body>
</html>

Commodore · 1 September 2006

kannste mal nen beispiellink psoten? aber bei deinem code wird es warscheinlich so sein, dass sobald in der kennung was steht, der button nicht mehr disabled ist. ich rate dir, das in der richtung zu machen:

PHP:

function $(was){
return document.getElementById(was).value;
}
if( $('vorname') == "" || $('nachname') == "" || $('email') == ""){   
 //bei der if-abfrage alle teile reinschreiben.
document.reg.abschicken.disabled = true;
} else {
document.reg.abschicken.disabled = false;
}

dabie musst du nur an jedes inputfeld eine id übergeben, dann sollte es klappen, ahbs aber nicht vorher getestet ;-)

Web_spider · 4 September 2006

danke euch

Sry wegen Doppelpost.
Aber es klappt net :(
Hier mein quelltext:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
       <title>Registrierung</title>
        <script language="javascript" type="text/javascript">
            function checkValidity()
            {
                with(document.reg)
                {
                    if ((username.value != '') && (password.value != '') && (passwordrepetition.value != '') && (email.value != '') && (emailrepetition.value != '') && (secretquestion.value != ''))
                    {
                        submit.disabled = '';
                    }
                    else
                    {
                        submit.disabled = 'disabled';
                    }
                }
            }
        </script>
</head>
<body onload="document.reg.abschicken.disabled='true';">
<form action="" method="post" name="reg" id="reg">
    <table border="1" style="background-image: url('bgimages/mainbg.jpg'); border: 2px outset gold;">
        <tr>
            <td colspan="2" align="center"><b>Benutzerinformationen</b></td>
        </tr>
        <tr>
            <td width="200">Vorname: </td>
            <td><input type="text" name="vorname" id="vorname" size="30" tabindex="1" /></td>
        </tr>
        <tr>
            <td width="200">Nachname: </td>
            <td><input type="text" name="nachname" id="nachname" size="30" tabindex="2" /></td>
        </tr>
        <tr>
            <td width="200">Geburtsjahr: </td>
            <td><input type="text" name="gebjahr" id="gebjahr" size="10" tabindex="3" /></td>
        </tr>
        <tr>
            <td colspan="2" align="center"><b>Account Daten</b></td>
        </tr>
        <tr>
            <td width="200"><label for="username">Name des Accounts: </label></td>
            <td><input type="text" name="username" id="username" size="30" tabindex="4" onkeyup="javascript:checkValidity()" /></td>
        </tr>
        <tr>
            <td width="200"><a href="" style="color: red;">Volk: </a></td>
            <td><select name="volk" tabindex="5"><option>Menschen</option>
            <option value="Zwerge">Zwerge</option>
            <option value="Elfen">Elfen</option>
            <option value="Orks">Orks</option>
            <option value="Untote">Untote</option>
            <option value="Dunkelelfen">Dunkelelfen</option>
            <option value="Elementare">Elementare</option>
            </select>
            &nbsp;&nbsp;&nbsp;<a href="#" style="color: red;">info</a>
            </td>
        </tr>
                <tr>
            <td width="200"><label for="email">Email: </label></td>
            <td><input type="text" name="email" id="email" size="40" tabindex="6" onkeyup="javascript:checkValidity()" /></td>
        </tr>
        <tr>
            <td width="200"><label for="emailrepetition">Email (Wiederholung): </label></td>
            <td><input type="text" name="emailrepetition" id="emailrepetition" size="40" tabindex="7" onkeyup="javascript:checkValidity()" /></td>
        </tr>
        <tr>
            <td width="200"><label for="password">Passwort: </label></td>
            <td><input type="password" name="password" id="password" size="30" tabindex="8" onkeyup="javascript:checkValidity()" /></td>
        </tr>
        <tr>
            <td width="200"><label for="passwordrepetition">Passwort (Wiederholung): </label></td>
            <td><input type="password" name="passwordrepetition" id="passwordrepetition" size="30" tabindex="9" onkeyup="javascript:checkValidity()" /></td>
        </tr>
        <tr>
            <td width="200"><label for="secretquestion">Kennungsfrage: </label></td>
            <td><input type="text" name="secretquestionask" id="secretquestionask" size="30" value="Was &auml;rgert sie am meisten?" readonly="readonly" /><br />
                <b>Wichtig: Merken sie sich die Antwort.</b><br />
                <input type="text" name="secretquestion" id="secretquestion" tabindex="10" size="30" onkeyup="javascript:checkValidity()" />
            </td>
        </tr>
        <tr>
            <td><input name="abschicken" type="submit" tabindex="11" value="Abschicken" /></td>
            <td><input name="reset" type="reset" value="Reset" /></td>
        </tr>
    </table>
</form>
</body>
</html>

außerdem sagt er mir es sei nicht valide
http://css.superprovider.de/image125.JPG

Mod-Edit Doppelpost zusammengeführt (XraYSoLo)

Sry wegen Doppelpost.

nicht entschuldigen, forenregeln/funktionen lesen

Commodore · 4 September 2006

muss es nicht .diabled="true" bzw "false" heißen?

müsste eigentlich auch inner js-konsole zu sehen sein.

Web_spider · 5 September 2006

damit klappts aber auch net :(

Commodore · 5 September 2006

kannste dann mal nen beispiellink mit true und false posten?

Web_spider · 6 September 2006

http://css.superprovider.de/test.html
Das wäre ein Beispiel link, aber da wäre der Quelltext durcheinander, weil das halt Superprovider ist, die schieben dann ihren eigenen "Sch..." dazwischen und strukturieren den Quelltext um :'(

Hier ist der quelltext nochmal, wenn du ihn nicht si gut lesen kannst

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
       <title>Registrierung</title>
        <script language="javascript" type="text/javascript">
          function check()
            {
                if (document.reg.secretquestion.lenght < 5)
                  {
                      alert('Bitte geben sie eine längere Antwort auf die Frage -Was ärgert sie am meisten- ein. ' +document.reg.secretquestion.lenght+ 'Buchstaben sind zu wenig.');
                      document.reg.secretquestion.focus();
                      return false;
                  }
            }
          function checkValidity()
            {
                with(document.reg)
                {
                    if ((username.value != '') && (password.value != '') && (passwordrepetition.value != '') && (email.value != '') && (emailrepetition.value != '') && (secretquestion.value != ''))
                    {
                        document.reg.abschicken.disabled = 'false';
                    }
                    else
                    {
                        document.reg.abschicken.disabled = 'true';
                    }
                }
            }
        </script>
<?php
$systemerror = $HTTP_GET_VARS['error'];
if ($systemerror = "noconnect")
{
    print("<div style=\"height: 50px; width: 430px; border: 2px gold outset; background-color: red; color: white;\">\n<b>Systemfehler: </b>Keine Verbindung zur Datenbank konnte aufgebaut werden. &nbsp;&nbsp;<a href=\"#\">Gm's hier</a>&nbsp;&nbsp; <a href=\"#\">Kontakt</a>&nbsp;&nbsp; <a href=\"#\">Hilfe</a></div><br />\n");
}
else
{
    print("");
}
if ($systemerror = "nodb")
{
    print("<div style=\"height: 50px; width: 430px; border: 2px gold outset; background-color: red; color: white;\">\n<b>Systemfehler: </b>Keine Datenbank gefunden. Anmeldung konnte nicht vollbracht werden. &nbsp;&nbsp;<a href=\"#\">Gm's hier</a>&nbsp;&nbsp; <a href=\"#\">Kontakt</a>&nbsp;&nbsp; <a href=\"#\">Hilfe</a></div><br />\n");
}
else
{
    print("");
}
if ($systemerror = "nowrite")
{
    print("<div style=\"height: 55px; width: 430px; border: 2px gold outset; background-color: red; color: white;\">\n<b>Systemfehler: </b>Daten konnten nicht in die Datenbank geschrieben werden. Anmeldung konnte nicht vollbracht werden. &nbsp;&nbsp;<a href=\"#\">Gm's hier</a>&nbsp;&nbsp; <a href=\"#\">Kontakt</a>&nbsp;&nbsp; <a href=\"#\">Hilfe</a></div><br />\n");
}
else
{
    print("");
}
?>
</head>
<body onload="javascript: document.reg.abschicken.disabled='true'">
<form action="http://localhost/regwork.php" method="post" name="reg" id="reg">
    <table border="1" style="background-image: url('bgimages/mainbg.jpg'); border: 2px outset gold;">
        <tr>
            <td colspan="2" align="center"><b>Benutzerinformationen</b></td>
        </tr>
        <tr>
            <td width="200">Vorname: </td>
            <td><input type="text" name="vorname" id="vorname" size="30" tabindex="1" /></td>
        </tr>
        <tr>
            <td width="200">Nachname: </td>
            <td><input type="text" name="nachname" id="nachname" size="30" tabindex="2" /></td>
        </tr>
        <tr>
            <td width="200">Geburtsjahr: </td>
            <td><input type="text" name="gebjahr" id="gebjahr" size="10" tabindex="3" /></td>
        </tr>
        <tr>
            <td colspan="2" align="center"><b>Account Daten</b></td>
        </tr>
        <tr>
            <td width="200"><label for="username">Name des Accounts: </label></td>
            <td><input type="text" name="username" id="username" size="30" tabindex="4" onkeyup="javascript:checkValidity()" /></td>
        </tr>
        <tr>
            <td width="200"><a href="" style="color: red;">Volk: </a></td>
            <td><select name="volk" tabindex="5"><option>Menschen</option>
            <option value="Zwerge">Zwerge</option>
            <option value="Elfen">Elfen</option>
            <option value="Orks">Orks</option>
            <option value="Untote">Untote</option>
            <option value="Dunkelelfen">Dunkelelfen</option>
            <option value="Elementare">Elementare</option>
            </select>
            &nbsp;&nbsp;&nbsp;<a href="#" style="color: red;">info</a>
            </td>
        </tr>
                <tr>
            <td width="200"><label for="email">Email: </label></td>
            <td><input type="text" name="email" id="email" size="40" tabindex="6" onkeyup="javascript:checkValidity()" /></td>
        </tr>
        <tr>
            <td width="200"><label for="emailrepetition">Email (Wiederholung): </label></td>
            <td><input type="text" name="emailrepetition" id="emailrepetition" size="40" tabindex="7" onkeyup="javascript:checkValidity()" /></td>
        </tr>
        <tr>
            <td width="200"><label for="password">Passwort: </label></td>
            <td><input type="password" name="password" id="password" size="30" tabindex="8" onkeyup="javascript:checkValidity()" /></td>
        </tr>
        <tr>
            <td width="200"><label for="passwordrepetition">Passwort (Wiederholung): </label></td>
            <td><input type="password" name="passwordrepetition" id="passwordrepetition" size="30" tabindex="9" onkeyup="javascript:checkValidity()" /></td>
        </tr>
        <tr>
            <td width="200"><label for="secretquestion">Kennungsfrage: </label></td>
            <td><input type="text" name="secretquestionask" id="secretquestionask" size="30" value="Was &auml;rgert sie am meisten?" readonly="readonly" /><br />
                <b>Wichtig: Merken sie sich die Antwort.</b><br />
                <input type="text" name="secretquestion" id="secretquestion" tabindex="10" size="30" onkeyup="javascript:checkValidity()" />
            </td>
        </tr>
        <tr>
            <td><input name="abschicken" type="submit" tabindex="11" value="Abschicken" /></td>
            <td><input name="reset" type="reset" value="Reset" /></td>
        </tr>
    </table>
</form>
</body>
</html>

mfg web_spider

Commodore · 6 September 2006

da ist ja dieser teil mit dem with(), und da benutzt du auch noch document.reg drin, also müsste der versuchen auf document.reg.document.reg.abschicken zuzugreifen.

wenn das wegnehmen von dem document.reg vor dem abschicken.disableb nicht hilft, danmn versuch mal meinen code, vllt. klappts dann.

Web_spider · 6 September 2006

Hi Commodore
ich verstehe den Teil nicht, das mit dem get.ElemebtByID

PHP:

return document.getElementById(was).value;

Kannst du es mir erklären? nicht nur mit nem Link sondern so bitte

mfg web_spider

Commodore · 6 September 2006

also die funktion $ wird ja gestartet, und der wert der variable "was" wird übergebebn. dann wird mittels

document.getElementById(was).value;

der wert des jeweiligen inputs ausgelesen (musst den dafür aber ids geben). der wert wird dann mittels return zurückgegeben, und die funktion hat diesen wert dann. ist schlichtweg einfacher, und schneller als immer oducment.getElementById().value zu schreiben

Enablen nach Eingabe

Web_spider

Neues Mitglied

Artemis

Neues Mitglied

Commodore

Guest

Web_spider

Neues Mitglied

Commodore

Guest

Web_spider

Neues Mitglied

Commodore

Guest

Web_spider

Neues Mitglied

Commodore

Guest

Web_spider

Neues Mitglied

Commodore

Guest

Neueste Beiträge