Sweatalert2 ne fonctionne pas correctement à l'intérieur de la forme

voix
2

J'utilise sweatalert2, lorsque le formulaire soumis sweatalert2 vient mais il clôture avec le bouton (bouton OK) il fermer très vite. mais quand je l'utilise dans un simple bouton sans la forme, il fonctionne correctement.

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

Créé 18/12/2018 à 11:05
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
0

Cela se produit parce que la forme soumet lorsque vous cliquez sur le bouton. Cela signifie que la page sera actualisée et supprimer l'alerte générée. Vous pouvez utiliser e.preventDefault()pour arrêter la soumission de se produire. Vous devez également vous assurer que vous passez le eventpar dans votre onclickrappel:

onclick="sweatalert(event)"

Voir l'exemple ci-dessous:

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>

Cependant, notez: Cela arrêtera la soumission du formulaire se produit. Si vous voulez soumettre le formulaire, puis afficher l'alerte après avoir soumis vos données à PHP , vous devez utiliser AJAX. Si vous utilisez jQuery , vous pouvez utiliser $.postou $.ajaxméthodes pour envoyer vos données à PHP, puis utiliser une fonction de rappel qui sera appelée si vos données a été soumis avec succès.

Créé 18/12/2018 à 11:14
source utilisateur

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