Postingan lainnya
cara agar form saat disubmit agar tidak langsung masuk ke database
sy membuat aplikasi pendaftaran berbabis web nahh untuk form pendaftarannyakan saya buat menjadi 2 page,,page pertama untuk data diri dan yang page ke 2 untuk keahlian.. masalahnya bagaimana ya caranya agar saat sudah mengisi form page ke 1 saat dipencet tombol berikutnya tidak langsung masuk kedatabase tetapi saat bersamaan setelah mengisi page ke 2.mohon bantuannya
datadiri.php
<?php
include '../config/koneksi.php';
include '../function/function.js';
if(isset($_['submit'])){
//id pendaftaran
$getMaxId = mysqli_query($conn, "SELECT MAX(RIGHT(id_pendaftaran, 5)) AS id FROM tb_datadiri");
$d = mysqli_fetch_object($getMaxId);
$generateId = 'P'.date('Y').sprintf("%05s", $d->id + 1);
//proses insert
$insert = mysqli_query($conn, "INSERT INTO tb_datadiri VALUES(
'".$generateId."',
'".date ('Y-m-d')."',
'".$_POST['alamat_email']."',
'".$_POST['nama_lengkap']."',
'".$_POST['jenis_kelamin']."',
'".$_POST['tempat_lahir']."',
'".$_POST['tgl_lahir']."',
'".$_POST['agama']."',
'".$_POST['alamat']."',
'".$_POST['provinsi']."',
'".$_POST['kabupaten']."',
'".$_POST['kecamatan']."',
'".$_POST['kelurahan']."',
'".$_POST['telp']."',
'".$_POST['telp_ortu']."',
'".$_POST['akun_instagram']."',
'".$_POST['status_sklh']."',
'".$_POST['asal_sklh']."',
'".$_POST['pekerjaan']."'
)");
if($insert){
echo '<script>window.location="tambahan.php?id='.$generateId.'"</script';
}else{
echo 'huft' .mysqli_error($conn);
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="widht=device-widht, initial-scale=1">
<title>pendaftaran</title>
<link rel="stylesheet" type="text/css" href="../css/form-style.css">
<link rel="icon" href="../img/logograf.png">
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">
<img src="../asset/img/logograf.png">
<h2>FORMULIR PENDAFTARAN</h2>
<p>Isi Dengan Benar Dan Lengkap</p>
</div>
<div class="form-container">
<form action="" method="post">
<fieldset>
<legend>Informasi Akun</legend>
<div class="form-grup">
<div class="label">
<label>Alamat Email</label>
</div>
<div class="input">
<input type="email" name="alamat_email" placeholder="alfa @gmail.com">
</div>
</div>
</fieldset>
<fieldset>
<legend>Data Diri</legend>
<div class="form-grup">
<div class="label">
<label>Nama Lengkap</label>
</div>
<div class="input">
<input type="text" name="nama_lengkap" placeholder="masukkan nama lengkap anda" required>
</div>
</div>
<div class="form-grup">
<div class="label">
<label>Jenis Kelamin</label>
</div>
<div class="input">
<input type="radio" name="jenis_kelamin" value="pria">Pria
<input type="radio" name="jenis_kelamin" value="wanita">Wanita
</div>
</div>
<div class="form-grup">
<div class="label">
<label>Tempat Lahir</label>
</div>
<div class="input">
<input type="text" name="tempat_lahir" placeholder="masukkan tempat lahir anda">
</div>
</div>
<div class="form-grup">
<div class="label">
<label>Tanggal Lahir</label>
</div>
<div class="input">
<input type="date" name="tgl_lahir">
</div>
</div>
<div class="form-grup">
<div class="label">
<label>Agama</label>
</div>
<div class="input">
<select name="agama">
<option value="">Pilih</option>
<option value="islam">Islam</option>
<option value="kristen">Kristen</option>
<option value="katholik">Katholik</option>
<option value="hindu">Hindu</option>
<option value="budha">Budha</option>
<option value="konghucu">Konghucu</option>
</select>
</div>
</div>
<div class="form-grup">
<div class="label">
<label>Alamat</label>
</div>
<div class="input">
<textarea name="alamat" placeholder="masukkan alamat anda"></textarea>
</div>
</div>
<div class="form-grup">
<div class="label">
<label>Provinsi</label>
</div>
<div class="input">
<select name="provinsi" id="provinsi">
<option value="">pilih provinsi</option>
</select>
</div>
</div>
<div class="form-grup">
<div class="label">
<label>Kabupaten</label>
</div>
<div class="input">
<select name="kabupaten" id="kabupaten">
<option value=""></option>
</select>
</div>
</div>
<div class="form-grup">
<div class="label">
<label>Kecamatan</label>
</div>
<div class="input">
<select name="kecamatan" id="kecamatan">
<option value=""></option>
</select>
</div>
</div>
<div class="form-grup">
<div class="label">
<label>Kelurahan</label>
</div>
<div class="input">
<select name="kelurahan" id="kelurahan">
<option value=""></option>
</select>
</div>
</div>
<div class="form-grup">
<div class="label">
<label>No Tlp/Hp</label>
</div>
<div class="input">
<input type="text" name="telp" maxlength="14" placeholder="masukkan nomor hp anda" onkeypress="return Angkasaja(event)">
</div>
</div>
<div class="form-grup">
<div class="label">
<label>Telp Ortu</label>
</div>
<div class="input">
<input type="text" name="telp_ortu" maxlength="14" placeholder="masukkan nomor ortu anda" onkeypress="return Angkasaja(event)">
</div>
</div>
<div class="form-grup">
<div class="label">
<label>Akun Instagram</label>
</div>
<div class="input">
<input type="text" name="akun_instagram" placeholder="masukkan jika punya">
</div>
</div>
<div class="form-grup">
<div class="label">
<label>Status Sekolah</label>
</div>
<div class="input">
<select name="status_sklh">
<option value="">Pilih</option>
<option value="masih sekolah/kuliah">Masih Sekolah/Kuliah</option>
<option value="lulul sekolah">Lulus Sekolah</option>
<option value="lulus kuliah">Lulus Kuliah</option>
<option value="sudah bekerja">Sudah Bekerja</option>
</select>
</div>
</div>
<div class="form-grup">
<div class="label">
<label>Asal Sekolah</label>
</div>
<div class="input">
<input type="text" name="asal_sklh" placeholder="masukkan asal sekolah anda">
</div>
</div>
<div class="form-grup">
<div class="label">
<label>Pekerjaan</label>
</div>
<div class="input">
<input type="text" name="pekerjaan" placeholder="pekerjaan anda sekarang">
</div>
</div>
</fieldset>
<div class="form-grup">
<a href="tambahan.php?id="><button type="submit" name="submit">Berikutnya</button></a>
</div>
</form>
</div>
</div>
<script src="../asset/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type: 'POST',
url: "get_provinsi.php",
cache: false,
success: function(msg){
$("#provinsi").html(msg);
}
});
$("#provinsi").change(function(){
var provinsi = $("#provinsi").val();
$.ajax({
type: 'POST',
url: "get_kabupaten.php",
data: {provinsi: provinsi},
cache: false,
success: function(msg){
$("#kabupaten").html(msg);
}
});
});
$("#kabupaten").change(function(){
var kabupaten = $("#kabupaten").val();
$.ajax({
type: 'POST',
url: "get_kecamatan.php",
data: {kabupaten: kabupaten},
cache: false,
success: function(msg){
$("#kecamatan").html(msg);
}
});
});
$("#kecamatan").change(function(){
var kecamatan = $("#kecamatan").val();
$.ajax({
type: 'POST',
url: "get_kelurahan.php",
data: {kecamatan: kecamatan},
cache: false,
success: function(msg){
$("#kelurahan").html(msg);
}
});
});
});
//value
</script>
</body>
</html>
tambahan.php
<?php
include '../config/koneksi.php';
include '../function/function.js';
if(isset($_POST['confirm'])){
$getMaxId = mysqli_query($conn, "SELECT MAX(RIGHT(id_tambahan, 5)) AS id FROM tb_tambahan");
$d = mysqli_fetch_object($getMaxId);
$generateId = 'P'.date('Y').sprintf("%05s", $d->id + 1);
//proses insert
$insert = mysqli_query($conn, "INSERT INTO tb_tambahan VALUES(
'".$generateId."',
'".$_POST['mdl_pembelajaran']."',
'".$_POST['jenis_program']."',
'".$_POST['program_studi']."',
'".$_POST['jam_pilihan']."',
'".$_POST['mulai_pend']."',
'".$_POST['informasi_dr']."',
'".$_POST['nik']."',
'".$_POST['nm_ayah']."',
'".$_POST['nm_ibu']."',
'".$_POST['kendaraan']."',
'".$_POST['penerima_kps']."',
'".$_POST['penerima_kip']."',
'".$_POST['layak_pip']."',
'".$_POST['catatan']."'
)");
if($insert){
echo '<script>window.location="laporan.php?id='.$generateId.'"</script>';
}else{
echo 'Data Anda gagal dimasukkan silahkan coba lagi!' .mysqli_error($conn);
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="widht=device-widht, initial-scale=1">
<title>pendaftaran</title>
<link rel="stylesheet" type="text/css" href="../css/form-style.css">
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">
<img src="../img/logograf.png">
<h2>FORMULIR PELENGKAP</h2>
<p>Isi Dengan Benar Dan Lengkap</p>
</div>
<div class="form-container">
<form action="" method="post" autocomplete="off">
<fieldset>
<legend>Informasi Tambahan</legend>
<div class="form-grup">
<div class="label">
<label>Model Pembelajaran</label>
</div>
<div class="input">
<input type="radio" name="mdl_pembelajaran" value="online">Online
<input type="radio" name="mdl_pembelajaran" value="offline">Offline
</div>
</div>
<div class="form-grup">
<div class="label">
<label>Jenis Program</label>
</div>
<div class="input">
<select name="jenis_program">
<option value="Pilih">Pilih</option>
<option value="intensif">Intensif</option>
<option value="privat">Privat</option>
<option value="studi kasus">Studi Kasus</option>
<option value="sertifikasi">Sertifikasi</option>
</select>
</div>
</div>
<div class="form-grup">
<div class="label">
<label>Program Studi</label>
</div>
<div class="input">
<select name="program_studi">
<option value="">Pilih</option>
<option value="administrasi perkantoran">Administrasi Perkantoran</option>
<option value="komp. perkantoran">Komp. Perkantoran</option>
<option value="komp. akuntansi">Komp. Akuntansi</option>
<option value="komp. arsitek">Komp. Arsitek</option>
<option value="desain grafis">Desain Grafis</option>
<option value="rancang bangun">Rancang Bangun</option>
<option value="web design & programming">Web Design & Programming</option>
<option value="akuntansi">Akuntansi</option>
<option value="fotografi">Fotografi</option>
<option value="video editing">Video Editing</option>
<option value="social media marketing">Social Media Marketing</option>
<option value="english conv">English Conv</option>
<option value="sertifikasi office">Sertifikasi Office</option>
</select>
</div>
</div>
<div class="form-grup">
<div class="label">
<label>Jam Pilihan</label>
</div>
<div class="input">
<input type="time" name="jam_pilihan">
</div>
</div>
<div class="form-grup">
<div class="label">
<label>Mulai Pendidikan</label>
</div>
<div class="input">
<input type="date" name="mulai_pend">
</div>
</div>
<div class="form-grup">
<div class="label">
<label>Informasi Dari</label>
</div>
<div class="input">
<select name="informasi_dr">
<option value="">Pilih</option>
<option value="alumni alfabank">Alumni Alfabank</option>
<option value="website">Website</option>
<option value="google">Google</option>
<option value="facebook">Facebook</option>
<option value="instagram">Instagram</option>
<option value="brosur">Brosur</option>
<option value="teman">Teman</option>
<option value="keluarga">Keluarga</option>
<option value="media elektronik/cetak">Media elektronik/Cetak</option>
<option value="presentasi disekolah">Presentasi DiSekolah</option>
</select>
</div>
</div>
<div class="form-grup">
<div class="label">
<label>NIK</label>
</div>
<div class="input">
<input type="text" name="nik" maxlength="16" placeholder="masukkan nomor nik anda" onkeydown="return Angkasaja(event)">
</div>
</div>
<div class="form-grup">
<div class="label">
<label>Nama Ayah</label>
</div>
<div class="input">
<input type="text" name="nm_ayah" placeholder="masukkan nama ayah anda">
</div>
</div>
<div class="form-grup">
<div class="label">
<label>Nama Ibu</label>
</div>
<div class="input">
<input type="text" name="nm_ibu" placeholder="masukkan nama ibu anda">
</div>
</div>
<div class="form-grup">
<div class="label">
<label>Alat Transportasi</label>
</div>
<div class="input">
<select name="kendaraan">
<option value="">Pilih</option>
<option value="jalan kaki">Jalan Kaki</option>
<option value="sepeda">Sepeda</option>
<option value="motor">Motor</option>
<option value="mobil">Mobil</option>
<option value="bus/ojol">Bus/Ojol</option>
</select>
</div>
</div>
<div class="form-grup">
<div class="label">
<label>Apakah Anda Penerima KPS(Kartu Perlindungan Sosial)</label>
</div>
<div class="input">
<input type="radio" name="penerima_kps" value="iya">Iya
<input type="radio" name="penerima_kps" value="tidak">Tidak
</div>
</div>
<div class="form-grup">
<div class="label">
<label>Apakah Anda Penerima KIP(Kartu Indonesia Pintar)</label>
</div>
<div class="input">
<input type="radio" name="penerima_kip" value="iya">Iya
<input type="radio" name="penerima_kip" value="tidak">Tidak
</div>
</div>
<div class="form-grup">
<div class="label">
<label>Menurut Anda Apakah Anda Layak Mendapatkan PIP.Jika Iya Pilih Alasan Berikut</label>
</div>
<div class="input">
<select name="layak_pip">
<option value="">Pilih</option>
<option value="-">-</option>
<option value="pemegang pkh/kip/kks/kps">Pemegang PKH/KIP/KKS/KPS</option>
<option value="yatim/piatu/panti asuhan">Yatim/Piatu/Panti Asuhan</option>
<option value="dampak bencan alam">Dampak Bencana Alam</option>
<option value="pernah drop out">Pernah Drop Out</option>
<option value="keluarga terpidana/berada dilapas">Keluarga Terpidana/Berada Dilapas</option>
<option value="kelainan fisik">Kelainan Fisik</option>
<option value="warga kurang mampu">Warga Kurang Mampu</option>
</select>
</div>
</div>
<div class="form-grup">
<div class="label">
<label>Catatan</label>
</div>
<div class="input">
<textarea name="catatan" placeholder="catatan(boleh kosong)" onkeypress="checkNulltoStrip(string)"></textarea>
</div>
</div>
</fieldset>
<div class="btn">
<div class="btn-back">
<p>Apakah yakin ingin menghapus data ini?</p>
<button type="submit" name="confirm" class="yes">Ya</button>
<button class="no">Tidak</button>
</div>
<div class="btn-front">Kirim</div>
</div>
</form>
</div>
</body>
<script src="../script.js"></script>
</html>
0
Tanggapan
Validate trus masukin input mana aja yg harus diisi (termasuk di page 2), jadinya kalo page 2 blm diisi ga bakal masuk ke database.
1 Jawaban:
<div>kalo menurut saya, kamu bisa gunakan 2 cara,<br>Cara pertama, menggunakan session, saat submit data pertama, simpan datanya sementara menjadi session, kemudian di halaman berikut nya kan ada form lagi, nah pas submit form berikutnya masukkan data dari form pertama yg ada di session ke database. Setelah data tersimpan ke database, hapus session nya.<br><br>Cara kedua, kamu bisa gunakan seperti tab pada bootstrap <a href="https://getbootstrap.com/docs/3.4/javascript/#tabs">https://getbootstrap.com/docs/3.4/javascript/#tabs</a> Jadi tag formnya ada tabnya, setiap tab itu ibaratkan sebagai halaman yang berbeda, di tab akhir tinggal tambahkan form submitnya aja buat aksi simpan data ke db nya.<br><br>Semoga paham.</div>
1
