Bagaimana Anda mempertahankan nilai formulir setelah mengirimkan dalam javascript?

Halo Pengembang, Jika Anda perlu menyimpan nilai formulir setelah mengirimkan dalam PHP maka Anda berada di tempat yang tepat. Di sini, saya akan memberi tahu Anda metode terbaik untuk mengimplementasikan fitur ini di formulir Anda

Setelah Anda belajar untuk menyimpan nilai bidang input setelah mengirimkan formulir. Anda dapat dengan mudah menerapkannya di formulir pendaftaran formulir login Anda, & lainnya

Jangan hapus Formulir setelah mengirimkan dalam PHP

Sekarang pertanyaannya adalah Mengapa perlu - tidak menghapus formulir setelah memasukkan nilai input?

Jadi, Mari kita ketahui dengan contoh sederhana berikut –

Seperti yang Anda ketahui ketika Anda mengklik tombol kirim maka halaman web akan dimuat ulang dan semua nilai input formulir akan diatur ke nilai default atau kosong

Jika Anda telah membuat formulir pendaftaran dan menambahkan validasi. Ketika validasi beberapa kolom input gagal setelah mengklik tombol kirim, maka nilai yang valid dan tidak valid akan dihapus. Setelah itu, Anda harus memasukkan kembali nilainya. Jadi, itu tidak baik dari sudut pandang pengguna

Jika Anda menerapkan fitur untuk menyimpan semua nilai kolom input setelah pengiriman formulir, maka Anda hanya dapat mengubah nilai yang tidak valid

Saya sedang mengerjakan proyek fase 3 saya untuk Flatiron School di mana saya harus membangun elemen <form> di sisi front-end. Seperti yang sudah Anda ketahui, formulir biasanya berisi <input> elemen dengan atribut value

Satu hal yang saya sadari ketika saya menguji mengirimkan <form> saya, nilai formulir saya tidak akan dipertahankan saat browser memuat ulang

Mungkin sepele jika formulir memiliki sangat sedikit <input> tetapi bagaimana jika Anda perlu membuat formulir yang membuat profil seseorang dengan menggunakan informasi mereka seperti riwayat pekerjaan sebelumnya atau informasi latar belakang pribadi yang membutuhkan setidaknya 100-200 kata

Terlepas dari berapa banyak input yang harus dimiliki formulir, formulir yang mempertahankan nilainya dalam keadaan yang tidak terduga lebih ideal daripada tidak mampu mempertahankan nilainya menurut pendapat saya

Untuk mencegah kejadian ini, saya menghabiskan beberapa waktu mencari solusi untuk masalah tersebut dan seperti biasa. MDN Web Docs sudah memiliki jawabannya

Artikel panjang scrollbar pendek tentang sessionStorage

Sesi halaman berlangsung selama tab atau browser terbuka, dan bertahan selama pemuatan ulang dan pemulihan halaman

Menurut artikel tersebut, salah satu fitur sessionStorage melakukan persis seperti yang saya cari. Saya mengujinya di Developer Tools saya

sessionStorage.setItem("thisIsKeyName", "this is value stored in sessionStorage")_ mengambil dua argumen. Argumen pertama adalah nama kunci untuk nilai Anda, argumen kedua adalah nilai yang ingin Anda simpan di sessionStorage

Untuk mendapatkan nilai tersimpan sesi Anda, cukup tetapkan ke variabel

Apa pun nilainya, setelah berada di sessionStorage, browser Anda tidak akan kehilangannya, Anda juga dapat menggunakan nilainya nanti seperti Anda mengeluarkannya dari "penyimpanan" saat Anda membutuhkannya

Setiap kali pengguna menambahkan beberapa data yang tidak valid ke formulir dan mengirimkannya, halaman harus disegarkan untuk menampilkan kesalahan, jika Anda tidak menggunakan JavaScript atau semacamnya

Kabar buruknya adalah data input akan hilang, yang bisa sangat mengganggu, apalagi jika form memiliki banyak field

Untungnya, ada dua metode sederhana yang dapat Anda gunakan

Ini hanya berfungsi saat pengiriman, baik berhasil atau tidak berhasil (jika kesalahan validasi dipicu). Itu tidak berfungsi pada penyegaran halaman sederhana (F5) jika data belum dikirimkan terlebih dahulu. Anda memerlukan beberapa JavaScript untuk itu

1. Simpan Formulir Data di Refresh Menggunakan PHP Ternary Operator

Operator ternary adalah versi yang lebih pendek dan praktis dari pernyataan if/else standar

Ini digunakan seperti ini

<?php $a ? $b : $c;

Ini diterjemahkan menjadi sesuatu seperti ini

<?php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

Jadi, untuk menggunakan ini dalam formulir untuk mengingat data setelah pengguna menekan kirim dan halaman disegarkan, Anda harus menambahkan ini di atribut

<?php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

