Cara Membuat Fitur Registrasi dengan menggunakan Bootstrap Modal dan jQuery AJAX

Membuat Fitur Registrasi dengan Bootstrap Modal dan jQuery AJAX

—

by

Webbiz.ID
in ,

Berikut ini adalah contoh kode untuk membuat fitur registrasi menggunakan Bootstrap Modal dan jQuery AJAX.

See the Pen Membuat Fitur Registrasi dengan Bootstrap Modal dan jQuery AJAX by WebbizID (@De-Orchids) on CodePen.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Registrasi</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#registrationModal">
    Registrasi
  </button>

  <!-- Modal -->
  <div class="modal fade" id="registrationModal" tabindex="-1" role="dialog" aria-labelledby="registrationModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="registrationModalLabel">Registrasi</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <form id="registrationForm">
            <div class="form-group">
              <label for="name">Nama</label>
              <input type="text" class="form-control" id="name" name="name" required>
            </div>
            <div class="form-group">
              <label for="email">Email</label>
              <input type="email" class="form-control" id="email" name="email" required>
            </div>
            <div class="form-group">
              <label for="password">Password</label>
              <input type="password" class="form-control" id="password" name="password" required>
            </div>
            <button type="submit" class="btn btn-primary">Daftar</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#registrationForm').submit(function(e) {
        e.preventDefault();
        var name = $('#name').val();
        var email = $('#email').val();
        var password = $('#password').val();
        $.ajax({
          url: 'registrasi.php',
          type: 'POST',
          data: {
            name: name,
            email: email,
            password: password
          },
          success: function(response) {
            // Handle success response
          },
          error: function(xhr, status, error) {
            // Handle error response
          }
        });
      });
    });
  </script>
</body>
</html>
HTML

Pastikan Anda telah menyertakan library Bootstrap dan jQuery dalam kode HTML Anda. Anda juga perlu membuat file registrasi.php untuk memproses data registrasi yang dikirim melalui AJAX.

Dengan menggunakan kode di atas, Anda dapat membuat fitur registrasi yang responsif, menarik menggunakan Bootstrap Modal dan jQuery AJAX. Ketika pengguna mengklik tombol “Registrasi”, modal akan muncul dengan form registrasi yang dapat diisi. Setelah pengguna mengisi form dan menekan tombol “Daftar”, data akan dikirim ke server menggunakan AJAX dan diproses di file registrasi.php.

Tutorial lainnya:

Anda dapat menyesuaikan kode ini sesuai dengan kebutuhan Anda, seperti menambahkan validasi form atau menambahkan fitur lainnya.

Artikel Terbaru ⭐