Mengurus Nilai Lapuk dengan JavaScript dan Blade: Laravel 10 Borang Input Dinamik

Mengurus Data Borang Lama dengan JavaScript dalam Laravel 10

Apabila membangunkan borang dinamik dalam Laravel 10, satu cabaran biasa ialah mengekalkan input pengguna selepas kegagalan pengesahan. Dalam templat Blade, ini biasanya boleh diuruskan dengan lama() fungsi pembantu, yang memulihkan nilai yang dimasukkan sebelum ini. Walau bagaimanapun, menggunakan fungsi ini secara dinamik apabila menambahkan medan borang dengan JavaScript memerlukan pengendalian khas.

Dalam projek saya, saya menghadapi isu ini semasa membangunkan sistem yang membolehkan pengguna menambah dan mengalih keluar ganjaran secara dinamik. Selepas pengesahan gagal, borang harus mengekalkan data ganjaran lama dan memaparkannya dengan sewajarnya. Laravel lama() fungsi berfungsi dengan baik dalam Blade, tetapi menggabungkannya dengan logik tambahan JavaScript boleh menjadi rumit.

Inti masalahnya terletak pada cara templat Blade dan JavaScript mentafsir data secara berbeza. Apabila menambahkan elemen baharu dengan JavaScript, saya perlu memasukkan nilai lama secara dinamik, tetapi sintaks untuk melakukan ini tidak selalunya mudah. Gagal melaksanakan perkara ini dengan betul menyebabkan kehilangan data penting selepas muat semula halaman.

Panduan ini akan membimbing anda melalui pendekatan praktikal untuk menggunakan lama() berfungsi dalam medan yang dijana JavaScript. Kami akan meneroka cara menambahkan input baharu secara dinamik dan memastikan pengekalan nilai lama yang betul dalam projek Laravel 10. Mari selami!

Pengendalian Borang Dinamik dengan Nilai Lama dalam Laravel 10

Dalam skrip yang disediakan, cabaran teras ialah menambahkan medan borang ganjaran baharu secara dinamik dengan keupayaan untuk mengekalkan nilai lama selepas kegagalan pengesahan dalam Laravel. Biasanya, Laravel lama() helper mendapatkan semula nilai yang dimasukkan sebelum ini selepas penyerahan borang gagal, tetapi ini selalunya sukar apabila menambahkan elemen menggunakan JavaScript. Penyelesaiannya terletak pada menggabungkan Blade @json() arahan dengan JavaScript, membenarkan data input lama dihantar terus ke medan yang dijana secara dinamik.

Fungsi addMoreItem() adalah kunci kepada pendekatan ini. Ia menggunakan JavaScript untuk menambahkan medan input baharu untuk setiap ganjaran. Sebelum menambahkan medan, kami menyemak sama ada terdapat sebarang nilai lama yang digunakan @json(lama('ganjaran')). Ini menukar nilai input lama dari sisi PHP kepada objek JavaScript, yang kemudiannya boleh diulang menggunakan Object.entry(). Kaedah ini membolehkan gelung melalui setiap entri ganjaran dan memasukkan nilai yang berkaitan ke dalam elemen bentuk yang dicipta secara dinamik.

Skrip juga menggunakan insertAdjacentHTML() kaedah, yang memasukkan kandungan HTML pada kedudukan tertentu berbanding dengan bentuk sedia ada. Ini penting untuk menambahkan item ganjaran baharu tanpa memuat semula halaman. Contohnya, apabila menambah ganjaran baharu, skrip mencipta medan borang baharu dengan nilai input yang sesuai dan menambahkannya pada bekas borang. The lama() fungsi memastikan bahawa jika pengesahan borang gagal, data yang dimasukkan sebelum ini dipaparkan semula kepada pengguna.

Akhir sekali, ujian unit adalah penting untuk mengesahkan kelakuan skrip ini. Dalam kes ini, assertSessionHasOldInput() dan assertSessionHasErrors() digunakan dalam ujian PHPUnit untuk memastikan Laravel menyimpan dan mendapatkan semula data input lama dengan betul. Ujian ini mengesahkan bahawa pahala data disimpan dalam sesi selepas pengesahan yang gagal, memastikan medan borang dinamik mengekalkan nilai input sebelumnya pada muat semula borang berikutnya. Gabungan JavaScript dan Blade ini memastikan pengalaman pengguna yang lancar apabila bekerja dengan borang yang kompleks dan dinamik dalam Laravel.

