Registrieren | Einloggen
Suche | FAQ


Autor Thema: JavaScript Frage
=GXR=Viper
styles/dream_in_blue.css
=GXR=
********
ID # 565



Beiträge: 652
Mitglied seit: November 2011

Erstellt am 18. Juli 2012 15:53 (#1) Zitat E-Mail PN
Hallöchen, :hallo:

ich sitze gerade an einem Formular, welches ich in eine eigene Website einbinden will. Dieses Formular soll mit Hilfe von JavaScript auf fehlerhafte oder falsche eingaben überprüft werden. Die Befehle in JavaScript lauten hierzu wiefolgt:

function chkFormular () {
if (document.Formular.User.value == "") {
alert("Bitte geben Sie ihren Namen ein! ");
document.Formular.User.focus();
return false;
}
if (document.Formular.Ort.value == "") {
alert("Bitte geben Sie ihren Wohnort ein!");
document.Formular.Ort.focus();
return false;
}
if (document.Formular.Mail.value == "") {
alert("Bitte geben Sie ihre E-Mail-Adresse ein!");
document.Formular.Mail.focus();
return false;
}
if (document.Formular.Mail.value.indexOf("@") == -1) {
alert("Fehlerhafte E-Mail-Adresse!");
document.Formular.Mail.focus();
return false;
}
if (document.Formular.Alter.value == "") {
alert("Bitte geben Sie ihr Alter ein!");
document.Formular.Alter.focus();
return false;
}
var chkZ = 1;
for (i = 0; i < document.Formular.Alter.value.length; ++i)
if (document.Formular.Alter.value.charAt(i) < "0" ||
document.Formular.Alter.value.charAt(i) > "9")
chkZ = -1;
if (chkZ == -1) {
alert("Altersangabe muss eine Zahl sein!");
document.Formular.Alter.focus();
return false;
}
}

Wenn ich nun das Formular auf der Seite fehlerhaft ausfülle, öffnet sich immer diese Warnmeldung:


(Hier im Feld Email adresse, weil ich diese Fehlerhaft angegeben habe. Wenn ich zum Beispiel keinen Namen angebe, dann kommt: Bitte Namen eingeben)

Nun zu meiner Frage:
Wie kann ich ändern dass kein pop up erscheint, sondern die Warnmeldung in roter Schrift und Fett geschrieben hinter dem jeweiligen Feld steht, welches Fehlerhaft eingetragen wurde?

P.S. ich bin nicht gerade der beste in JavaScript, also bitte mit erklärung für die dummen xD
Posting © =GXR=Viper 2013. Alle Rechte vorbehalten. Kein Verwenden, Zitieren und Kritisieren ohne Erlaubnis. :D



God save the screen... ;)
=GXR=Silver92
styles/grau.css
=GXR=
******
ID # 244



-495-402-076

Beiträge: 895
Mitglied seit: Februar 2008

Erstellt am 18. Juli 2012 18:44 (#2) Zitat E-Mail PN
Dann brauchst du was anderes als alert. Da ich JavaScript nur lesen kann (selber noch nie wirklich gemacht, aber der Syntax ist ja nicht schwer) kann ich dir auch nicht wirklich helfen.
Wenn ich Probleme beim Programmieren habe, dann google ich einfach danach :)

Ich denke, da muss dann wieder HTML Code rein, anstelle von der alert Funktion/Methode. Bei HTML kannst du ja den Text in irgendeinem Format irgendwo auf die Website klatschen. Ich würds jedenfalls so machen.

Porsche Carrera GT <3
Koenigsegg CCXRE <3
GXRdrago
Co-Clan Leader
=GXR=
**********
ID # 13



Beiträge: 2217
Mitglied seit: Juni 2003

