How to get value from selected icon dropdown?

Question

I have 3 icons. ie icon-star , icon-check , icon-info . if icon-start selected, then i want to store the value of the selected icon into database. for example:

• icon-start with value="star"
• icon-check with value="complete"
• icon-info with value="important"

So, the value stored into database is "star" because i choose icon-star .

Where i must put the value? and how?

Here my modal:

<form autocomplete="off" novalidate action="<?= base_url('app/admin/to-do-add')?>" method="POST">
    <input type="hidden" name="<?=$this->security->get_csrf_token_name();?>" value="<?=$this->security->get_csrf_hash();?>">
    <div class="btn-group dropup dropdown-icon-wrapper mr-1 mb-1" style="float:right">
        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" name="status">
            <i class="feather icon-star dropdown-icon"></i>
        </button>
        <div class="dropdown-menu">
            <span class="dropdown-item">
                <i class="feather icon-star" data-toggle="tooltip" data-placement="left" title="Starred" value="star"></i>
            </span>
            <span class="dropdown-item">
                <i class="feather icon-info" data-toggle="tooltip" data-placement="left" title="Important" value="important"></i>
            </span>
            <span class="dropdown-item">
                <i class="feather icon-check" data-toggle="tooltip" data-placement="left" title="Completed" value="complete"></i>
            </span>
        </div>
    </div>
    <br>
    <br>
    <div class="form-group">
        <label>To</label>
        <div class="controls">
            <select class="select2 form-control" name="to">
                <option value="<?php echo $dataLogin->MEmployee_ID;?>">-SELECT-</option>
                <?php foreach ($data1 as $row){ ?>
                <option value=" <?php echo $row->MEmployee_ID ?>">
                    <?php echo $row->EmployeeName?>
                </option>
                <?php } ?>
            </select>
        </div>
    </div>
    <div class=" modal-footer">
        <button type="submit" class="btn btn-primary"><?= $this->lang->line('add');?></button>
    </div>
</form>

Here my controller:

public function addTask(){
    var_dump($this->input->post('status')); die(); //i tried to var_dump, the value is NULL
    $dataLogin = $this->employee_model->checkUserData($this->session->userdata('islogin'))->row();
    $data = [
        "MEmployee_ID" => $this->input->post('to'),
        "status" => $this->input->post('status') //here the value of selected icon 
    ];
}

Answer 1

I am proposing a solution and it will work because I did it same and it worked.

1. (View) Take three checkbox input for your three icons

 <input type="checkbox" name="start" value="start"> <input type="checkbox" name="complete" value="complete"> <input type="checkbox" name="important" value="important">

2. (Controller)

   

3. (Model) define those three input default value type null

Try it I am here to help!

Answer 2

I think you should use a "select" instead of a "dropdown" because a dropdown is not an input. And according to ww3school ( https://www.w3schools.com/html/html_form_elements.asp )

The select element defines a drop-down list.

The option elements defines an option that can be selected.

I suggest you try this code:

<?php echo form_open('app/admin/to-do-add'); ?>
    <input type="hidden" name="<?=$this->security->get_csrf_token_name();?>" value="<?=$this->security->get_csrf_hash();?>">

    <select class="custom-select mb-3" name="status">
        <option selected disabled>-- Status--</option>
        <option value="star"><i class="feather icon-star" data-toggle="tooltip" data-placement="left" title="Starred" ></i></option>
        <option value="important"><i class="feather icon-info" data-toggle="tooltip" data-placement="left" title="Important"></i></option>
        <option value="complete"><i class="feather icon-check" data-toggle="tooltip" data-placement="left" title="Completed"></i></option>
    </select>

    <div class="form-group">
        <label>To</label>
        <div class="controls">
            <select class="select2 form-control" name="to">
                <option value="<?php echo $dataLogin->MEmployee_ID;?>">-SELECT-</option>
                <?php foreach ($data1 as $row){ ?>
                <option value=" <?php echo $row->MEmployee_ID ?>"><?php echo $row->EmployeeName?></option>
                <?php } ?>
            </select>
        </div>
    </div>

    <div class=" modal-footer">
        <button type="submit" class="btn btn-primary"><?= $this->lang->line('add');?></button>
    </div>
<?php echo form_close(); ?>

Answer 3

You can achieve this by making a hidden input field and changing its value every time an icon is clicked . Here I'm using hidden field name="icon" , you can get it in your controller by $this->input->post('icon');, its default value is empty, you can change it to however you want.

 let icon_node = document.querySelectorAll('.feather'); // get all the elements with feather class(icons) var icon_arr = [...icon_node]; // converts NodeList to Array icon_arr.forEach(icon => { icon.addEventListener('click', item => { // add a click event on all elements with feather class let curr_value = icon.getAttribute("value"); // get value from value attribute document.querySelector('#icon').value = curr_value; // set value of hidden field console.clear(); console.log(curr_value); }); });

 <div class="dropdown-menu"> <input type="hidden" id="icon" name="icon" value="" /> <!-- hidden field here --> <span class="dropdown-item"> <i class="feather icon-star" data-toggle="tooltip" data-placement="left" title="Starred" value="star">star</i> <!-- dummy text for test purpose --> </span> <span class="dropdown-item"> <i class="feather icon-info" data-toggle="tooltip" data-placement="left" title="Important" value="important">important</i> <!-- dummy text for test purpose --> </span> <span class="dropdown-item"> <i class="feather icon-check" data-toggle="tooltip" data-placement="left" title="Completed" value="complete">complete</i> <!-- dummy text for test purpose --> </span> </div>

Hope this helps you.