form di javascript ini adalah bagian dari seri tutorial javascript.
Berikut ini kode bootstrap 5 dan HTML untuk text area form
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <div class="card"> <div class="card-body row"> <form id="postingForm" method="post"> <div class="mb-3"> <textarea class="form-control" rows="3" placeholder="Apa Kabar Dunia Islam Hari Ini?" name="blog" id="blog"></textarea> </div> <div class="d-flex justify-content-between align-items-center"> <div> <small class="text-muted">Anda dapat menggunakan MarkDown untuk Menulis</small> </div> <button type="button" id="uploadButton" class="btn btn-primary"><i class="bi bi-camera"></i></button> <button type="submit" class="btn btn-primary">Siarkan</button> </div> </form> <!-- Form upload (awalnya tersembunyi) --> <div class="row" id="uploadForm" style="display: none;"> <form id="uploadImageForm" method="post" enctype="multipart/form-data" class="form-group mt-3"> <input type="file" name="fileToUpload" id="fileToUpload"> <input type="submit" value="Upload" class="btn btn-primary"> </form> </div> </div></div> |
Anda dapat mencapai fungsionalitas yang sama dalam JavaScript dengan menggunakan event listener untuk menangani pengiriman formulir dan klik tombol. Berikut kode JavaScript yang setara untuk HTML yang diberikan:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | <script> // Fungsi untuk menampilkan formulir unggah function showUploadForm() { document.getElementById("uploadForm").style.display = "block"; } // Pemantau event untuk tombol unggah document.getElementById("uploadButton").addEventListener("click", showUploadForm); // Pemantau event untuk pengiriman formulir unggahan document.getElementById("postingForm").addEventListener("submit", function (event) { event.preventDefault(); // Mencegah tindakan pengiriman formulir default // Sekarang Anda dapat melakukan tindakan tambahan di sini, seperti mengirimkan data ke server menggunakan fetch atau XMLHttpRequest. // Misalnya, Anda dapat menggunakan fetch untuk mengirim data formulir ke "fungsi/posting.php". // Gantilah ini dengan endpoint API dan data aktual Anda fetch("fungsi/posting.php", { method: "POST", body: new FormData(document.getElementById("postingForm")) }) .then(response => { if (response.ok) { // Tangani respons sukses console.log("Formulir berhasil dikirim"); // Anda dapat melakukan tindakan lebih lanjut di sini jika diperlukan } else { // Tangani respons error console.error("Pengiriman formulir gagal"); } }) .catch(error => { console.error("Error:", error); }); }); // Pemantau acara untuk pengiriman formulir unggah gambar document.getElementById("uploadImageForm").addEventListener("submit", function (event) { // Anda dapat menangani pengiriman formulir unggahan gambar di sini dengan cara yang sama seperti formulir unggahan. // Gantilah ini dengan endpoint API aktual untuk pengunggahan gambar. // Mencegah tindakan pengiriman formulir default event.preventDefault(); // Gantilah ini dengan endpoint API dan data aktual Anda fetch("posting/uploadgambar.php", { method: "POST", body: new FormData(document.getElementById("uploadImageForm")) }) .then(response => { if (response.ok) { // Tangani respons sukses console.log("Gambar berhasil diunggah"); // Anda dapat melakukan tindakan lebih lanjut di sini jika diperlukan } else { // Tangani respons error console.error("Pengunggahan gambar gagal"); } }) .catch(error => { console.error("Error:", error); }); });</script> |
Kode JavaScript ini menambahkan pemantau acara untuk menangani pengiriman formulir dan klik tombol. Saat formulir unggahan dikirim, itu mencegah tindakan pengiriman formulir default dan mengirimkan data formulir ke endpoint “fungsi/posting.php” menggunakan API fetch. Formulir unggahan gambar ditangani dengan cara yang sama dengan mengirimkan data ke endpoint “posting/uploadgambar.php”.
Leave a Reply