Enviar formulario JavaScript: cuadro de diálogo Confirmar o cancelar envío

184

Para un formulario simple con una alerta que pregunta si los campos se completaron correctamente, necesito una función que haga esto:

  • Muestra un cuadro de alerta cuando se hace clic en el botón con dos opciones:

    • Si se hace clic en "Aceptar", se envía el formulario
    • Si se hace clic en cancelar, el cuadro de alerta se cierra y el formulario se puede ajustar y volver a enviar

Creo que una confirmación de JavaScript funcionaría, pero parece que no puedo entender cómo.

El código que tengo ahora es:

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>

mate
fuente

Respuestas:

400

Una confirmación simple de JavaScript en línea sería suficiente:

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

No necesita una función externa a menos que esté haciendo la validación , que puede hacer algo como esto:

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

El problema señalado en el comentario es válido, así que aquí hay una revisión diferente que es inmune a eso:

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

Puede usar la función de confirmación JS.

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

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

Jason Gennaro
fuente
27
onsubmit="return confirm('Is the form filled out correctly?');"sería mucho más simple y el resultado sería el mismo.
Sk8erPeter
3

Simple y fácil :

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

Pablo Salazar
fuente
2

OK, solo cambia tu código a algo como esto:

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

También este es el código en ejecución, solo hago que sea más fácil ver cómo funciona, solo ejecute el código a continuación para ver el resultado:

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

Si desea aplicar alguna condición en el envío del formulario, puede usar este método

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

Una cosa siempre tenga en cuenta que el método y el atributo de acción escriben después de los atributos de envío

código 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
fuente