Postingan lainnya
cara upload gambar agar tidak reload page pada jquery ajax
permisi para mastah...
saya mau bertanya bagaimana cara nya agar pada saat upload gambar dan insert data dia tidak reload page atau tidak merefresh halaman dengan menggunakan jquery ajax php...
saya sudah buat codingan html nya
<table>
<form class="form" action="data_penjualan_buku.php" method="post" enctype="multipart/form-data">
<tr>
<td>Judul Buku</td>
<td><input type="text" name="judul" value="" placeholder="Judul" id="judul"></td>
</tr>
<tr>
<td>ISBN</td>
<td><input type="text" name="isbn" value="" placeholder="No. ISBN" id="isbn"></td>
</tr>
<tr>
<td>Penulis</td>
<td><input type="text" name="penulis" value="" placeholder="Penulis" id="penulis"></td>
</tr>
<tr>
<td>Penerbit</td>
<td><input type="text" name="penerbit" value="" placeholder="Penerbit" id="penerbit"></td>
</tr>
<tr>
<td>Tanggal Terbit</td>
<td><input type="text" name="terbit" value="" placeholder="Tanggal Terbit" id="terbit"></td>
</tr>
<tr>
<td>Jumlah Halaman</td>
<td><input type="text" name="hal" value="" placeholder="Jumlah Halaman" id="jml_hal"></td>
</tr>
<tr>
<td>Berat Buku</td>
<td><input type="text" name="berat" value="" placeholder="Berat Buku" id="berat_buku"></td>
</tr>
<tr>
<td>Jenis Cover</td>
<td><input type="text" name="jenis" value="" placeholder="Jenis Cover" id="jenis"></td>
</tr>
<tr>
<td>Dimensi</td>
<td><input type="text" name="dimensi" value="" placeholder="Dimensi" id="dimensi"></td>
</tr>
<tr>
<td>Kategori</td>
<td>
<select class="kategori" name="kategori">
<option value="Pelajaran">Pelajaran</option>
<option value="Teknologi">Teknologi</option>
</select>
</td>
</tr>
<tr>
<td>Bonus</td>
<td><input type="text" name="bonus" value="" placeholder="Bonus Dalam Buku" id="bonus"></td>
</tr>
<tr>
<td>Text Bahasa</td>
<td><input type="text" name="bahasa" value="" placeholder="Text Bahasa" id="bahasa"></td>
</tr>
<tr>
<td>Stock</td>
<td>
<select class="stock" name="stock">
<option value="Stock Tersedia">Tersedia</option>
<option value="Stock di Gudang Suplier">Suplier</option>
<option value="Stock Akan Tersedia">Akan Tersedia</option>
</select>
</td>
</tr>
<tr>
<td>Harga</td>
<td><input type="text" name="harga" value="" placeholder="Harga" id="harga"></td>
</tr>
<tr>
<td>Harga Baru</td>
<td><input type="text" name="baru" value="" placeholder="Harga Baru" id="harga_baru"></td>
</tr>
<tr>
<td>Hemat</td>
<td><input type="text" name="hemat" value="" placeholder="Hemat Harga" id="hemat"></td>
</tr>
<tr>
<td>Gambar</td>
<td>
<div class="image">
<label for="file" class="upload-plus"><i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i></label>
<input type="file" name="file" id="file" />
</div>
</td>
</tr>
<tr>
<td>Sinopsis</td>
<td><textarea name="sinopsis" rows="8" cols="40" placeholder="Sinopsis Buku" id="sinopsis"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" value="Selesai" id="selesai"></td>
</tr>
</form>
</table>
dan yang ini codingan jquery ajax nya
$('#selesai').on('click', function(){
var judul = $('#judul').val();
var isbn = $('#isbn').val();
var penulis = $('#penulis').val();
var penerbit = $('#penerbit').val();
var terbit = $('#terbit').val();
var halaman = $('#jml_hal').val();
var berat = $('#berat_buku').val();
var jenis = $('#jenis').val();
var dimensi = $('#dimensi').val();
var kategori = $('.kategori').val();
var bonus = $('#bonus').val();
var bahasa = $('#bahasa').val();
var stock = $('.stock').val();
var harga = $('#harga').val();
var baru = $('#harga_baru').val();
var hemat = $('#hemat').val();
var data = new FormData(this);
data.append('file',$(file)[0].files[0]);
//var sinopsis = $('#sinopsis').val();
$.ajax({
url: "data_penjualan_buku.php",
type: "POST",
cache: false,
contentType: false,
processData: false,
data: {data,judul:judul,isbn:isbn,penulis:penulis,penerbit:penerbit,terbit:terbit,hal:halaman,berat:berat,jenis:jenis,dimensi:dimensi,kategori:kategori,bonus:bonus,bahasa:bahasa,stock:stock,harga:harga,baru:baru,hemat:hemat},
success: function(data){
alert(data);
}
});
});
mohon bantuan nya para mastah.. terima kasih.
14 Jawaban:
coba tes gini gan:
......
var data = new FormData(this); // silahkan komentari dulu baris ini
data.append('file',$(file)[0].files[0]); // ini juga
$.ajax({
method : 'post',
url : url, // silahkan disesuaikan
data : new FormData($("#id_formnya")[0]), // silahkan disesuaikan id_formnya
dataType : 'json',
async : true,
processData : false,
contentType : false
......
});
berhasil ngirim data nya ke database tetapi masih tetep reload page gan..
// EDIT silahkan prevent default form submitnya.
$('#selesai').on('click', function(){
// tambahkan
$("#form_agan").submit(function(e){ // silahkan sesuaikan formnya
e.preventDefault();
});
......
tes kembali gan di atas jawabannya saya edit kembali.
hahaha. ok dah kita ambil jalan lain aja, biar lebih mudah rada2 g fokus gan. silahkan nanti dicari lebih lanjut mengenai prevent default submit form ganti aja input submitnya menjadi div atau span
<td><input type="submit" name="submit" value="Selesai" id="selesai"></td>
//ganti jadi
<td><span id="selesai">Selesai</span></td>
oh iyak ane lupa bilang...
makasih gan udah mau bantuin ane...hehe
yoi gan sama2 sy juga masih belajar: oh iya ini untuk kalau agan masih mau tetap pakai input submit yang tadi dan lakukan prevent default: 1. acuhkan tadi rubah baris input submitnya kembalikan seperti punya agan 2. selanjutnya ganti event listening pada on klik tombolnya menjadi event listening formnya hasilnya:
$('#selesai').on('click', function(){ // event listening ini kita ganti sebagai berikut
// kode agan
});
ini pergantiannya:
$('#form_agan').submit(function(e){
// kode agan
e.preventDefault();
});
hasilnya berhasil gan kirim data ke database nya tetapi masih tetep reload page nya gan...
coba modifikasi jadi kayak gini:
$(document).on('submit', '#form_agan', function(e){
e.preventDefault();
// kode agan
.....
});
Jawaban Terpilih
ntah kenapa kemarin saya coba codingan ajax nya kaya gini tidak berhasil berhasil.... kemudian saya coba lagi hari ini Ternyata berhasil gan caranya biar pada saat upload file dia tidak reload / refresh halaman nya..
$(document).on('submit', '#form_agan', function(e){
e.preventDefault();
// kode agan
.....
});
terima kasih gan @onirusama...