<?php echo isset($_POST['name']) ? htmlspecialchars($_POST['name'], ENT_QUOTES) : ''; ?>

Anda harus membungkus hasilnya dalam htmlspecialchars() untuk keamanan

Jadi, tag HTML masukan akan terlihat seperti ini

<input name="name" type="text" value="<?php echo isset($_POST['name']) ? htmlspecialchars($_POST['name'], ENT_QUOTES) : ''; ?>">

Apa yang dilakukan adalah menampilkan data di bidang

<?php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

2. Simpan Data Formulir di Refresh dengan PHP Null Coalescing Operator

Di PHP 7, operator penggabungan nol diperkenalkan, yang setara dengan operator ternary, tetapi lebih pendek

Ini

<?php echo $_POST['name'] ?? ''; ?>

setara dengan ini

<?php echo isset($_POST['name']) ? $_POST['name'] : ''; ?>

Jadi, untuk menyimpan input data pada submit dan refresh, gunakan di atribut

<?php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

<input type="text" name="name" value="<?php echo $_POST['name'] ?? ''; ?>">

Tapi, sekali lagi, Anda harus menggunakan

<?php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

<input type="text" name="name" value="<?php echo htmlspecialchars($_POST['name'] ?? '', ENT_QUOTES); ?>">

Perhatikan bahwa Anda harus menambahkan operator di dalam fungsi

<?php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

Anda Tidak Dapat Selalu Memanfaatkan Atribut Nilai HTML

Ada kasus di mana Anda tidak dapat menggunakan atribut

<?php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

Mari kita ambil tag HTML

<?php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

<?php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

Agar data tetap diperbarui dalam tag

<?php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

<?php echo isset($_POST['name']) ? htmlspecialchars($_POST['name'], ENT_QUOTES) : ''; ?>

<?php echo isset($_POST['name']) ? htmlspecialchars($_POST['name'], ENT_QUOTES) : ''; ?>

Jadi, Anda harus menambahkan sesuatu seperti ini di tag

<?php echo isset($_POST['name']) ? htmlspecialchars($_POST['name'], ENT_QUOTES) : ''; ?>

<?php echo (isset($_POST['select']) && $_POST['select'] === 'option1') ? 'selected' : ''; ?>

Jika

<?php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

<?php echo isset($_POST['name']) ? htmlspecialchars($_POST['name'], ENT_QUOTES) : ''; ?>

<?php echo isset($_POST['name']) ? htmlspecialchars($_POST['name'], ENT_QUOTES) : ''; ?>

Inilah keseluruhan bagiannya

<select name="select" id="">
    <option value="">Select</option>
    <option value="option1" <?php echo (isset($_POST['select']) && $_POST['select'] === 'option1') ? 'selected' : ''; ?>>Option 1</option>
    <option value="option2" <?php echo (isset($_POST['select']) && $_POST['select'] === 'option2') ? 'selected' : ''; ?>>Option 2</option>
</select>

Hati-hati dengan

<?php echo isset($_POST['name']) ? htmlspecialchars($_POST['name'], ENT_QUOTES) : ''; ?>

Tidak seperti input,

<?php echo isset($_POST['name']) ? htmlspecialchars($_POST['name'], ENT_QUOTES) : ''; ?>

<?php echo isset($_POST['name']) ? htmlspecialchars($_POST['name'], ENT_QUOTES) : ''; ?>

Jadi, Anda perlu meletakkan operator PHP di antara tag, bukan di dalam

<?php
    if ($a) {
        // do $b
        $b;
    } else {
    // do $c
        $c;
    }

Saya membuat kesalahan ini, tentu saja. 😃

Ini Tidak Akan Berfungsi untuk Input File

Metode di atas tidak akan berfungsi untuk input File, karena alasan keamanan

Dan saya tidak mengetahui adanya solusi lain dengan PHP. Mungkin dengan beberapa Javascript

Jadi, pengguna harus mengunggah file lagi jika halaman disegarkan tetapi formulir tidak berhasil dikirim

Itu Bungkus

Saya harap Anda menemukan posting yang bermanfaat dan komprehensif

Jika ada info yang kedaluwarsa atau salah, atau ada yang ingin Anda tambahkan, katakan, atau tanyakan, silakan hubungi saya melalui Twitter atau email

Tentang Radu

Saya telah bekerja online, dari rumah, selama lebih dari 9 tahun. Saya belajar banyak hal berbeda yang terkait dengan situs web. Keahlian utama saya adalah WordPress, tetapi untuk beberapa waktu, saya mulai lebih fokus pada pengembangan web

Bagaimana cara menjaga nilai setelah mengirimkan dalam JavaScript?

Bagaimana Anda menjaga nilai setelah mengirimkan formulir?

Bagaimana cara mencegah reset formulir setelah mengirimkan JavaScript?

Bagaimana Anda menyimpan data formulir?