---
description: https://sweetalert2.github.io/#examples
---

# AJAX request preConfirm (ok)

## Vi du 1

```
Swal.fire({
  title: 'Submit your Github username',
  input: 'text',
  inputAttributes: {
    autocapitalize: 'off'
  },
  showCancelButton: true,
  confirmButtonText: 'Look up',
  showLoaderOnConfirm: true,
  preConfirm: (login) => {
    return fetch(`//api.github.com/users/${login}`)
      .then(response => {
        if (!response.ok) {
          throw new Error(response.statusText)
        }
        return response.json()
      })
      .catch(error => {
        Swal.showValidationMessage(
          `Request failed: ${error}`
        )
      })
  },
  allowOutsideClick: () => !Swal.isLoading()
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire({
      title: `${result.value.login}'s avatar`,
      imageUrl: result.value.avatar_url
    })
  }
})
```

## Vi du 2

<figure><img src="https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1E4Gk2ppVKb4olmnun%2Fuploads%2FWq4bswZWv5WrrqQtLBTJ%2FScreenshot_1.png?alt=media&#x26;token=77bd1738-c81d-47e6-9b7e-bc2ef90892b1" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1E4Gk2ppVKb4olmnun%2Fuploads%2FKi1zEuwW5InIAMWKnbTA%2FScreenshot_2.png?alt=media&#x26;token=86308ec1-1c84-4ab6-bb41-4f49832319b2" alt=""><figcaption></figcaption></figure>

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.33/dist/sweetalert2.min.css">
  <script src="//code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.33/dist/sweetalert2.all.min.js"></script>
</head>
<body>
  <button id="deleteUploadedFile">Delete</button>
  <script type="text/javascript">
  $('document').ready(function() {
    swal.fire({
      title: 'Multiple checkbox inputs',
      html: `
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="checkbox1">
        <label class="form-check-label" for="checkbox1">checkbox1</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="checkbox2">
        <label class="form-check-label" for="checkbox2">checkbox2</label>
      </div>`,
      focusConfirm: false,
      preConfirm: () => {
        console.log('Is checkbox1 checked:' + document.getElementById('checkbox1').checked);
        console.log('Is checkbox2 checked:' + document.getElementById('checkbox2').checked);
      }
    });
  });
  </script>
</body>
</html>

```

### Vi du 3

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.33/dist/sweetalert2.min.css">
  <script src="//code.jquery.com/jquery-3.6.0.js"></script>
  <script src="//code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.33/dist/sweetalert2.all.min.js"></script>
  <script type="text/javascript" src="https://momentjs.com/downloads/moment.min.js"></script>
</head>
<body>
  <script type="text/javascript">
  $('document').ready(function() {
    swal.fire({
      title: 'Select Ukraine',
      input: 'select',
      inputOptions: {
        'SRB': 'Serbia',
        'UKR': 'Ukraine',
        'HRV': 'Croatia'
      },
      inputPlaceholder: 'Select country',
      showCancelButton: true,
      inputValidator: function(value) {
        return new Promise(function(resolve, reject) {
          if (value === 'UKR') {
            resolve()
          } else {
            reject('You need to select Ukraine :)')
          }
        })
      }
    }).then(function(result) {
       swal.fire({
        type: 'success',
        html: 'You selected: ' + result.value
      })
    })
  });
  </script>
</body>
</html>
```

<figure><img src="https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1E4Gk2ppVKb4olmnun%2Fuploads%2FXNSQGd3xgFRfsUvg60bc%2FScreenshot_3.png?alt=media&#x26;token=1ebac7fe-607e-43ca-8f90-154d9d60b35c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1E4Gk2ppVKb4olmnun%2Fuploads%2FfNZjlXfWeAYLZaW8Y0iI%2FScreenshot_4.png?alt=media&#x26;token=c687f1ed-d549-4c1f-91e1-8857c12cd7b0" alt=""><figcaption></figcaption></figure>
