Direkte Verarbeitung des Formulars
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aufruf
code
dank
datum
email
form
formular
funktion
http
nehmen
option
post
senden
spieltag
tag
test
text
type
url
versuch
-
Hallo,
ich versuche gerade mithilfe eines Tutorials (tag/http">http://marco.seaside-graphics.de/programmierung/ajax/jquery-ein-html-formular-per-ajax-versenden-und-eine-hinweis-seite-dynamisch-nachladen-animiert-anzeigen) einzubauen, dass die über das Formular abgesendeten Daten direkt auf dieser Seite ohne ein Neuladen verarbeitet werden können.
Mein aktueller Stand sieht so aus:
test.php
<html> <head> <script src="http://code.jquery.com/jquery-1.5.min.js"></script> <script src="script/myApplication.js"></script></head> <body> <div id="myContainer"> <div id="myFormDiv"> <form action="" id="myForm" method="post"> <input type="text" id="name" name="name" /> <br /> <input type="text" id="email" name="email" /> <br /> <input type="submit" value="Senden" /> </form> </div> </div> </body> </html>
myApplication.js:
http://fifa-society.lima-city.de/phpkit/script/myApplication.js
send.php:
<?php /* werte übernehmen */ $name = $_POST["name"]; $email = $_POST["email"]; echo $name; echo "Test"; ?>
Geplant hatte ich, dass nach einem Klick auf "Senden" die Daten in der send.php verarbeitet und diese eingebunden wird, allerdings funktioniert dies nicht. Aktuell wird zwar die send.php eingebunden, in dieser können jedoch die eingegeben Daten nicht abgerufen werden.
Wer möchte kann es gerne mal selber auf der folgenden Seite testen, um zu veranschaulichen, dass die send.php eingebunden wird habe ich dort "Test" ausgeben lassen:
http://fifa-society.lima-city.de/phpkit/include.php?path=test
Hat evtl. jemand von euch eine Lösung für dieses Problem parat?
Mit freundlichen Grüßen,
fifa-society -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
das load() hat dann nichts mehr mit den gesendeten Daten zu tun,
entweder Du speicherst die Variablen beim senden in Session und gibst diese dann aus
oder gibst direkt das Ergebnis beim Senden aus, ohne nochmal .load()
versuch mal so
success: function(msg) { /* form-div verstecken, seite nachladen & wieder einblenden (2000 ms) */ $("#myFormDiv").empty().html(msg).fadeIn(2000); }
und anstatt dem
Konstrukt$.ajax({ type: "POST", ... ...
kannst Du auch direkt jQuery POST nehemen
$.post("script/send.php", { "name" : $("#name").val() , "email" : $("#email").val() }) .done(function(data) { $("#myFormDiv").empty().html(data).fadeIn(2000); });
das ist die "Kurzform" für$.ajax({ type: "POST", ... ...
ist die Datei send.php auch im Ordner script/ ??
-
Die Datei script.php ist im Ordner script, dank deiner Änderung funktioniert es jetzt auch soweit :)
Das einzige kleine Problem, dass es jetzt noch gibt ist, dass das Ergebnis direkt eingeblendet wird, nicht erst nach 2000ms. -
versuch mal das .fadeIn() nach vorne zu setzen
$("#myFormDiv").empty().fadeIn(2000).html(data);
... vielleicht ist es ja nur, weil zuerst html() ausgeführt wird und erst danach .fadein()
also mal andersrum probieren ... :)
Beitrag zuletzt geändert: 22.5.2013 17:32:32 von zitatbox -
Jetzt wird gar nichts mehr angezeigt
-
nimm als Daten nicht data sonder Dein msg ... Dein Variable-Name !!!
nicht so
$("#myFormDiv").empty().fadeIn(2000).html(data);
sondern so
$("#myFormDiv").empty().fadeIn(2000).html(msg);
:xD ... :P .. sorry ...:=) .
-
Angezeigt wird es jetzt zwar wieder, allerdings nach wie vor direkt und nicht erst nach 2000ms.
-
hmm, keine Ahnung ...
... oha ... du nutzt ja Version: jquery-1.5.min
... nimm mal eine aktuellere jQuery Version ... http://code.jquery.com/jquery-1.9.1.min.js
siehe: http://jquery.com/download/
PS: jQuery 2.0 does not support Internet Explorer 6, 7, or 8 ... also besser die 1.9.1 Version nehmen.
aber sollte eigentlich auch mit Version 1.5 funktionieren ?!!? ... hmmm
hast Du es schonmal mit einem anderen Browser versucht ?
sonst musst Du Dich bei jQuery oder dem Hersteller Deines Browsers beschweren
Beitrag zuletzt geändert: 22.5.2013 17:52:50 von zitatbox -
Funktioniert leider auch mit der neueren jQuery Version und einem anderen Browser nicht - die Funktion ist aber ansonsten auch nicht dringend nötig
Schonmal danke für deine Hilfe, aber ich hätte noch eine kleine Frage: Aktuell habe ich erstmal versucht es soweit zum Laufen zu bekommen. Jetzt möchte ich es allerdings auf meine Bedürfnisse umfunktionieren und statt dem input-Feld eine select-Box nutzen - wie kann ich das Script denn dementsprechend umschreiben? Habe es mal mit meinen (mehr als dürftigen) javascript Kenntnissen versucht, allerdings nur "undefined" ausgegeben bekommen.
Ich habe es soweit umgeschrieben:
test.php
<html> <head> <!-- jquery online einbinden --> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <!-- eigener js/jquery-code --> <script src="script/myApplication.js"></script></head> <body> <div id="myContainer"> <div id="myFormDiv"> <form action="" id="myForm" method="post"> <select> <option value="3">1</option> <option value="4">2</option> </select> <input type="submit" value="Senden" /> </form> </div> </div> </body> </html>
myApplication.js:
http://fifa-society.lima-city.de/phpkit/script/myApplication.js
send.php:
<?php /* werte übernehmen */ $spieltag = $_POST["spieltag"]; echo $spieltag; echo "Test"; ?>
Wo genau habe ich denn einen Fehler gemacht? -
Du muss dem <select> eine ID geben
<select name="spieltag" id="spieltag"> <option value="1">Tag 1</option> <option value="2">Tag 2</option> <option value="3">Tag 3</option> </select>
braucht Du, damit bei "normalem" Formular sendenname="spieltag"
in der send.php auch %_POST['spieltag'] ankommen würde
aber da Du ja mit jQuery sendest braucht man das hier eigentlich nicht
braucht Du, damit Du per jQuery auf die ID (Selector) Zugreifen kannstid="spieltag"
und dessen Werte (Value oder Text) auslesen kannst ... um diese im Ajax Post Aufruf zu übergeben.
Wie Du schon richtig erkannt hast, den Wert der aktuell gewählten Option bekommst Du mit:
$('#spieltag').val();
also wenn die 2te Option ausgewählt wird, dann bekommst du die Zahl2
Möchtest Du den Text, also Inhalt der aktuell gewählten Option erhalten,
dann geht dies über den zusätzlichen Selektor “:selected” und die Funktion “text”:
$('#spieltag:selected').text();
also wenn die 2te Option ausgewählt wird, dann bekommst du den TextTag 2
PS: ich kann das auch nicht alles auswendig, ich nutze einfach Google
in diesem Fall .... https://www.google.de/search?q=jquery+select+option+value
Man muss nur wissen, was man suchen soll, also die "richtigen" suchbegriffe nehmen :)
:)
Beitrag zuletzt geändert: 22.5.2013 18:20:06 von zitatbox -
Jetzt funktioniert alles - danke!
Thema kann damit geschlossen werden.
Edit: Doch nochmal ein kleines Problem
Ich habe versucht es jetzt in mein eigentliches Script einzubauen und den submit-Button durch ein
zu ersetzen, allerdings wird es nicht abgesendet - sobald ich etwas im Formular ändere passiert nichts :/onChange="this.form.submit()"
Hier ist nun die entsprechende Datei de1.php, um die es geht, bzw. der relevante Ausschnitt:
<html> <head> <!-- jquery online einbinden --> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <!-- eigener js/jquery-code --> <script src="script/myApplication.js"></script></head> <body> <center> <div id="myContainer"> <div id="myFormDiv"> <form action="" id="myForm" method="post" onChange="this.form.submit()"> <select name="spieltag" id="spieltag"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> <input type="submit" value="Senden" /> </form> </div> </div>
Der Rest ist nach wie vor unverändert.
Beitrag zuletzt geändert: 22.5.2013 18:52:15 von fifa-society -
Hallo
lass das
weg und mach dafür im jQuery JS TeilonChange="this.form.submit()"
$('#spieltag').change(function() { // ------ alle Variablen aus Formular ------ var stag = $('#spieltag').val(); var name = $('#name').val(); var mail = $('#email').val(); // ------ Aufruf der POST Funktion ------ send_myform ( stag, name, mail ); });
das ab-Senden als POST Funktion: send_myform()
function send_myform(xtag, xname, xemail ) { $.post("script/send.php", { "spieltag" : xtag , "email" : xname , "email" : xemai }) .done(function(data) { $("#myFormDiv").empty().html(data).fadeIn(2000); }); }
Du kannst auch direkt in der .change() Funkton den .post() Aufruf machen
Beitrag zuletzt geändert: 26.5.2013 20:18:15 von tweetbox -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage