Datei soll nach Formular - SUBMIT weitere Datei laden !!
Klaus
- javascript
Ich bekomme noch graue Haare, ich weis nicht mehr weiter.
Ich habe ein Formularfeld, nach dem Ausfüllen und einem Klick auf den Button: "NUR WENN HIER GEKLICKT WIRD" soll die ausgabe.php geladen werden.
Mein Script ist schneller als die Feuerwehr erlaubt, wenn ich nur mit dem Mauszeiger in mein INPUT Feld klicke, erscheint schon die ausgabe.php.
Wenn ich dann auf den "NUR WENN HIER GEKLICKT WIRD" Button klicke, passiert dagegeb nichts.
Kann mir BITTE jemand weiterhelfen.
Klaus
[code lang=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>graue haare</title>
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#test").click(function() {
var linkId = $(this).attr("id");
$.ajax({
type: "POST",
url: "ausgabe.php",
data: "ajaxget=" + linkId,
success: function(data) {
$("#ajaxcontent").html(data);
}
});
});
});
</script>
</head>
<body>
<form id="test" method="post" action="">
<input type="text" id="name" name="name" />
<input type="submit" name="action" value="Speichern">
</form><br /><br />
<div id="ajaxcontent"></div>
</body>
</html>
~~~[/code]
Hi,
Wenn ich dann auf den "NUR WENN HIER GEKLICKT WIRD" Button klicke, passiert dagegeb nichts.
wenn Du das Formular abschickst, wird eine neue Seite geladen - in diesem Fall die selbe, die Du schon vorliegen hast. Wenn in der vorherigen Variante Änderungen vorgenommen worden waren (gehabt gewesen haben sind - gibt es einen Ultraplusplusquamperfekt?), werden diese durch die Rückgabe des Servers ersetzt.
Kann mir BITTE jemand weiterhelfen.
Verhindere das Abschicken des Formulars.
Cheatah
Verhindere das Abschicken des Formulars.
Sorry, das verstehe ich nicht, ich möchte das Formular doch absenden!
Ich möchte doch, das der Vorgang erst dann ausgelöst wird, wenn ich den SUBMIT Button drücke!!
Hallo,
Verhindere das Abschicken des Formulars.
Sorry, das verstehe ich nicht, ich möchte das Formular doch absenden!
ja, war mir auch so.
Ich möchte doch, das der Vorgang erst dann ausgelöst wird, wenn ich den SUBMIT Button drücke!!
Warum löst du dann per AJAX das Laden der ausgabe.php schon aus, sobald irgendwo ins Formular geklickt wird? - Lass den Javascript-Teil einfach komplett weg, dann verhält sich dein Formular auch ganz normal. Auch dass man es dann wie üblich durch Drücken der Enter-Taste abschicken kann.
Ciao,
Martin
Hallo,
Mein Script ist schneller als die Feuerwehr erlaubt, wenn ich nur mit dem Mauszeiger in mein INPUT Feld klicke, erscheint schon die ausgabe.php.
klar, denn dieser Klick landet selbstverständlich in Deinem Formular.
Wenn ich dann auf den "NUR WENN HIER GEKLICKT WIRD" Button klicke, passiert dagegeb nichts.
Doch, doch. Nur steht dann nichts in Deinem Eingabefeld. Deswegen bemerkst Du nichts.
» $(document).ready(function() {
> $("#test").click(function() {
[...]
Du hängst den Eventhandler an das Element mit dem id-Wert "test", das ist Dein Formular:
> <form id="test" method="post" action="">
> <input type="text" id="name" name="name" />
Vermutlich möchtest Du folgendem Button eine id spendieren, und diesem Element den Eventhandler zuweisen.
> <input type="submit" name="action" value="Speichern">
Freundliche Grüße
Vinzenz
Warum löst du dann per AJAX das Laden der ausgabe.php schon aus, sobald
irgendwo ins Formular geklickt wird? - Lass den Javascript-Teil einfach
komplett weg, dann verhält sich dein Formular auch ganz normal. Auch dass
man es dann wie üblich durch Drücken der Enter-Taste abschicken kann.
Wenn ich javascript weglasse, wird die ganze Seite über action="" neugeladen, das will ich nicht, sondern nur das Ergbenis des Formulars hier ausgeben:
<div id="ajaxcontent"></div>
---------------------------------
Vermutlich möchtest Du folgendem Button eine id spendieren, und diesem
Element den Eventhandler zuweisen.
<input type="submit" name="action" value="Speichern">
Meinst du ich soll
<form id="test" method="post" action="">
<input type="text" id="name" name="name" />
die "id="test" hier rwegnehmen und hier hinmachen:
<input id="test" type="submit" name="action" value="Speichern">
Ich muss gestehen ich verstehe das nicht ganz was du meinst?
Hallo Klaus,
Vermutlich möchtest Du folgendem Button eine id spendieren, und diesem
Element den Eventhandler zuweisen.
Meinst du ich soll
<form id="test" method="post" action="">
<input type="text" id="name" name="name" />
die "id="test" hier rwegnehmen und hier hinmachen:
<input id="test" type="submit" name="action" value="Speichern">
das wäre zum Beispiel eine Möglichkeit.
Ich muss gestehen ich verstehe das nicht ganz was du meinst?
Wenn Du in Dein Eingabefeld klickst, so wandert das Klickereignis über alle Elternelemente nach oben (Mathias erklärt das sehr schön). Damit landet das Klickereignis in der nächsten Ebene bei Deinem Formular - und löst somit unerwünscht früh den Ajax-Request aus, nämlich bevor Du irgendetwas eingegeben hast.
Freundliche Grüße
Vinzenz
Hallo Vinzenz,
ich habe deinen Vorschlag mit dem umsetzten der ID, natürlich sofort getestet, doch leider funktioniert es nicht ganz, ich habe zwar nun Zeit mein Feld auszufüllen, doch nach dem KLICk, tut sich nichts...
Ich denke, das da irgendwas in meinem Code nocht nicht stimmt!
Klaus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>graue haare</title>
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#test").click(function() {
var linkId = $(this).attr("id");
$.ajax({
type: "POST",
url: "ausgabe.php",
data: "ajaxget=" + linkId,
success: function(data) {
$("#ajaxcontent").html(data);
}
});
});
});
</script>
</head>
<body>
<form method="post" action="">
<input type="text" id="name" name="name" />
<input id="test" type="submit" name="action" value="Speichern">
</form><br /><br />
<div id="ajaxcontent"></div>
</body>
</html>
Hi!
Ich spreche kein jquery. Deshalb kann ich nur vermuten.
$("#test").click(function() {
var linkId = $(this).attr("id");
Hier wird einer Variable linkId der Name des elements uebergeben, dessen Eventhandler getriggered wurde?
$.ajax({
type: "POST",
url: "ausgabe.php",
data: "ajaxget=" + linkId,
Hier wird ein Getparameter mit dem inhalt der Variablen (also der ID des Buttons) erstellt?
success: function(data) {
$("#ajaxcontent").html(data);
}
});
Bleibt die Frage, was bekommt ausgabe.php denn? Und was macht es draus? Betreibe Debugging.
Hallo,
ich habe deinen Vorschlag mit dem umsetzten der ID, natürlich sofort getestet, doch leider funktioniert es nicht ganz, ich habe zwar nun Zeit mein Feld auszufüllen, doch nach dem KLICk, tut sich nichts...
ja, leider hab' ich Dein Problem nicht ganz durchdacht. Schadete insofern nichts, weil Du etwas über das Event-Bubbling gelernt hast.
Ich denke, das da irgendwas in meinem Code nocht nicht stimmt!
Das ist richtig :-) Ich fasse daher Deine Aufgabenstellung zusammen:
- Du hast ein Formular mit
- (mindestens) einem Eingabefeld,
- einem Submitbutton.
- Du möchtest die Formulareingaben per Ajax an ein Skript schicken
und dessen Antwort in die aktuelle Seite einfügen.
Problem:
- Wird ein HTML-Formular abgeschickt, so wird die im action-Attribut
des form-Elementes angegebene Ressource geladen. Im Falle eines
Leerstrings (wie bei Dir angegeben) die aktuelle Ressource (außer
im IE, der da fehlerhafterweise was anderes macht).
- Ein Formular kann nicht nur über einen Submit-Button abgeschickt werden,
siehe Martins Beitrag.
Lösung:
Was Du abfangen musst, ist daher nicht das Klickereignis des Submit-Buttons, sondern das Submit-Ereignis des Formulars. Zusätzlich musst Du die Standardaktion beim Submit, das Absenden des Formulars, verhindern. Wie das geht, erklärt Mathias im bereits verlinkten Artikel einen Abschnitt vorher.
Das heißt: Du kannst wieder zum ersten Ansatz zurückgehen, nimmst "onsubmit" statt "onclick" und verhinderst einfach die Standardaktion.
Tipp: Arbeite Mathias' sehr empfehlenswerte Artikelserie komplett durch.
Freundliche Grüße
Vinzenz