Formular ohne Pagerefresh senden
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abschicken
allgemeine funktion
angeben
ansatz
benutzen
code
datum
form
format
formular
funktion
http
informationsgehalt
inhalt
input
nutzen
output
tag
unterscheiden
url
-
Hallo,
ich habe folgendes Problem: Ich würde gerne den tag/inhalt">Inhalt eines Formulars mittels Ajax so abeschicken, dass ich keinen page-refresh bekomme. Da ich von dem unten stehenden Bsp. quasi n - verschiedene Formulare mit jeweils unterschiedlichen id's habe stehe ich ein bisschen aufm schlauch, denn alle Lösungen die ich gefunden habe implementieren eine Funktion die irgendwie nur für ein Formular läuft.
Ich benutze übrigens das prototype.js Framework mit dem das angeblich einfacher geht.
<form method="post" action="" enctype="multipart/form-data" name="place_bids{$data[rows].id}"> <input type="hidden" name="value" id="value{$data[rows].id}" /> <input type="text" name="place_bid" value="{$data[rows].id}" /> <input type="submit" value="Order" /> </form>
Ich bedanke mich jetzt schonmal für die Hilfe.
mfg -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Du musst ajax benutzen.
http://www.w3schools.com/ajax/default.asp
Beitrag zuletzt geändert: 12.6.2013 22:02:11 von hpage -
Was hindert dich daran eine allgemeine Funktion zu schreiben, die ein Formular auswertet, solange du ihr die ID des Formulars gibst? Natürlich funktioniert das nur wenn alle Formulare gleich aufgebaut sind und sich nur durch die ID unterscheiden. Die Funktion würdest du beim Formular (
-Tag) als<form>
-Handler angeben und wenn dieser Handleronsubmit
zurückgibt wird das Formular nicht abgeschickt. Das kannst du nutzen, wenn du bereits mit deiner Funktion die Daten verarbeitest / abschickst.false -
Was hindert dich daran eine allgemeine Funktion zu schreiben, die ein Formular auswertet, solange du ihr die ID des Formulars gibst? Natürlich funktioniert das nur wenn alle Formulare gleich aufgebaut sind und sich nur durch die ID unterscheiden. Die Funktion würdest du beim Formular (<form>-Tag) als onsubmit-Handler angeben und wenn dieser Handler false zurückgibt wird das Formular nicht abgeschickt. Das kannst du nutzen, wenn du bereits mit deiner Funktion die Daten verarbeitest / abschickst.
Ja genau so ist es aufgebaut.
also musste ich
<form method="post" action="" onsubmit="submitfunction({$data[rows].id})" enctype="multipart/form-data" name="place_bids{$data[rows].id}">
und im verlauf der Seite dann irgendwo ne
<script> function submitfunction(id){ ... } </script>
machen?
Danke ich probier das schonmal aus. -
hpage schrieb:
Du musst ajax benutzen.
Lerne doch endlich mal lesen, bevor Du deinen Senf in einem Thread verteilst!
Wie heißt es im Startbeitrag des Themas so schön?
Ich würde gerne den Inhalt eines Formulars mittels Ajax so abschicken,
Deine Antwort ist, wie üblich, an Innovation und Informationsgehalt kaum zu übertreffen.
hackyourlife hat die sinnvolle Lösung für das Problem bereits genannt, so daß leider @topic nichts wesentliches zu schreiben ist.
@mods: wenn dieser Kommentar, gemeinsam mit hpages Beitrag, ins Nirvana geschickt wird, kann ich das durchaus verstehen.*g* -
als ansatz:
jQuery ajax format
http://jsfiddle.net/Kd37e/
vergleich Prototype ajax Format
http://webdesign.torn.be/tutorials/javascript/prototype/forms-with-prototype/
ich würde es aber nicht mischen (jQuery & Prototype)
da "$" für beide der gleiche Alias ist, und dieses zu massiven Problemen führen kann
du kannst aber einen anderen Alias setzen was dies behebt
<script src="prototype.js"></script> <script src="jquery.js"></script> <script> var $j = jQuery.noConflict(); // $j ist nun der alias für jQuery $j(document).ready(function() { $j( "div" ).hide(); });
Ich würde mich aber eher auf jQuery stützen da die Community dort wesentlich größer ist als bei Prototype
Beitrag zuletzt geändert: 13.6.2013 8:12:38 von n0tiert -
Hallo,
die wesentlichen Punkte wurden hier schon genannt, damit du dir bei deiner Entwicklung aber nicht selbst auf den Füßen stehst solltest du dir überlegen, wie du die Funktion am besten aufrufst.
Hierbei solltest du am besten den kompletten Aufruf über JS regeln, um dir zu zeigen, wie du das mit Prototype am besten regelst ist hier ein Beispiel, das auf deine Ausgangsstellung eingeht. Das einzige Problem ist, dass ich nicht genau weiß, wie welches deine ID ist, ist das die ID aus dem hidden-field?
Wenn ja, dann passt diese Lösung.
var doAjaxSubmit = function(form,id,params){ form = $(this); id = $(form.select('input[type="hidden"]')[0]).readAttribute('id'); params = {}; form.select('input')).each(function(input){ var name = input.readAttribute('name'); if(!!name) params[name] = input.readAttribute('value'); }; new Ajax.Request(form.readAttribute('action'), { method:form.readAttribute('method'), parameters: params, onSuccess: function(response){ alert('Request erfolgreich und wurde wie folgt beantwortet:\n' + transport.responseText); } }); return false; } $$('form').each(function(form){ form.observe('submit', doAjaxSubmit); });
Ich habe die Funktion jetzt nicht gestest, aber das Grundgerüst sollte damit ja gegeben sein und Fehler entsprechend leicht zu finden sein.
Mit freundlichen Grüßen -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
