Sweatalert2 funktioniert nicht richtig in Form

stimmen
2

Ich verwende sweatalert2, wenn das Formular abgeschickt sweatalert2 kommt aber mit einer beliebigen Taste (OK-Taste) Schließen es sehr schnell schließen. aber wenn ich in einem einfachen Knopfdruck, ohne die Form zu verwenden, es funktioniert einwandfrei.

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

Veröffentlicht am 18/12/2018 um 11:05
quelle vom benutzer
In anderen Sprachen...                            


1 antworten

stimmen
0

Dies geschieht , weil das Formular abschicken, wenn Sie auf die Schaltfläche klicken. Das heißt , die Seite wird aktualisiert, und entfernen Sie die Warnung generiert. Sie können verwenden e.preventDefault()die Vorlage zu stoppen geschieht. Sie müssen auch sicherstellen , dass Sie den Pass eventdurch in Ihrem onclickRückruf:

onclick="sweatalert(event)"

Siehe Beispiel unten:

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>

Allerdings müssen beachten: Dies wird die Vorlage des Formulars stoppen auftritt. Wenn Sie das Formular abschicken und zeigen dann die Warnung nach Ihren Daten an PHP einreichen sollten Sie AJAX verwenden. Wenn Sie jQuery verwenden , können Sie verwenden $.postoder $.ajaxMethoden , um Ihre Daten zu PHP zu senden, und dann eine Callback - Funktion verwendet werden, die aufgerufen wird , wenn Ihre Daten erfolgreich übermittelt wurden.

Beantwortet am 18/12/2018 um 11:14
quelle vom benutzer

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