Display the service name in select and the value in the input (Codeigniter)

Question

I am enthusiastic, I do some simple things for a hobby, and in this case I’ve caught up with a part that I imagine for you must be very simple! I have a task system, in the form I have a service select, which displays the service name, and I need the value of that service to be applied in an input. By servico_id I arrive in the userName in select, in the input I want to display the useValue.

    //SELECT DE SERVIÇO

    <div class="col-md-4">
                        <label for="servicos_id" class="control-label">Serviço</label>
                        <div class="form-group">
                            <select name="servicos_id" id="servicos_id" class="form-control select2" style="width: 100%;">
                                <option value="">Selecionar serviço</option>
                                <?php 
                                foreach($all_servicos as $servico)
                                {
                                    $selected = ($servico['idServicos'] == $this->input->post('servicos_id')) ? ' selected="selected"' : "";

                                    echo '<option value="'.$servico['idServicos'].'" '.$selected.'>'.$servico['nomeServico'].'</option>';
                                } 
                                ?>
                            </select>
                            <span class="text-danger"><?php echo form_error('servicos_id');?></span>
                        </div>
                    </div>

// INPUT VALOR DO SERVIÇO

<div class="col-md-2">
                    <label for="valorTarefa" class="control-label">Valor</label>
                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-dollar"></i></span>
                        <input type="text" name="valorTarefa" value="<?php echo $this->input->post('valorTarefa'); ?>" class="form-control" id="valorTarefa" />
                        <span class="text-danger"><?php echo form_error('valorTarefa');?></span>
                    </div>
                </div>

Answer 1

I don’t know exactly how the information is structured in your database, so I’m assuming you’re storing the corresponding value of each service in the same table.

There are several ways to solve this problem, but the use of Javascript in my opinion is ideal for this type of situation.

Below is a solution that I believe will solve your problem.

However, you will have to bring the value of each service together in your array $all_servicos to iterate this data within your <select>. Now, if this value is stored in another table, you will have to perform a JOIN in your SQL query.

function atribuirValorInput(select) {
  // Pega o valor do atributo data-valor do serviço selecionado...
  var valor = select.options[select.selectedIndex].dataset.valor;
  
  // Atribui o valor ao input...
  document.getElementById('valorTarefa').value = valor;
}

<!-- Select Serviços -->
<select name="servicos_id" id="servicos_id" onchange="atribuirValorInput(this);">
  <option value="" data-valor="">Selecionar serviço</option>
  <!--
    Trazendo o valor correspondente a cada serviço dentro da variável $servico,
    poderá fazer dessa forma:
    
    <?php
      foreach($all_servicos as $servico)
      {
        echo '<option value="' . $servico['idServicos'] . '" data-valor="' . $servico['valor'] . '">' . $servico['nomeServico'] . '</option>';
      }
    ?>
  -->
  <option value="1" data-valor="10.00">Serviço 1</option>
  <option value="2" data-valor="20.00">Serviço 2</option>
  <option value="3" data-valor="30.00">Serviço 3</option>
</select>

<br><br><br>

<!-- Input Valor -->
<input type="text" name="valorTarefa" value="" id="valorTarefa">