Hướng dẫn hide a field in html based on condition - ẩn một trường trong html dựa trên điều kiện

Các hình thức chức năng được cho là phần quan trọng nhất của bất kỳ chiến lược thế hệ chì nào. Chiến lược ẩn các trường biểu mẫu cho đến khi người dùng chọn có thể cải thiện đáng kể trải nghiệm người dùng - và tăng cơ hội được điền vào mẫu của bạn.

Các biểu mẫu của trang web của bạn - cho dù trên trang đích hoặc trên trang web của bạn - tồn tại để làm một điều quan trọng: Thu thập thông tin về các cá nhân quan tâm cho khách hàng tiềm năng bán hàng. Tuy nhiên, không phải tất cả các hình thức được tạo ra bằng nhau. Đôi khi, đưa ra mọi tùy chọn biểu mẫu có thể áp đảo cho người dùng và cung cấp trải nghiệm người dùng tiêu cực.

Việc giấu các trường biểu mẫu nhất định cho đến khi người dùng kích hoạt họ với câu trả lời trước đó có thể là một cách đơn giản để giữ lại một số câu hỏi nhất định cho đến khi người dùng sẵn sàng cho họ. Nó cũng cung cấp cho bạn khả năng xác định rõ ràng những phần hình thức được yêu cầu và phần nào không, do đó cải thiện UX. & NBSP;

Cuối cùng, việc thực hiện các trường biểu mẫu nhất định có điều kiện dựa trên các tùy chọn đầu vào người dùng trước đó làm cho các biểu mẫu của bạn linh hoạt hơn nhiều và giúp thúc đẩy chuyển đổi chất lượng tốt hơn.

HTML

HTML ở đây là một hình thức bootstrap đơn giản, với một số nhóm flex. Không phải mỗi nhóm trường biểu mẫu nên có ID duy nhất của riêng mình. ID này sẽ được sử dụng trong các phần cụ thể của mục tiêu jQuery để hiển thị hoặc ẩn.

JS

JavaScript sử dụng jQuery để thay đổi DOM tùy thuộc vào các lựa chọn được thực hiện. Về cơ bản, tùy thuộc vào các điều kiện của câu trả lời trường, bạn có thể quay số lượng lớn hiển thị/ẩn các thành phần khác của biểu mẫu. Đối với mục đích xác thực, một số thuộc tính bổ sung được thay đổi tùy thuộc vào lựa chọn. Nếu một trường được ẩn, thì tất cả các thuộc tính cần thiết sẽ được loại bỏ. Nếu một trường có thể nhìn thấy, thì nó nên/có thể được yêu cầu.

Bạn muốn xem tất cả trông như thế nào trước khi cam kết sử dụng nó? Kiểm tra jsfiddle dưới đây. Hãy chắc chắn mở rộng quy mô cửa sổ trình duyệt của bạn đến các kích thước khác nhau để xem biểu ngữ sẽ trông như thế nào trên màn hình di động.

Có hai cách để giải quyết vấn đề này, tùy thuộc vào kích thước của bộ dữ liệu của bạn. Nếu không có quá nhiều bản ghi với $parentid (từ mã phụ trợ, cũng vui lòng đọc trên SQL Injection, bạn đang chèn dữ liệu người dùng vào truy vấn SQL), bạn chỉ có thể kiểm tra các tùy chọn trước khi gửi (khi trang biểu mẫu là được yêu cầu) và hiển thị hoặc ẩn các mục với JS tùy thuộc vào tùy chọn được chọn. Điều này có lợi thế là không có yêu cầu bổ sung.

Nếu bạn có nhiều mục trong bảng filing_code_managment thì bạn không nên kiểm tra tất cả chúng trước, vì điều này sẽ rất tốn nguồn lực và 90% công việc được thực hiện sẽ không bao giờ được nhìn thấy bởi bất kỳ ai. Trong trường hợp này, bạn có thể sử dụng AJAX để kiểm tra với máy chủ và kiểm tra trường nào sẽ được hiển thị hoặc ẩn tùy thuộc vào kết quả. Giải pháp này có lợi thế chỉ kiểm tra các tùy chọn được sử dụng, nhưng nó giới thiệu độ trễ, vì yêu cầu cần được hoàn thành trước khi người dùng có thể điền vào các trường tiếp theo.

Cập nhật với ví dụ cho tùy chọn đầu tiên

Ví dụ cho tùy chọn đầu tiên trong mã đầu tiên của bạn:

