Senden von JavaScript-Formularen - Dialogfeld "Senden bestätigen oder abbrechen"


183

Für ein einfaches Formular mit einer Warnung, in der Sie gefragt werden, ob die Felder korrekt ausgefüllt wurden, benötige ich eine Funktion, die Folgendes ausführt:

  • Zeigt ein Warnfeld an, wenn auf die Schaltfläche geklickt wird, mit zwei Optionen:

    • Wenn Sie auf "OK" klicken, wird das Formular gesendet
    • Wenn Sie auf Abbrechen klicken, wird das Warnfeld geschlossen und das Formular kann angepasst und erneut gesendet 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="xxx" border="0" name="submit" onclick="show_alert();" alt="PayPal - The safer, easier way to pay online!" value="Submit">
</form>

Antworten:


396

Eine einfache Inline-JavaScript-Bestätigung würde ausreichen:

<form onsubmit="return confirm('Do you really want to submit the form?');">

Sie benötigen keine externe Funktion, es sei denn, Sie führen eine Validierung durch . Sie können Folgendes tun:

<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);">

28

Das im Kommentar erwähnte Problem ist gültig. Hier ist eine andere Revision, die dagegen immun ist:

function show_alert() {
  if(!confirm("Do you really want to do this?")) {
    return false;
  }
  this.form.submit();
}

25

Sie können die JS-Bestätigungsfunktion verwenden.

<form onSubmit="if(!confirm('Is the form filled out correctly?')){return false;}">
  <input type="submit" />
</form>

http://jsfiddle.net/jasongennaro/DBHEz/


27
onsubmit="return confirm('Is the form filled out correctly?');"wäre viel einfacher und das Ergebnis wäre das gleiche.
Sk8erPeter


2

OK, ändern Sie einfach Ihren Code in etwa so:

<script>
function submit() {
   return confirm('Do you really want to submit the form?');
}
</script>

<form onsubmit="return submit(this);">
   <input type="image" src="xxx" border="0" name="submit" onclick="show_alert();"
      alt="PayPal - The safer, easier way to pay online!" value="Submit">
</form>

Dies ist auch der Code, der ausgeführt wird. Ich mache es 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?');
}
<form onsubmit="return submitForm(this);">
  <input type="text" border="0" name="submit" />
  <button value="submit">submit</button>
</form>


0

Wenn Sie beim Senden eines Formulars eine Bedingung anwenden möchten, können Sie diese Methode verwenden

<form onsubmit="return checkEmpData();" method="post" action="process.html">
  <input type="text" border="0" name="submit" />
  <button value="submit">submit</button>
</form>

Beachten Sie immer, dass Methoden- und Aktionsattribute nach onsubmit- Attributen geschrieben werden

Javascript-Code

function checkEmpData()
{
  var a = 0;

  if(a != 0)
  {
    return confirm("Do you want to generate attendance?");
  }
   else
   {
      alert('Please Select Employee First');
      return false;
   }  
}
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.