Senden von JavaScript-Formularen – Dialogfeld zum Bestätigen oder Abbrechen der Übermittlung
Lesezeit: 4 Minuten
matt
Für ein einfaches Formular mit einer Benachrichtigung, die fragt, ob Felder korrekt ausgefüllt wurden, brauche ich eine Funktion, die dies tut:
Zeigt ein Warnfeld mit zwei Optionen an, wenn auf die Schaltfläche geklickt wird:
Wenn auf „OK“ geklickt wird, wird das Formular gesendet
Wenn auf „Abbrechen“ geklickt wird, schließt sich das Warnfeld und das Formular kann angepasst und erneut übermittelt werden
Ich denke, eine JavaScript-Bestätigung würde funktionieren, aber ich kann nicht herausfinden, wie.
Der Code, den ich jetzt habe, ist:
function show_alert() {
alert("xxxxxx");
}
<form>
<input type="image" src="https://stackoverflow.com/questions/6515502/xxx" border="0" name="submit" onclick="show_alert();" alt="PayPal - The safer, easier way to pay online!" value="Submit">
</form>
Samuel Liew
Eine einfache Inline-JavaScript bestätigen würde genügen:
<form onsubmit="return confirm('Do you really want to submit the form?');">
Keine Notwendigkeit für ein externe Funktion es sei denn, Sie tun Validierungwas Sie etwa so tun können:
<script>
function validate(form) {
// validation code here ...
if(!valid) {
alert('Please correct the errors in the form!');
return false;
}
else {
return confirm('Do you really want to submit the form?');
}
}
</script>
<form onsubmit="return validate(this);">
Nur zur Verdeutlichung: Die Validierung auf der Clientseite (in JavaScript) sollte nur der Bequemlichkeit des Benutzers dienen. JavaScript-Code kann vom Benutzer frei bearbeitet werden und sollte nicht vertrauenswürdig sein. Die Real Die Validierung sollte immer im Backend erfolgen, um zu vermeiden, dass fehlerhafte oder böswillige Daten Ihre Datenbank oder Ihren Server erreichen.
– Adrian Wiik
7. September 2020 um 22:21 Uhr
Irgendwie, selbst wenn ich Abbrechen wähle, wird das Senden fortgesetzt (Chrome 86)
– Muflix
13. November 2020 um 8:00 Uhr
@Muflix Sie haben dann wahrscheinlich eine Rückgabeerklärung verpasst.
– Samuel Liew ♦
13. November 2020 um 8:02 Uhr
@SamuelLiew Ich habe es noch einmal überprüft und festgestellt, dass es deswegen nicht funktioniert data-ajax=true -Attribut im asp.net-Core. Also implementiere ich stattdessen den Check on Submit-Button <button type="submit" onclick="return confirm('Are you sure?')">Submit</button>
– Muflix
13. November 2020 um 8:09 Uhr
Majid Fouladpour
Das im Kommentar angesprochene Problem ist gültig, also ist hier eine andere Überarbeitung, die dagegen immun ist:
function show_alert() {
if(!confirm("Do you really want to do this?")) {
return false;
}
this.form.submit();
}
Sie könnten die JS-Bestätigungsfunktion verwenden.
<form onSubmit="if(!confirm('Is the form filled out correctly?')){return false;}">
<input type="submit" />
</form>
onsubmit="return confirm('Is the form filled out correctly?');" wäre viel einfacher, und das Ergebnis wäre das gleiche.
– Sk8erPeter
10. September 2012 um 19:29 Uhr
Simpel und einfach :
<form onSubmit="return confirm('Do you want to submit?') ">
<input type="submit" />
</form>
Alireza
OK, ändern Sie einfach Ihren Code in etwas wie folgt:
<script>
function submit() {
return confirm('Do you really want to submit the form?');
}
</script>
<form onsubmit="return submit(this);">
<input type="image" src="https://stackoverflow.com/questions/6515502/xxx" border="0" name="submit" onclick="show_alert();"
alt="PayPal - The safer, easier way to pay online!" value="Submit">
</form>
Dies ist auch der ausgeführte Code. Ich mache es nur einfacher zu sehen, wie er funktioniert. Führen Sie einfach den folgenden Code aus, um das Ergebnis zu sehen:
function submitForm() {
return confirm('Do you really want to submit the form?');
}