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>

matt
quelle

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);">
Samuel Liew
quelle
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();
}
Majid Fouladpour
quelle
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/

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

Einfach und leicht :

<form onSubmit="return confirm('Do you want to submit?') ">
  <input type="submit" />
</form>

Pablo Salazar
quelle
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>

Alireza
quelle
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;
   }  
}
Sumit Kumar Gupta
quelle