Input Data ke Database Dengan Ajax tanpa reload

Kode index.php


<!DOCTYPE html>
<html>
<head>
	<title>HeadBOOK</title>
	<link rel="stylesheet" type="text/css" href="Assets/Project.css">
    <link rel="icon" type="image/png" href="Assets/icon.png">
    <script type="text/javascript" src="Assets/jquery.js"></script>

</head>
<body>
	<!--header-->
	<div class="content content-header clearfix">
	 <div class="wrapper">
		<div id="judul">
          <h1 id="headr">HeadBook</h1>
       </div>
		<form action="login.php" method="post">
		<div class="group-form">
			<label for="email">Input Email Anda</label>
			<input type="text" name="email">

		</div>

		<div class="group-form">
			<label for="password">Input Password Anda</label>
			<input type="password" name="password">
		</div>

		<div class="group-form">
		 	<input type="submit" value="Log In" name="login">
		</div>

		</form>
	 </div>
    </div>

	<!--content-->
  <div class="content content-middle clearfix">
  <div class="wrapper">
  <div class="middle-left">
    <h2> Headbook membantu Anda terhubung dan berbagi dengan orang-orang dalam kehidupan Anda. </h2> <br>
    <img src="Assets/networking.png" height="300" width="350">
    </div>


    <div class="middle-right">
      <h3>Daftar</h3>
      <p>Gratis, Seumur Hidup</p>
      <form action="" method="post" class="forminput">
        <input type="text" placeholder="Nama Depan" name="depan" class="inline" id="Depan">
        <input type="text" placeholder="Nama Belakang" name="belakang" class="inline" id="Belakang">
        <input type="email" placeholder="Email" name="email" class="" id="Email">
        <input type="password" placeholder="Password" name="password" class="" id="Pass">
        <input type="date" placeholder="Tanggal Lahir" name="tanggal" class="" id="Tanggal">
        <input type="radio" name="jk" value="Laki-Laki" id="Jenis"> Laki-Laki
		<input type="radio" name="jk" value="Perempuan" id="Jenis"> Perempuan
        <br>
        <input type="submit" value="Daftar" name="register" id="input">

      </form>

    </div>

    </div>

  </div>


  <script type="text/javascript">

      $('#input').on('click',function(){
        var nama = $('#Depan').val();
        var nama1 = $('#Belakang').val();
        var email = $('#Email').val();
        var Password = $('#Pass').val();
        var tanggal = $('#Tanggal').val();
        var jenis = $('#Jenis').val();
        $.ajax({
          method: "POST",
          url: "register.php",
          data: { Nama_Depan : nama, Nama_Belakang : nama1,Email : email, password : Password,Tanggal : tanggal, Jenis : jenis,type:"insert"},

        });
      });
  </script>

	<!--Footer-->
  <div class="content content-footer clearfix">
	 <div class="wrapper">
       <center>
       <br>
       <h4>CopyRight</h4>

    </div>
  </div>

</body>
</html>

Kode register.php

 <?php
  require_once("config.php");
  if($_POST['type'] == 'insert'){
  $depan = $_POST['Nama_Depan'];
  $belakang = $_POST['Nama_Belakang'];
  $email = $_POST['Email'];
  $pass = $_POST['password'];
  $md5 = md5($pass);
  $tanggal = $_POST['Tanggal'];
  $jenis = $_POST['Jenis'];
  $conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name) or die ("Koneksi gagal");



  $mysqli = "INSERT INTO user (Nama_Depan, Nama_Belakang, Email, Password, Tanggal_Lahir, Jenis_Kelamin) VALUES ('$depan', '$belakang', '$email', '$md5', '$tanggal', '$jenis')";
  $result = mysqli_query($conn, $mysqli);
  mysqli_close($conn);
  }
?>

Kode config.php

 <?php

$db_host = "localhost";
$db_user = "root";
$db_pass = "";
$db_name = "headbook";

try {
    //create PDO connection
    $db = new PDO("mysql:host=$db_host;dbname=$db_name", $db_user, $db_pass);
} catch(PDOException $e) {
    //show error
    die("Terjadi masalah: " . $e->getMessage());
}

ajax php html

@Alam99

13 Kontribusi 0 Poin

Diperbarui 5 tahun yang lalu

2 Jawaban:

Jawaban Terpilih

Kita harus mencegah sifat normal dari browser, yaitu ketika di klik dia akan reload halaman. Caranya :

<pre> $('#input').on('click',function(){ //kode kamu return false })

//atau terima event di parameter

$( "#input" ).click(function( event ) { event.preventDefault(); //kodekamu }) </pre>

@hilmanski

2670 Kontribusi 2132 Poin

Dipost 5 tahun yang lalu

Tanggapan

silahkan belajar dasar ajax disini https://sekolahkoding.com/kelas?search=ajax

@hilmanski

saya pake yg return false berhasil tidak reload, tp datanya ga kesimpan di database. gimana ya nanganinnya? di bagian "//kode kamu" itu isinya apa ya?

@syarika19

11 Kontribusi 0 Poin

Dipost 5 tahun yang lalu

Tanggapan

bisa kasih contoh kode utuhnya bro?

@syarika19

Kelas Premium! Belajar bikin website dari nol sekarang

Input Data ke Database Dengan Ajax tanpa reload

Kelas Premium!
Belajar bikin website dari nol sekarang