Formular Daten werden unabsichtlich erneut gesendet.

[Hosch]

Hi

Ich habe ein Formular mit zwei select boxen, submit und reset buttons (und sonst nichts weiter)

darunter wird eine Liste ausgegeben und ein button, der das löschen dieses Elements erlaubt.

also:

<form action="PHPScript" id="Formular">
<select name="box1">
<option>...
<option>...
</select>
<select name="box2">
<option>...
<option>...
</select>
<input type="submit" ...> <input type="reset" ...>
</form>
.
.
.
<!-- nicht inerhalb irgendeines Form tags -->
Text ...<button class="delete" >Löschen</button>
Text ...<button class="delete" >Löschen</button>
Text ...<button class="delete" >Löschen</button>
...
<script...>
$(document).ready(function() {
  $(".delete").click(function() {
  var dataString = ...
    $.ajax({
      type: "POST",
      url: "AnderesPHPscript"
      data: dataString,
...</script></body>...

Soweit funktioniert das auch - nur wenn man oben im Formular was versendet und danach unten was anderes oder das eben hinzugefügte wieder löschen will, glaubt der browser aus irgendwelchen gründen, er müsste das zuvor gesendete formular von oben auch senden, wenn man unten was löschen will.

Im Firefox folgt da eine Abfrage und Chrome macht das mal eben ohne nachfragen. Am ende wird ein neuer eintrag mit den daten von vorher erstellt und dann der alte gelöscht (oder auch anders herum), solange man versucht etwas zu löschen.

Sonst kann man nur das Fenster neu laden oder den browser schließen und wieder öffnen.

Solange man nur was löscht ohne vorher was hinzugefügt zu haben läuft das. und nur hinzufügen geht auch.

Wie kann ich dafür sorgen, dass der Browser nicht glaubt, er müsste den alten Mist nochmal versenden, wenn man die unteren delete-Buttons klickt?

[woodfighter]

Tach,

Soweit funktioniert das auch - nur wenn man oben im Formular was versendet und danach unten was anderes oder das eben hinzugefügte wieder löschen will, glaubt der browser aus irgendwelchen gründen, er müsste das zuvor gesendete formular von oben auch senden, wenn man unten was löschen will.

der Standardwert für das type-Attribut im button-Element ist submit, der Rest folgt vermutlich aus Fehlerkorrektur, weil die Browser versuchen das zugehörige Formular zu erraten; da du ein anderes Verhalten möchtest, solltest du einen anderen Wert setzen.

mfg
Woodfighter

[Hosch]

Tach,

Moin

der Standardwert für das type-Attribut im button-Element ist submit, der Rest folgt vermutlich aus Fehlerkorrektur, weil die Browser versuchen das zugehörige Formular zu erraten; da du ein anderes Verhalten möchtest, solltest du einen anderen Wert setzen.

Das ändert leider nichts - habe mal überall type="button" zu allen <button>-tags hinzugefügt. Wobei ich das trotzdem mal drin lasse.

Gruß Hosch

[woodfighter]

Tach,

Das ändert leider nichts - habe mal überall type="button" zu allen <button>-tags hinzugefügt. Wobei ich das trotzdem mal drin lasse.

dann liegt der Fehler an etwas, das du bisher nicht erwähnst hast, ich kann das Verhalten anhand des von dir gelieferten Quelltextes nicht nachvollziehen; da ist nichts, was einen Reload auslösen könnte.

mfg
Woodfighter

[Hosch]

Hi

dann liegt der Fehler an etwas, das du bisher nicht erwähnst hast, ich kann das Verhalten anhand des von dir gelieferten Quelltextes nicht nachvollziehen; da ist nichts, was einen Reload auslösen könnte.

Sonst passiert da nichts weiter - abgesehen vom PHP code, der das ganze ja erzeugt.

form action ist übrigens das script selbst (ruft sich da also selbst wieder auf), während der lösch button ein ganz anderes aufruft

Im access-log vom Webserver werden beide scripte mit post aufgerufen...

Allerdings:

...
success: function(html)
  {
    window.location.reload();
  },
...

wird ausgelöst beim erfolgreichen löschen ... eine Idee wie ich sonst die Bildschirmausgabe, die PHP erzeugt ändern kann - falls es daran liegt...

[Jörg Reinholz]

Moin!

Allerdings:

...
success: function(html)
  {
    window.location.reload();
  },
...

wird ausgelöst beim erfolgreichen löschen ... eine Idee wie ich sonst die Bildschirmausgabe, die PHP erzeugt ändern kann - falls es daran liegt...

Na Prima! Wilde Mischung aus Übertragung per normalen Formular-Request und "Ajax" ... dazu ein Reload. Das tut genau was es soll.

Lösung:

Variante A:

Statt window.location.reload(); die angezeigten Daten mit Javascript aus dem DOM und damit aus der Anzeige löschen. Dazu muss das PHP-Skript dann nur success oder error zurückgeben, was Du bitte auswertest ...

Variante B:

Löschen-Buttons als Submit in ein eigenes Formular - jeweils zusammen mit einem versteckten Input, der die ID des zu löschenden Datensatzes enthält. Das Formular kann man sogar in einer Tabellenzelle unterbringen (display:inline). Ganz klassisch als Formular senden - also kein "Ajax".

A und B nicht wieder mischen.

Jörg Reinholz

[woodfighter]

Tach,

ich ergänze mal noch Variante C Post/Redirect/Get, was ich in Verbindung mit Variante A für die optimale Lösung halten würde.

mfg
Woodfighter

[Jörg Reinholz]

Moin!

ich ergänze mal noch Variante C Post/Redirect/Get, was ich in Verbindung mit Variante A für die optimale Lösung halten würde.

woodfighter meint damit, Du sollst statt

<form action="PHPScript" id="Formular">

stets

<form action="PHPScript" id="Formular" method="POST">

verwenden, wenn auf dem Server Daten verändert werden. Werte im PHP-Skript dann $_POST statt $_GET aus.

Das betrifft auch Dein Ajax.

Jörg Reinholz

[woodfighter]

Tach,

ich ergänze mal noch Variante C Post/Redirect/Get, was ich in Verbindung mit Variante A für die optimale Lösung halten würde.

woodfighter meint damit, Du sollst statt

<form action="PHPScript" id="Formular">

stets

<form action="PHPScript" id="Formular" method="POST">

verwenden, wenn auf dem Server Daten verändert werden. Werte im PHP-Skript dann $_POST statt $_GET aus.

das ist zwar grundsätzlich richtig, aber nicht das, was ich meinte. Ich meinte, dass man jeden POST-REquest mit einem Redirect beantworten sollte, um die Probleme des OP (und andere) zu vermeiden.

mfg
Woodfighter

[Hosch]

Hi,

<form action="PHPScript" id="Formular" method="POST">

Das passiert eh schon - ist für's Posting aber dem AbKüFi zum Opfer gefallen. GET wird auf der Seite gar nicht genutzt.

window.location.reload(); hab ich gestern Abend noch mit window.location.href = "..."; ersetzt. Damit geht's.

Natürlich sollte man den ganzen Spaß nicht mischen. Sowas passiert wenn die Anforderungen sich im lauf der Zeit ändern. "Könntest Du nicht noch da Buttons zum löschen einfügen?" Eigentlich sollte man da ursprünglich garnix löschen können und es verfällt nach einem Zeitraum von X (was immer noch so ist - zusätzlich).

Lösch button - ja hab ich schon -> copy&paste --- Oh, Problem... und den Rest kennt Ihr.

Einfach mit display:none die Zeile in der Liste verstecken hatte ich kurz überlegt und verworfen. Zum einen müßte ich da dann noch in einer der select boxen herum manipulieren, dass der Eintrag wieder zur Verfügung steht. Zum anderen bekäme ich so überhaupt nicht mit ob das löschen wirklich hingehauen hat; würde Sachen ausblenden, die eventuell noch da sind.

Thx all :)

[Hosch]

Anmerkung zu der Seite: This document was successfully checked as HTML5!