Erstellt am 18. Juli 2012 20:31 (#3) Zitat E-Mail PN
hab mal eine weitere funktion hinzugefügt, die den inhalt eines html-elemtes ändert. das element hat den namen "Fehler"
function anzeigen(_Text)
{
document.getElementById('Fehler').innerHTML=_Text;
}

function chkFormular () {
if (document.Formular.User.value == "") {
anzeigen("Bitte geben Sie ihren Namen ein! ");
document.Formular.User.focus();
return false;
}
if (document.Formular.Ort.value == "") {
anzeigen("Bitte geben Sie ihren Wohnort ein!");
document.Formular.Ort.focus();
return false;
}
if (document.Formular.Mail.value == "") {
anzeigen("Bitte geben Sie ihre E-Mail-Adresse ein!");
document.Formular.Mail.focus();
return false;
}
if (document.Formular.Mail.value.indexOf("@") == -1) {
anzeigen("Fehlerhafte E-Mail-Adresse!");
document.Formular.Mail.focus();
return false;
}
if (document.Formular.Alter.value == "") {
anzeigen("Bitte geben Sie ihr Alter ein!");
document.Formular.Alter.focus();
return false;
}
var chkZ = 1;
for (i = 0; i < document.Formular.Alter.value.length; ++i)
if (document.Formular.Alter.value.charAt(i) < "0" ||
document.Formular.Alter.value.charAt(i) > "9")
chkZ = -1;
if (chkZ == -1) {
anzeigen("Altersangabe muss eine Zahl sein!");
document.Formular.Alter.focus();
return false;
}
}


ein dummy-html dokument:

<html>
<!-- bla bla .. js einbinden .. bla bla -->
<body>
<!-- bla bla -->
<div name="Fehler"></div>
<!-- bla bla -->
</body>
</html>

Wer nicht über die Zukunft nachdenkt, wird keine haben.
=GXR=Viper
styles/dream_in_blue.css
=GXR=
********
ID # 565



Beiträge: 652
Mitglied seit: November 2011

Erstellt am 19. Juli 2012 13:11 (#4) Zitat E-Mail PN
Cool danke :top:

Wenn ich das richtig sehe müssen die einzelnen Eintragefenster dann in den div Fehler oder?
Posting © =GXR=Viper 2013. Alle Rechte vorbehalten. Kein Verwenden, Zitieren und Kritisieren ohne Erlaubnis. :D



God save the screen... ;)
GXRdrago
Co-Clan Leader
=GXR=
**********
ID # 13



Beiträge: 2217
Mitglied seit: Juni 2003

Erstellt am 19. Juli 2012 16:39 (#5) Zitat E-Mail PN
Da bist du eigentlich frei in der Gestaltung. Damit Beispiel läuft muss irgendein Tag, dass mit Inhalt versehen werden kann (div, td, span, p, i, b, u, usw.) den passenden Namen als Attribut haben.

Wer nicht über die Zukunft nachdenkt, wird keine haben.
=GXR=Viper
styles/dream_in_blue.css
=GXR=
********
ID # 565



Beiträge: 652
Mitglied seit: November 2011

Erstellt am 19. Juli 2012 17:38 (#6) Zitat E-Mail PN
Hmm danke für den Tip aber irgentwie funktioniert des ganze nicht so... Hier mal das HTML doc.: (gekürzt)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"[url]http://www.w3.org/TR/html4/loose.dtd"[/url];>



<hmtl>

<head>

<title>Bewerbungsformular</title>

<link rel="stylesheet" type="text/css" href="style.css">

<!--JavaScript für Formularüberprüfung-->

<script type="text/javascript">

function anzeigen(_Text)

{

document.getElementById('content').innerHTML=_Text;

}



function chkFormular () {

if (document.Formular.Vorname.value == "") {

anzeigen("Bitte geben Sie ihren Namen ein! ");

document.Formular.User.focus();

return false;

}

if (document.Formular.Ort.value == "") {

anzeigen("Bitte geben Sie ihren Wohnort ein!");

document.Formular.Ort.focus();

return false;

}

if (document.Formular.Mail.value == "") {

anzeigen("Bitte geben Sie ihre E-Mail-Adresse ein!");

document.Formular.Mail.focus();

return false;

}

if (document.Formular.Mail.value.indexOf("@") == -1) {

anzeigen("Fehlerhafte E-Mail-Adresse!");

document.Formular.Mail.focus();

return false;

}

if (document.Formular.Alter.value == "") {

anzeigen("Bitte geben Sie ihr Alter ein!");

document.Formular.Alter.focus();

return false;

}

var chkZ = 1;

for (i = 0; i < document.Formular.Plz.value.length; ++i)

if (document.Formular.Plz.value.charAt(i) < "0" ||

document.Formular.Plz.value.charAt(i) > "9")

chkZ = -1;

if (chkZ == -1) {

anzeigen("Altersangabe muss eine Zahl sein!");

document.Formular.Plz.focus();

return false;

}

}



if(document.vorlageform.gebtag.value < 1 || document.vorlageform.gebtag.value > 31)

{

alert("Der eingetragene Geburtstag ist nicht gültig!");

document.vorlageform.gebtag.focus();

return false;

}

chkZ = 0;

for(i=0;i<document.vorlageform.gebtag.value.length;++i)

if(document.vorlageform.gebtag.value.charAt(i) < "0" || document.vorlageform.gebtag.value.charAt(i) "9")

chkZ = -1;

if(chkZ == -1)

{

alert("Der eingetragene Geburtstag ist nicht gültig!");

document.vorlageform.gebtag.focus();

return false;

}

if(document.vorlageform.gebmon.value < 1 || document.vorlageform.gebmon.value > 12)

{

alert("Der eingetragene Geburtsmonat ist nicht gültig!");

document.vorlageform.gebmon.focus();

return false;

}

chkZ = 0;

for(i=0;i<document.vorlageform.gebmon.value.length;++i)

if(document.vorlageform.gebmon.value.charAt(i) < "0" ||

document.vorlageform.gebmon.value.charAt(i) > "9")

chkZ = -1;

if(chkZ == -1)

{

alert("Der eingetragene Geburtsmonat ist nicht gültig!");

document.vorlageform.gebmon.focus();

return false;

}

if(document.vorlageform.gebjahr.value < 1900 ||

document.vorlageform.gebjahr.value > 2001)

{

alert("Das eingetragene Geburtsjahr ist nicht gültig!");

document.vorlageform.gebjahr.focus();

return false;

}

chkZ = 0;

for(i=0;i<document.vorlageform.gebjahr.value.length;++i)

if(document.vorlageform.gebjahr.value.charAt(i) < "0" ||

document.vorlageform.gebjahr.value.charAt(i) > "9")

chkZ = -1;

if(chkZ == -1)

{

alert("Das eingetragene Geburtsjahr ist nicht gültig!");

document.vorlageform.gebjahr.focus();

return false;

}

return true;

}

</script>

<!--Ende Formularüberprüfung-->

</head>

.
.
.
<body>
<div id="content">
<form name="Formular" action=""

method="post" onsubmit="return chkFormular()">

<pre>

<tr><td>Name:</td><td> <input type="text" size="40" name="Vorname"></td></tr>

<tr><td>Zuname:</td><td> <input type="text" size="40" name="Nachname"></td></tr>

<tr><td>Geburtstag:</td><td>

<input name="gebtag" size="2" maxlength="2" value="TT">

<input name=="gebmon" size="2" maxlength="2" value="MM">

<input name=="gebjahr" size="4" maxlength="4" value="JJJJ">


</td></tr>

<tr><td>Plz.:</td><td> <input type="text" size="5" name="Plz"></td></tr>

<tr><td>Wohnort:</td><td> <input type="text" size="40" name="Ort"></td></tr>

<tr><td>Stra&szlig;e:</td><td><input type="text" size="40" name="street"></td></tr>

<tr><td>Hausnummer:</td><td><input type="text" size="5" name="number"></td></tr>

<tr><td>E-Mail:</td><td> <input type="text" size="40" name="Mail"></td></tr>

<tr><td>Telefon:</td><td> <input type="text" size="40" name="phone"></td></tr>

<tr><td>Option:</td><td><select name="Instrument" size=1>

<option>Option 1</option>

<option>Option 2</option>

<option>Option 3</option>

<option>Option 4</option>

<option>Option 5</option>

<option>Option 6</option>

<option>Option 7</option>

<option>Option 8</option>

<option>Option 9</option>

<option>Option 10</option>

</select></td></tr>

<tr><td>Formular:</td><td> <input type="submit" value="Absenden"><input type="reset" value="Abbrechen"></td></tr></table></p>



<p>Zum Absenden muss eine Internet-Verbindung bestehen!</p>

</pre>

</form>

</div>
</body>
</html>
GXRdrago
Co-Clan Leader
=GXR=
**********
ID # 13



Beiträge: 2217
Mitglied seit: Juni 2003

Erstellt am 19. Juli 2012 18:47 (#7) Zitat E-Mail PN
da sind ein paar fehler im script, die ich dir jetzt auch nicht verrate :bäh:

ich empfehle dir, das formular und die testfunktion auf ein element zu reduzieren, da zu prüfen, das nächste einbauen, prüfen usw.

viel spass :rock:

Wer nicht über die Zukunft nachdenkt, wird keine haben.
=GXR=Silver92
styles/grau.css
=GXR=
******
ID # 244



-495-402-076

Beiträge: 895
Mitglied seit: Februar 2008

Erstellt am 19. Juli 2012 19:02 (#8) Zitat E-Mail PN
yep immer schön eins zum laufen bringen, dann das zweite usw. viel besser und schneller. und du sparst dir die unnötige mühe jedes mal die gleiche änderung 10x vorzunehmen. ;)

Porsche Carrera GT <3
Koenigsegg CCXRE <3
=GXR=Viper
styles/dream_in_blue.css
=GXR=
********
ID # 565



Beiträge: 652
Mitglied seit: November 2011

Erstellt am 19. Juli 2012 19:07 (#9) Zitat E-Mail PN
Zitat von =GXR=Silver92:
yep immer schön eins zum laufen bringen, dann das zweite usw. viel besser und schneller. und du sparst dir die unnötige mühe jedes mal die gleiche änderung 10x vorzunehmen. ;)


Das muss ich jetzt trotzdem machen :hammer:

Naja dann hab ich am Wochenende was zu tun ;) :rofl:
Posting © =GXR=Viper 2013. Alle Rechte vorbehalten. Kein Verwenden, Zitieren und Kritisieren ohne Erlaubnis. :D



God save the screen... ;)
=GXR=Viper
styles/dream_in_blue.css
=GXR=
********
ID # 565



Beiträge: 652
Mitglied seit: November 2011

Erstellt am 21. Juli 2012 16:49 (#10) Zitat E-Mail PN
Soo hab mal an dem formular gearbeitet und hab mich auf ein Stink normales Kontaktformular reduziert. Ich hab nun mal geschaut ob der Webserver auf den das Formular hochgeladen wird PHP unterstützt und das tut er. So: nun will ich dass das Formular als mail über PHP verschickt wird. Wenn ich jetzt das Formular ausfülle (ich habs noch nicht hochgeladen) und auf abschicken klicke, wird es über JavaScript überprüft, es kommt aber nicht bei meiner email an. Kann das damit zusammen liegen, dass ich die seite noch nicht hochgeladen hab?

Hier mal die PHP datei:

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Anfrage wurde gesendet!</title>
</head>

<body>
<center>
<?PHP


// hier werden die ganzen felder für die mail definiert.
$text.="Name: $_POST[name]\n";
$text.="Adresse: $_POST[adress]\n";
$text.="Land: $_POST[land]\n";
$text.="E-Mail: $_POST[email]\n";
$text.="Nachricht: $_POST[nachricht]\n";

// hier werden die ganzen felder für die meldung nach dem senden definiert.
$vorname="Name: $_POST[name]\n";
$strasse="Adresse: $_POST[adress]\n";
$land="Land: $_POST[land]\n";
$email="E-Mail: $_POST[email]\n";
$anfrage="Nachricht: $_POST[nachricht]\n";

// hier findet man die mail Zeile mit der Adresse an die der Inhalt des Formulars gesendet wird.
mail("gxrviper@web.de","Kontaktformular von Viper",$text);

// hier schreibt man die Ausgabemeldungen die der Benutzer nach dem senden der Mail in seinem

Browser angezeigt bekommt.
echo "Vielen Dank für ihre Nachricht!<br><br>";
echo "Ihre Angaben wurden an uns übermittelt!<br><br><br>";

// hier schreibt man die Ausgabemeldungen die der Benutzer nach dem senden der Mail in seinem

Browser angezeigt bekommt.

echo "$name<br>";
echo "$adress<br>";
echo "$land<br>";
echo "$email<br>";
echo "$nachricht<br><br><br>";


?>
<a href="javascript:history.back()">zurück zum Formular</a>
</center>
</body>
</html>


Seht ihr da irgentwo einen fehler?
Posting © =GXR=Viper 2013. Alle Rechte vorbehalten. Kein Verwenden, Zitieren und Kritisieren ohne Erlaubnis. :D



God save the screen... ;)