Complete fields with select

Question

Complete fields with select

Navigation

#1 by (1 votes)

1

I have a problem, which I can no longer solve, I am trying to fill the fields from an option that is contained within a select that is automatically populated with foreach , but it is not working

<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>

I want when I select an option of select , the state field and other fields to come in the future, are filled with their values. The data-state property stores the state and in the future new properties will be created to store the values of the next fields.

php mysql javascript

asked by anonymous 14.06.2017 / 21:35

1 answer

How to fade some components in the background to highlight a TPanel on them? Generate grid with random characters - java

score 1 · Accepted Answer

The problem:

When JavaScript is run it will look for the pieces of HTML it needs, but once the Browser renders the page to bits as it is being received from the server it does not wait to have the whole content.

This means that when the JavaScript is read everything that comes later in the code text is not yet known by the browser.

So when the JavaScript code is parsed HTML does not yet exist in Browser's eyes and const select = document.getElementById("cliente"); will give null .

Solution:

Place this script at the end of the HTML, before closing the </body> tag.

Another alternative is to tell JavaScript that you should only run the code when page load is complete:

window.onload = function(){
    // 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;
    });
}