Submit Button funktioniert nach Javascript Aktion nicht mehr
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
apache
beispiel
benutzen
code
dank
date
email
form
formular
modus
optional register
paar
post
richtigen modus
schau
standard
tun
url
versuch
weglassen
-
Hi, ich mache mit Javascript eine Abfrage ob in einem Formular alle Felder ausgefüllt sind. Wenn dies der Fall ist kann man den Submit button betätigen, aber wenn ich ihn anklicke passiert nichts, woran liegt das ?
Javascript:
$(document).ready(function() { $("#form").submit(function() { $.post("register_account.php", function() { $("#form").animate( { opacity:0 }, 500, function() { document.getElementById("form").innerHTML='You‘ve been registered succesfully<br>Now you can log in'; $("#form").animate({opacity:1}); }); }); return false; }); }); function field() { var name = document.getElementById("name").value; var password = document.getElementById("password").value; var pw_repeat = document.getElementById("pw_repeat").value; if(name == "" | password != pw_repeat| password == "" | pw_repeat == "") { document.getElementById("submit_register").innerHTML='<input type="submit" value="Register"style="border:1px solid black; font-family:Avantgarde; font-size:16px; opacity:0.5;">'; } else { document.getElementById("submit_register").innerHTML='<input type="submit" value="Register">'; } } setInterval(field, 5);
HTML:
<form id="form" method="post"> *Name: <input type="text" name="name" id="name" autocomplete="off"><br> *Password: <input type="password" name="password" id="password"><br> *Repeat Password:<input type="" name="pw_repeat" id="pw_repeat"><br> Email Adress (optional): <input type="text" name="email"><br> <div id="submit_register"><input type="submit" value="Register" style="border:1px solid black; font-family:Avantgarde; font-size:16px;"></div> </form> -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hiho,
versuchs mal wie folgt:
<div id="main"> <form id="form" method="post"> <label for="name">*Name:</label><input type="text" name="name" id="name" autocomplete="off"/><br/> <label for="password">*Password:</label><input type="password" name="password" id="password"/><br/> <label for="pw_repeat">*Repeat Password:</label><input type="password" name="pw_repeat" id="pw_repeat"/><br/> <label for="email">*Email Adress (optional):</label><input type="text" name="email" id="email"/><br/> <button type="submit" id="submit_register" style="border:1px solid black; font-family:Avantgarde; font-size:16px;">Register</button> </form> </div> <script type="text/javascript"> $( function () { $( "#form" ).submit( function ( e ) { var data = $( this ).serialize(); $.post( "register_account.php", data, function () { $( "#main" ).fadeOut( 500, function () { $( this ).html( "You‘ve been registered succesfully<br>Now you can log in" ).fadeIn( 500 ); } ); } ); e.preventDefault(); return false; } ); } ); function field() { var name = $( "#name" ).val(); var password = $( "#password" ).val(); var pw_repeat = $( "#pw_repeat" ).val(); if ( name == "" || password != pw_repeat || password == "" || pw_repeat == "" ) { $( "#submit_register" ).prop( "disabled", true ); } else { $( "#submit_register" ).prop( "disabled", false ); } } setInterval( field, 100 ); </script>
Schau dir mal nen paar JS- und JQuery-Tuts an...
Gruss koslo
Beitrag zuletzt geändert: 15.11.2013 19:52:30 von koslo -
koslo schrieb:
Hiho,
versuchs mal wie folgt:
<div id="main"> <form id="form" method="post"> <label for="name">*Name:</label><input type="text" name="name" id="name" autocomplete="off"/><br/> <label for="password">*Password:</label><input type="password" name="password" id="password"/><br/> <label for="pw_repeat">*Repeat Password:</label><input type="password" name="pw_repeat" id="pw_repeat"/><br/> <label for="email">*Email Adress (optional):</label><input type="text" name="email" id="email"/><br/> <button type="submit" id="submit_register" style="border:1px solid black; font-family:Avantgarde; font-size:16px;">Register</button> </form> </div> <script type="text/javascript"> $( function () { $( "#form" ).submit( function ( e ) { var data = $( this ).serialize(); $.post( "register_account.php", data, function () { $( "#main" ).fadeOut( 500, function () { $( this ).html( "You‘ve been registered succesfully<br>Now you can log in" ).fadeIn( 500 ); } ); } ); e.preventDefault(); return false; } ); } ); function field() { var name = $( "#name" ).val(); var password = $( "#password" ).val(); var pw_repeat = $( "#pw_repeat" ).val(); if ( name == "" || password != pw_repeat || password == "" || pw_repeat == "" ) { $( "#submit_register" ).prop( "disabled", true ); } else { $( "#submit_register" ).prop( "disabled", false ); } } setInterval( field, 100 ); </script>
Schau dir mal nen paar JS- und JQuery-Tuts an...
Gruss koslo
Danke, aber leider hat es nicht funktioniert, obwohl ich eine neue Datei angelegt habe. Könnte es was damit zu tun haben dass ich alles zurzeit mit XAMPP teste, oder ist das egal ? -
willstdueswissen schrieb:
Eigentlich musste es egal sein solange du die neuste Version benutzt.
Nur musst du den richtigen Modus benutzen.
Benutzt du den Modus Apache?
Denn da drunter funktioniert fast alles.
Js Php Perl zum Beispiel
Ich schalte immer Apache an, ich werd mich mal nach einem Update umsehen, sonst muss ich das registrieren halt ohne jQuery lösen. Nochmals danke für deine Hilfe, im PHP Forum haben alle erst einmal über zwei Seiten herumgeschrien warum ich return false benutzt habe :D -
Nabend,
du brauchst natürlich JQuery. JQuery benötigt aber kein Apache, der ist u.a. zum ausliefern der Seite zuständig (die von mir aus mit php generiert wird). Das was ich geschrieben habe geht in einer normalen html-Date. Aber das $.post wird an den Server gesendet, das sollte dir klar sein...
Das return false in einem submit callback ist dazu da, dass er nicht das Standard Submit des Formulars durchführt. Ein true würde zusätzlich dieses ausführen. In meinen Beispiel könnte man es weglassen, da das preventDefault jegliche standardmäßige Ereignisse unterdrückt.
Gruss
Beitrag zuletzt geändert: 16.11.2013 19:59:18 von koslo -
Gibt es Meldungen in der Fehlerkonsole? Ist das Dokument valide und stimmt der Doctype?
Eventuell wäre es sinnvoll, wenn Du deinen Code mal auf deinen Webspace lädst, damit man das mal ausprobieren und nach Fehlermeldungen Ausschau halten kann.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
