Prześlij formularz JavaScript - okno dialogowe Potwierdź lub anuluj wysyłanie

183

Aby uzyskać prosty formularz z alertem z pytaniem, czy pola zostały poprawnie wypełnione, potrzebuję funkcji, która:

  • Wyświetla pole ostrzeżenia po kliknięciu przycisku z dwiema opcjami:

    • Jeśli klikniesz „OK”, formularz zostanie przesłany
    • Po kliknięciu przycisku anuluj pole alertu zostanie zamknięte, a formularz można dostosować i przesłać ponownie

Myślę, że JavaScript potwierdzi, że zadziałałoby, ale nie potrafię wymyślić, jak to zrobić.

Kod, który mam teraz to:

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>

matowy
źródło

Odpowiedzi:

397

Wystarczy zwykłe wbudowane potwierdzenie JavaScript :

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

Nie potrzebujesz funkcji zewnętrznej, chyba że wykonujesz walidację , którą możesz zrobić w następujący sposób:

<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
źródło
28

Problem wskazany w komentarzu jest poprawny, więc oto inna wersja, która jest na to odporna:

function show_alert() {
  if(!confirm("Do you really want to do this?")) {
    return false;
  }
  this.form.submit();
}
Majid Fouladpour
źródło
25

Możesz użyć funkcji potwierdzenia JS.

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

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

Jason Gennaro
źródło
27
onsubmit="return confirm('Is the form filled out correctly?');"byłoby znacznie prostsze, a wynik byłby taki sam.
Sk8erPeter,
3

Prosty i łatwy :

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

Pablo Salazar
źródło
2

OK, po prostu zmień kod na coś takiego:

<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>

Również ten kod jest uruchomiony, po prostu ułatwiam zobaczyć, jak to działa, po prostu uruchom poniższy kod, aby zobaczyć wynik:

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
źródło
0

Jeśli chcesz zastosować jakiś warunek przy wysyłaniu formularza, możesz skorzystać z tej metody

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

Zawsze należy pamiętać, że metoda i atrybut akcji piszą po atrybutach onsubmit

kod javascript

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
źródło