Sweatalert2 nie działa prawidłowo wewnątrz postaci

głosy
2

Używam sweatalert2, gdy forma złożona sweatalert2 nadchodzi ale zamykający z dowolnym klawiszem Naciśnij przycisk (OK) to zamknąć bardzo szybko. ale kiedy używać w prosty przycisku bez formy, to działa poprawnie.

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

Utwórz 18/12/2018 o 11:05
źródło użytkownik
W innych językach...                            


1 odpowiedzi

głosy
0

Dzieje się tak dlatego, że forma jest złożenie po kliknięciu przycisku. Oznacza to, że strona zostanie odświeżona i usunąć alert wygenerowany. Można użyć e.preventDefault(), aby zatrzymać przedstawienie dzieje. Należy również upewnić się przekazać eventpoprzez w onclickoddzwanianie:

onclick="sweatalert(event)"

Patrz przykład poniżej:

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>

Jednak należy pamiętać: To zatrzyma przedstawienie postaci występującej. Jeśli chcesz przesłać formularz, a następnie wyświetli alert po przesłaniu danych do PHP należy użyć AJAX. Jeśli używasz jQuery można użyć $.postalbo $.ajaxmetody wysyłania danych do PHP, a następnie użyj funkcji zwrotnej, która zostanie wywołana, jeśli dane zostały przedłożone pomyślnie.

Odpowiedział 18/12/2018 o 11:14
źródło użytkownik

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