Modulo JavaScript Invia: finestra di dialogo Conferma o Annulla invio


183

Per un semplice modulo con un avviso che chiede se i campi sono stati compilati correttamente, ho bisogno di una funzione che faccia questo:

  • Mostra una finestra di avviso quando si fa clic sul pulsante con due opzioni:

    • Se si fa clic su "OK", il modulo viene inviato
    • Se si fa clic su Annulla, la finestra di avviso si chiude e il modulo può essere modificato e reinviato

Penso che una conferma JavaScript funzionerebbe, ma non riesco a capire come.

Il codice che ho ora è:

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>

Risposte:


399

Una semplice conferma JavaScript in linea sarebbe sufficiente:

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

Non è necessaria una funzione esterna a meno che tu non stia eseguendo la convalida , che puoi fare in questo modo:

<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

Il problema evidenziato nel commento è valido, quindi ecco una revisione diversa che è immune a questo:

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

25

È possibile utilizzare la funzione di conferma JS.

<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?');"sarebbe molto più semplice e il risultato sarebbe lo stesso.
Sk8erPeter,

3

Semplice e facile :

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


2

OK, basta cambiare il codice in qualcosa del genere:

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

Anche questo è il codice in esecuzione, solo per rendere più facile vedere come funziona, basta eseguire il codice qui sotto per vedere il risultato:

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

Se si desidera applicare alcune condizioni all'invio del modulo, è possibile utilizzare questo metodo

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

Una cosa da tenere sempre presente che l' attributo metodo e azione scrivono dopo gli attributi onsubmit

codice 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;
   }  
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.