Daftar dan Belajar Sekarang!

Input Data ke Database Dengan Ajax tanpa reload

foto verified logo Alam99
12 Kontribusi 0 Coto
1 minggu yang lalu
Halo, Saya sedang membuat website networking untuk tugas.. dan saya menggunakan ajax untuk menginput data ke database agar data masuk tanpa reload.. Datanya berhasil masuk dan tidak ada error, tapi browser masih mereload halaman untuk input datanya ke database.. Mohon solusinya kakak" soalnya tugas saya tidak diterima jika ajax nya blm berhasil.. Terima kasih sebelumnya 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>
       <h5>Made Alam Kamajana (1705552023)</h5>
       <h5>I Dewa Gede Superatikadewa (1705552019)</h5>
       </center>
       
    </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());
}

Tag: ajax php html

✔ Forum ini sudah terjawab


Jawaban
foto hilmanrdn
1556 Kontribusi 1091 Coto
1 minggu yang lalu
Kita harus mencegah sifat normal dari browser, yaitu ketika di klik dia akan reload halaman. Caranya :
$('#input').on('click',function(){
//kode kamu
return false
})

//atau terima event di parameter

$( "#input" ).click(function( event ) {
  event.preventDefault();
//kodekamu
})
answered icon
foto hilmanrdn
1556 Kontribusi 1091 Coto
1 minggu yang lalu
Kita harus mencegah sifat normal dari browser, yaitu ketika di klik dia akan reload halaman. Caranya :
$('#input').on('click',function(){
//kode kamu
return false
})

//atau terima event di parameter

$( "#input" ).click(function( event ) {
  event.preventDefault();
//kodekamu
})
  • Wah mantap bang, saya menggunakan event dan berhasil.. tapi untuk memunculkan teks di bawahnya seperti "daftar berhasil" dan data yang di ketik di form hilang gimana bang, soalnya data yang ada di form tidak kereset bang tapi sudah masuk ke database? hehe maaf saya banyak tanya bang.. terima kasih banyak - Alam99
  • silahkan belajar dasar ajax disini https://sekolahkoding.com/kelas?search=ajax - hilmanrdn
  • Siap Bang.... - Alam99

Login untuk tulis komentar



Login untuk diksusi di forum sekolah koding