Submit PHP Form Data Menggunakan Vanilla JavaScript tanpa refresh halaman

Feri Rimanda Agustus 16, 2021

Buatlah sebuah database dengan nama vanilla_js (penamaan bebas), kemudian buatlah sebuah table dengan nama data_sample, berikut struktur tablenya:

CREATE TABLE `data_sample` (
	`id` INT(11) NOT NULL AUTO_INCREMENT,
	`nama` VARCHAR(250) NULL DEFAULT NULL,
	`email` VARCHAR(50) NULL DEFAULT NULL,
	`website` VARCHAR(50) NULL DEFAULT NULL,
	`comment` TEXT NULL,
	`gender` ENUM('Male','Female') NULL DEFAULT NULL,
	PRIMARY KEY (`id`)
)
COLLATE='latin1_swedish_ci'
ENGINE=InnoDB
;

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
    <title>Submit Form Without Page Refresh</title>
  </head>
  <body>
    <div class="container">
      <h2 class="text-center mt-5 mb-5">
        Submit Form Data Menggunakan Vanilla JavaScript tanpa refresh halaman
      </h2>
      <span id="message"></span>
      <form id="sample_form">
        <div class="card">
          <div class="card-header">Contoh Form</div>
          <div class="card-body">
            <div class="form-group">
              <label>Nama <span class="text-danger">*</span></label>
              <input
                type="text"
                name="nama"
                id="nama"
                class="form-control form_data"
              />
            </div>
            <div class="form-group">
              <label>Email <span class="text-danger">*</span></label>
              <input
                type="text"
                name="email"
                id="email"
                class="form-control form_data"
              />
            </div>
            <div class="form-group">
              <label>Website <span class="text-danger">*</span></label>
              <input
                type="text"
                name="website"
                id="website"
                class="form-control form_data"
              />
            </div>
            <div class="form-group">
              <label>Comment <span class="text-danger">*</span></label>
              <textarea
                name="comment"
                id="comment"
                cols="40"
                rows="5"
                class="form-control form_data"
              ></textarea>
            </div>
            <div class="form-group">
              <label>Gender <span class="text-danger">*</span></label>
              <select name="gender" id="gender" class="form-control form_data">
                <option value="Male">Male</option>
                <option value="Female">Female</option>
              </select>
            </div>
          </div>
          <div class="card-footer">
            <button
              type="button"
              name="submit"
              id="submit"
              class="btn btn-primary"
              onclick="save_data(); return false;"
            >
              Save
            </button>
          </div>
        </div>
      </form>
    </div>
  </body>
</html>

<script>
  function save_data() {
    var form_element = document.getElementsByClassName("form_data"); // ambil element class form_data
    var form_data = new FormData(); // buat object baru dari class FormData

    // looping setiap element class form_data
    for (var count = 0; count < form_element.length; count++) {
      form_data.append(form_element[count].name, form_element[count].value); // append name and value to form_data
    }

    document.getElementById("submit").disabled = true; // disable button submit

    // Request AJAX
    var ajax_request = new XMLHttpRequest();
    ajax_request.open("POST", "proses_data.php"); // method, url
    ajax_request.send(form_data); // kirim form_data

    ajax_request.onreadystatechange = function () {
      // 4 = jika request selesai dan respon siap, 200 = status OK
      if (ajax_request.readyState == 4 && ajax_request.status == 200) {
        document.getElementById("submit").disabled = false;
        document.getElementById("sample_form").reset(); // reset form
        document.getElementById("message").innerHTML =
          ajax_request.responseText; // callback dari server
        setTimeout(function () {
          document.getElementById("message").innerHTML = "";
        }, 2000); // reset alert message
      }
    };
  }
</script>

proses_data.php

<?php
if(isset($_POST['nama'])){
    $connect = new PDO("mysql:host=localhost; dbname=vanilla_js", "root", ""); // atur koneksi ke database

    // siapkan data
    $data = array(
        ':nama'     => $_POST["nama"],
        ':email'    => $_POST["email"],
        ':website'  => $_POST["website"],
        ':comment'  => $_POST["comment"],
        ':gender'   => $_POST["gender"],
    );

    // siapkan query
    $query = "INSERT INTO data_sample(nama, email, website, comment, gender)
             VALUES(:nama, :email, :website, :comment, :gender)";
    $statement = $connect->prepare($query);
    $statement->execute($data); // eksekusi data

    // callback jika sukses
    echo '<div class="alert alert-success">Data disimpan!</div>';

}
?>

Demo Program

Posting Komentar

0 Komentar