// JavaScript function to dynamically append form fields
function addMoreItem() {
    let rewardCount = document.querySelectorAll('.reward-item').length + 1;
    let rewardData = @json(old('reward'));  // Get old values from Laravel
    let rewardItem = rewardData ? rewardData[rewardCount] : {};  // Default to empty object
    let rewardHtml = `
        <div id="reward-${rewardCount}" class="reward-item">`
            <input type="text" name="reward[${rewardCount}][reward_name]"
                value="{{ old('reward.${rewardCount}.reward_name', rewardItem.reward_name || '') }}" />`
        </div>`;
    document.getElementById('reward_details').insertAdjacentHTML('beforeend', rewardHtml);
}

// JavaScript function that handles form generation and appends old values if available
function appendRewardItem(key, value) {
    let rewardHtml = `
        <div id="reward-${key}" class="card">`
            <input type="text" name="reward[${key}][reward_name]" class="form-control"
                value="{{ old('reward.' + key + '.reward_name', value.reward_name || '') }}">`
        </div>`;
    document.getElementById('reward_details').insertAdjacentHTML('beforeend', rewardHtml);
}

// Loop through existing rewards and append them
let rewardDetails = @json(old('reward'));
if (rewardDetails) {
    Object.entries(rewardDetails).forEach(([key, value]) => {
        appendRewardItem(key, value);
    });
}

// PHPUnit test for validating old input values
public function testOldRewardValuesPersist() {
    // Simulate form validation failure
    $response = $this->post('/submit-form', [
        'reward' => [
            '1' => [
                'reward_name' => 'Test Reward 1'
            ]
        ]
    ]);
    $response->assertSessionHasErrors();
    $response->assertSessionHasOldInput('reward');  // Check old input
}

Mengoptimumkan Pengendalian Borang Dinamik dalam Laravel dengan Blade dan JavaScript

Dalam Laravel, pengendalian input borang secara dinamik, terutamanya dengan JavaScript, memerlukan perhatian yang teliti terhadap cara Blade dan JavaScript berinteraksi. Aspek utama yang sering diabaikan ialah mengekalkan data borang selepas ralat pengesahan berlaku. Menggunakan lama() fungsi pembantu, Laravel menyediakan cara yang mudah untuk mengisi semula medan input, tetapi menggabungkan fungsi ini ke dalam elemen yang ditambah secara dinamik memerlukan pendekatan yang lebih bijak. Ini benar terutamanya apabila berurusan dengan tatasusunan atau koleksi, seperti ganjaran, di mana setiap item mesti mengekalkan datanya.

Penyelesaian yang berkuasa untuk cabaran ini ialah menggabungkan Laravel @json() arahan dengan JavaScript. The @json() arahan membolehkan data sebelah pelayan ditukar kepada format yang JavaScript boleh faham, yang penting untuk menghantar nilai lama kembali ke bahagian hadapan. Dengan memetakan nilai ini ke dalam medan borang yang baru dilampirkan, anda boleh memastikan bahawa pengguna tidak kehilangan kemajuan mereka jika kegagalan pengesahan berlaku. Teknik ini memanfaatkan kuasa pemaparan templat Blade sambil turut membenarkan fleksibiliti pengurusan borang berasaskan JavaScript.

Selain hanya memulihkan nilai lama, adalah penting untuk mempertimbangkan pengendalian ralat dan pengesahan input. Selain daripada lama(), Laravel menyediakan @error() untuk memaparkan mesej pengesahan di sebelah medan tertentu, memudahkan pengguna memahami perkara yang salah. Penyepaduan kedua-dua arahan memastikan pengalaman yang lancar apabila borang gagal pengesahan dan pengguna perlu membetulkan input mereka. Dengan menggabungkan fungsi Blade dengan fleksibiliti JavaScript, anda boleh mengekalkan pengalaman pengguna yang dinamik lagi stabil dalam aplikasi Laravel anda.