Caixa de diálogo Enviar formulário JavaScript - Confirmar ou cancelar envio


183

Para um formulário simples com um alerta que pergunta se os campos foram preenchidos corretamente, preciso de uma função que faça isso:

  • Mostra uma caixa de alerta quando o botão é clicado com duas opções:

    • Se clicar em "OK", o formulário é enviado
    • Se você clicar em cancelar, a caixa de alerta será fechada e o formulário poderá ser ajustado e reenviado

Eu acho que uma confirmação de JavaScript funcionaria, mas não consigo descobrir como.

O código que tenho agora é:

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>

Respostas:


399

Uma simples confirmação de JavaScript embutido seria suficiente:

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

Não há necessidade de uma função externa, a menos que você esteja executando a validação , o que pode ser feito da seguinte maneira:

<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

O problema apontado no comentário é válido, então aqui está uma revisão diferente que é imune a isso:

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

25

Você poderia usar a função de confirmação 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?');"seria muito mais simples e o resultado seria o mesmo.
`` #

3

Simples e fácil :

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


2

OK, basta alterar seu código para algo como isto:

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

Além disso, este é o código em execução, apenas para facilitar a visualização de como funciona, basta executar o código abaixo para ver o 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>


0

Se você deseja aplicar alguma condição no envio do formulário, pode 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>

Lembre-se sempre de que o atributo de método e ação grava após atributos de submissã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;
   }  
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.