Postingan lainnya
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Tidak bisa input Form Tanda Tangan ke database
form class="form-user" method="POST">
<div class="col-md-6 form-group mb-3">
<label for="" class="col-form-label">Sudah terima dari *</label>
<input type="text" class="form-control" name="penyetor" id="penyetor" placeholder="Nama penyetor">
</div>
<div class="card-body">
<!-- canvas tanda tangan -->
<canvas id="signature-pad" class="signature-pad"></canvas>
<!-- tombol submit -->
<div style="float: left;">
<button id="btn-submit" class="btn btn-primary">
Submit
</button>
</div>
<div style="float: right;">
<!-- tombol ganti warna -->
<button type="button" class="btn btn-success" id="change-color">
Change Color
</button>
<!-- tombol undo -->
<button type="button" class="btn btn-dark" id="undo">
<span class="fas fa-undo"></span>
Undo
</button>
<!-- tombol hapus tanda tangan -->
<button type="button" class="btn btn-danger" id="clear">
<span class="fas fa-eraser"></span>
Clear
</button>
</div>
</div>
</form>
$(document).on('click', '#btn-submit', function () {
var signature = signaturePad.toDataURL();
var data = $('.form-user').serialize();
$.ajax({
url: "proses3.php",
data: {
foto: signature,
data: data,
},
method: "POST",
success: function () {
location.reload();
alert('Tanda Tangan Berhasil Disimpan');
}
})
})
3 Jawaban:
<div>hanya yang tersimpan file png dari tanda tangan tersebut, kalau database hasilnya kosong tidak terinput data yang diisi alias kosong. Minta bantuannya suhu</div>
<div><br>Untuk menyelesaikan permasalahan tidak bisa input form tanda tangan ke database, perlu dilakukan beberapa langkah sebagai berikut:<br><br></div><ol><li>Inisialisasi variabel <strong>signaturePad</strong> dengan menggunakan id dari elemen <strong>canvas</strong>. Tambahkan kode berikut pada JavaScript:</li></ol><div><br></div><pre>var canvas = document.getElementById('signature-pad'); var signaturePad = new SignaturePad(canvas);</pre><div><br>2. Pastikan bahwa form telah ditutup menggunakan tag <strong></form></strong>. Tambahkan tag penutup form pada HTML:<br><br></div><pre></form></pre><div><br>3. Ubah script AJAX pada kode JavaScript menjadi sebagai berikut:<br><br></div><pre>$(document).on('click', '#btn-submit', function (e) { e.preventDefault(); var signature = signaturePad.toDataURL(); var formData = new FormData($('.form-user')[0]);
formData.append("signature", signature);
$.ajax({
url: "proses3.php",
data: formData,
method: "POST",
contentType: false,
processData: false,
success: function () {
location.reload();
alert('Tanda Tangan Berhasil Disimpan');
},
error: function () {
alert('Tanda Tangan Gagal Disimpan');
}
});
});</pre><div><br>Penjelasan:<br><br></div><ul><li><strong>e.preventDefault()</strong> digunakan untuk mencegah aksi default pada tombol submit.</li><li><br></li><li><strong>var formData = new FormData($('.form-user')[0]);</strong> digunakan untuk mengambil data dari form menggunakan FormData.</li><li><br></li><li><strong>formData.append("signature", signature);</strong> digunakan untuk menambahkan data tanda tangan ke dalam FormData.</li><li><br></li><li><strong>contentType: false</strong> digunakan agar contentType yang digunakan adalah multipart/form-data.</li><li><br></li><li><strong>processData: false</strong> digunakan agar data yang dikirim dalam bentuk FormData tidak diproses oleh jQuery.</li></ul><div><br>Dengan langkah-langkah tersebut, seharusnya form tanda tangan dapat diinputkan ke database dengan berhasil.</div>
<div>kalau saya bayanginnya itu setelah ttd dimasukkan dan tombol submit ditekan, waktu di save akan tersimpan gambar tandatangannya dlm bentuk png/sejenis ke server (misal di folder /img/ttd) dengan nama file random, trus di database disimpan juga di kolom ttd nya nama file nya tadi, jadi waktu mau buka datanya, tinggal panggil file tadi dengan nama file yang udah tersimpan di database</div>