<div class="form-group">
    <label for="cp1" class="control-label col-lg-4">Move to Sub Folder/New Category<span
                style="color:red;">&nbsp;*</span></label>
    <div class="col-lg-3">

        <select class="form-control blank" id="parentid" name="parentid" title="parentid">
            <option >Please Select</option>
            <option value="0">New Category</option>
            <?php
            $sql_incharge = 'SELECT * FROM filing_code_management WHERE status = 1 ORDER BY id';
            $arr_incharge = db_conn_select($sql_incharge);
            // Test array, I don't have your database
            // $arr_incharge = [
            //     ['category_id' => '0', 'id' => '0', 'name' => 'Nummer 0'],
            //     ['category_id' => '1', 'id' => '1', 'name' => 'Nummer 1'],
            //     ['category_id' => '2', 'id' => '2', 'name' => 'Nummer 2']
            // ];
            $show = [];
            foreach ($arr_incharge as $rs_incharge) {
                $folder_location = $rs_incharge['folder_location'];
                $category_id = $rs_incharge['category_id'];
                echo '<option value="' . $rs_incharge['id'] . '">' . $rs_incharge['name'] . '</option>';

                // Added
                switch ($category_id) {
                    case '0':
                        $fc = true;
                        $fn = true;
                        $ac = false;
                        $an = false;
                        break;
                    case '1':
                        $fc = false;
                        $fn = false;
                        $ac = true;
                        $an = true;
                        break;
                    case '2':
                        $fc = true;
                        $fn = true;
                        $ac = true;
                        $an = true;
                        break;
                }

                // Save in one big array, to use in JS later
                $show[$rs_incharge['id']]['show_fc'] = $fc;
                $show[$rs_incharge['id']]['show_fn'] = $fn;
                $show[$rs_incharge['id']]['show_ac'] = $ac;
                $show[$rs_incharge['id']]['show_an'] = $an;
            }
            ?>
        </select>
        <!--<input type="text" class="form-control blank" id="parentid" name="parentid" title="parentid" onblur="capitalize(this.id, this.value);">-->
    </div>
</div>
<div class="form-group" id="show_hide_fc">
    <label for="function_code" class="control-label col-lg-4">Function Code:</label>
    <div class="col-lg-3">
        <input type="text" class="form-control" id="function_code" name="function_code" title="function_code">
    </div>
</div>
<div class="form-group" id="show_hide_fn">
    <label for="function_name" class="control-label col-lg-4">Function Name:</label>
    <div class="col-lg-3">
        <input type="text" class="form-control" id="function_name" name="function_name" title="function_name">
    </div>
</div>
<div class="form-group" id="show_hide_ac">
    <label for="activity_code" class="control-label col-lg-4">Activity Code:</label>
    <div class="col-lg-3">
        <input type="text" class="form-control" id="activity_code" name="activity_code" title="activity_code">
    </div>
</div>
<div class="form-group" id="show_hide_an">
    <label for="activity_name" class="control-label col-lg-4">Activity Name:</label>
    <div class="col-lg-3">
        <input type="text" class="form-control" id="activity_name" name="activity_name" title="activity_name">
    </div>
</div>
<script>
    // Added, add this after the inputs
    const fc = document.getElementById('function_code');
    const fn = document.getElementById('function_name');
    const ac = document.getElementById('activity_code');
    const an = document.getElementById('activity_name');

    const select = document.getElementById('parentid');
    const show = JSON.parse('<?= json_encode($show) ?>');

    updateVisibility();
    select.addEventListener('change', function () {
        updateVisibility();
    });

    function updateVisibility() {
        const currentOption = show[select.options[select.selectedIndex].value];
        if (typeof currentOption !== 'undefined' && currentOption !== null) {
            if (currentOption.show_fc) {
                fc.style.display = '';
            } else {
                fc.style.display = 'none';
            }

            if (currentOption.show_fn) {
                fn.style.display = '';
            } else {
                fn.style.display = 'none';
            }

            if (currentOption.show_ac) {
                ac.style.display = '';
            } else {
                ac.style.display = 'none';
            }

            if (currentOption.show_an) {
                an.style.display = '';
            } else {
                an.style.display = 'none';
            }
        } else {
            // Hide everything when no known option is selected
            fc.style.display = 'none';
            fn.style.display = 'none';
            ac.style.display = 'none';
            an.style.display = 'none';
        }
    }
</script>