title: SweetAlert2 get value from input in custom HTML
body: <p><strong>Problem</strong></p>
  
  <p>I'm using <a href="http://sweetalert2.github.io" rel="nofollow noreferrer">SweetAlert2</a>, opening an alert with custom HTML inside it, that shows a few input boxes. I want to use the normal confirm/cancel buttons from SweetAlert2 to send the value of those inputs to a socket.</p>
  
  <p><strong>Question</strong></p>
  
  <p>How can I get the values of those inputs, using the normal SweetAlert2 buttons? Please do not suggest using normal inputs or HTML buttons as that is a workaround and I don't want that.</p>
  
  <p><strong>Environment</strong></p>
  
  <p>I use jQuery, SweetAlert2, and a few unrelevant libraries such as Vue.js and Socket.io, etc.</p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>function addUser() {
      swal({
          html: `
              &lt;div class="field"&gt;
                  Email:
                  &lt;p class="control has-icons-left"&gt;
                  &lt;input class="input" type="email" placeholder="Email"&gt;
                      &lt;span class="icon is-small is-left"&gt;
                          &lt;i class="mdi mdi-email"&gt;&lt;/i&gt;
                      &lt;/span&gt;
                  &lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="field"&gt;
                  Name:
                  &lt;p class="control has-icons-left"&gt;
                      &lt;input class="input" type="text" placeholder="Name"&gt;
                      &lt;span class="icon is-small is-left"&gt;
                          &lt;i class="mdi mdi-account"&gt;&lt;/i&gt;
                      &lt;/span&gt;
                  &lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="field"&gt;
                  Password:
                  &lt;p class="control has-icons-left"&gt;
                      &lt;input class="input" type="text" placeholder="Password"&gt;
                      &lt;span class="icon is-small is-left"&gt;
                          &lt;i class="mdi mdi-key"&gt;&lt;/i&gt;
                      &lt;/span&gt;
                  &lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="field"&gt;
                  Level:
                  &lt;p class="control has-icons-left"&gt;
                      &lt;input class="input" type="text" placeholder="Level"&gt;
                      &lt;span class="icon is-small is-left"&gt;
                          &lt;i class="mdi mdi-arrow-up"&gt;&lt;/i&gt;
                      &lt;/span&gt;
                  &lt;/p&gt;
              &lt;/div&gt;
          `,
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Cancel',
          confirmButtonClass: 'button is-success has-right-spacing',
          cancelButtonClass: 'button is-danger',
          buttonsStyling: false,
          showCancelButton: true
      })
  }
  </code></pre>