PHP / HTML: Optionally add further filter options to search a database

Currently, I have a dropdown menu to select a specific column of a table in my database with a text field to search through column for matches. Nothing special so far, it just looks something like this:

<select name="option" id="option">
   <option value="option1">Option 1</option>
   <option value="option2">Option 2</option>
   <option value="option3">Option 3</option>
   <option value="option4">Option 4</option>
</select>

<input type="text" id="option1" name="option1"><br>

Now I would like to add more filter options, where I don’t want to just write this code excerpt repeatedly one below the other. What I would like most is to be able to press something like a plus button and thus select another filter option.

I have no idea what to call this function or how to implement this. Anyone here who could help me please?

Answer

I think you want to clone your box (textbox and dropdown) – Here you can use the clone component to clone your elements

    <style>
    .d-none{
      display:none;
    }
    </style>
    <div class="clone_component_1">
    <select name="option" id="option">
       <option value="option1">Option 1</option>
       <option value="option2">Option 2</option>
       <option value="option3">Option 3</option>
       <option value="option4">Option 4</option>
    </select>
    
    <input type="text" id="option1" name="option1">
    <div class="">
           <a href="javascript:;" onclick="remove_component(this, '1')" class="btn btn-danger btn-xs btn-bold remove_component_button_1 remove-button d-none"><i class="fa fa-minus-circle"></i></a>
            <a href="javascript:;" onclick="clone_component(this, '1')" class="btn btn-primary btn-xs btn-bold clone_component_button_1 add-button"/><i class="fa fa-plus-circle"></i></a>
    </div>
 </div>
    
    <script>
    //clone component
    window.clone_component = function (t, n) {
        var tr = $(t).closest('.clone_component_' + n);
        var clone = tr.clone();
        clone.find('input,textarea').val('');
        tr.after(clone);
        clone.find('.remove_component_button_' + n).removeClass("d-none");
        if ($('.clone_component_' + n).length > 1) {
            $('.remove_component_button_' + n).removeClass("d-none");
        }
    }
    
    //remove component
    window.remove_component = function (t, n) {
        if ($('.clone_component_' + n).length !== 1) {
            $(t).closest('.clone_component_' + n).remove();
            console.log('.clone_component_' + n);
            console.log($('.clone_component_' + n).length);
            if ($('.clone_component_' + n).length === 1) {
                $('.remove_component_button_' + n).addClass("d-none");
            } else {
                $('.remove_component_button_' + n).eq(($('.clone_component_' + n).length - 1)).removeClass("d-none");
            }
        } else {
            $('.remove_component_button_' + n).addClass("d-none");
        }
        $('.clone_component_button_' + n).eq(($('.clone_component_' + n).length - 1)).removeClass("d-none");
    }
    
    </script>

try to use css and elements accordingly but this is and idea how you can clone the elements

Advertisement

Answer