Sweatalert2 no está funcionando adecuadamente dentro del formulario

votos
2

Estoy usando sweatalert2, cuando el formulario enviado sweatalert2 está llegando pero cerrando con cualquier pulse el botón (botón OK) se cierra muy rápido. pero cuando se utiliza en un simple botón sin el formulario, que está funcionando correctamente.

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 el 18/12/2018 a las 11:05
fuente por usuario
En otros idiomas...                            


1 respuestas

votos
0

Esto sucede porque la forma se somete al hacer clic en el botón. Esto significa que la página se actualizará y retire la alerta generada. Se puede utilizar e.preventDefault()para detener la presentación del suceso. También es necesario asegurarse de que pase el eventmedio en su onclickdevolución de llamada:

onclick="sweatalert(event)"

Consulte el siguiente ejemplo:

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>

Sin embargo, tenga en cuenta: Esto detendrá la presentación de la forma de origen. Si desea enviar el formulario a continuación, mostrar la alerta después de enviar sus datos a PHP que debe usar AJAX. Si utiliza jQuery puede utilizar $.posto $.ajaxmétodos para enviar sus datos a PHP, y luego utilizar una función de devolución de llamada que se llamará si sus datos se ha enviado correctamente.

Respondida el 18/12/2018 a las 11:14
fuente por usuario

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