Completar campos com select

Programação
, ,
#1

Estou com um problema, que não consigo mais resolver, estou tentando preencher os campo a partir de uma opção que esta contida dentro de um select que é preenchida automaticamente com o foreach, porem não está funcionando

<script language="JavaScript">

    // Tratando o objeto de manipulacao DOM
    const select = document.getElementById("cliente");
    const state = document.getElementById("estado");

    // Trata o evento change do select
    select.addEventListener("change", function(event)
    {
        // Obtem o option que foi selecionado
        let _selectedOption = this.options[this.selectedIndex];

        // Obtem o valor da propriedade data-state
        let _state = _selectedOption.getAttribute("data-state");

        // Atualiza o valor do campo estado
        state.value = _state;
    });


</script>


<form action="" method="post" class="form-horizontal">

    <!-- Cliente -->
    <div class="col-lg-7">
        <!-- Legenda -->
        <label for="clientes" class="label label-primary">Cliente</label>

        <!-- Campo -->
        <select name="cliente" id="cliente" class="form-control">
            <?php
            foreach ($clientes as $cliente)
            {
                ?>
                    <!-- Opcoes -->
                    <option value="<?= $cliente['id'] ?>" data-state="<?= $cliente['estado'] ?>"> <?= $cliente['nome'] ?> </option>

                <?php
            }
            ?>
        </select>
    </div>

    <!-- Data do pedido -->
    <div class="col-lg-4">
        <!-- Legenda -->
        <label for="dataPedido" class="label label-primary">Data do Pedido</label>

        <!-- Legenda -->
        <input type="text" name="dataPedido" id="dataPedido" class="form-control text-center" readonly="" value="<?= date("d/M/Y")?>">
    </div>

    <!-- Estado -->
    <div class="col-lg-7">
        <!-- Legenda -->
        <label for="estado" class="label label-primary">Estado</label>

        <!-- Campo -->
        <input type="text" name="estado" id="estado" class="form-control text-center" readonly="">
    </div>
</form>

Quero que quando eu selecinar um opção do select, o campo estado e outros campos que virão futuramente, sejam preenchidos com os respectivos valores. A propriedade data-state armazena o estado e futuramente serão criadas novas propriedades para armazenar os valores dos próximos campos.

#2

Teste seu código com o javascript após o html, pois, do jeito que está, ao executar document.getElementById("cliente");, o elemento não será encontrado pois ainda não foi renderizado.

#3

Funcionou perfeitamente, não tinha me tocado desse problema
Obrigado, me quebrou um galho.

1 curtida