Sweatalert2 não está funcionando corretamente dentro do formulário

votos
2

Eu estou usando sweatalert2, quando o formulário submetido sweatalert2 está chegando mas fechando com qualquer (botão OK) pressione o botão que fecha muito rápido. mas quando eu uso em um simples botão, sem a forma, ele está funcionando corretamente.

const sweatalert = () => {
  return Swal('Good job!','You clicked the button!','success')
}
<!-- Include sweet alert 2. -->
<script src=https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.32.4/sweetalert2.all.min.js></script>

<form action= method=post enctype=multipart/form-data>
  <input 
    type=submit 
    name=addrecord 
    class=btn btn-primary 
    onclick=sweatalert() 
    style=margin-left:100px;
    value=Add Record
  />
</form>

<!-- Just here for visual purpose. -->
<hr/>
  
<p>Out side the form is OK.</p>
<input 
  type=submit 
  name=addrecord 
  class=btn btn-primary 
  onclick=sweatalert() 
  style=margin-left:100px; 
  value=Add
/>

Publicado 18/12/2018 em 11:05
fonte usuário
Em outras línguas...                            


1 respostas

votos
0

Isso está acontecendo porque a forma é submeter quando você clica no botão. Isto significa que a página será atualizada, e remover o alerta gerado. Você pode usar e.preventDefault()para parar a apresentação de acontecer. Você também precisa ter certeza de que você passar no eventmeio em sua onclickchamada de retorno:

onclick="sweatalert(event)"

Veja o exemplo abaixo:

function sweatalert(e) {
  e.preventDefault(); // stop default functionality of submission (ie. page refresh and data post)
  swal(
    'Good job!',
    'You clicked the button!',
    'success'
  )
}
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
  <button type="submit" name="addrecord" class="btn btn-primary" onclick="sweatalert(event)" style="margin-left:100px;">Add Record</button>
</form>

No entanto, note: Isto irá parar a apresentação do formulário de ocorrendo. Se você quiser enviar o formulário e, em seguida, exibir o alerta depois enviar os seus dados para PHP você deve usar AJAX. Se você usar jQuery você pode usar $.postou $.ajaxmétodos para enviar seus dados para PHP, e então usar uma função callback que será chamado se os dados foi enviado com sucesso.

Respondeu 18/12/2018 em 11:14
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more