0

Estou começando a aprender javascript agora, e tenho de preencher um formulário com alguns dados que tenho em um banco. Ao realizar a consulta no banco (através do php), u tenho um array multidimensional assim:

    Array ( [0] => Array ( [evento_id] => 2 [celebracao] => 3 [eventoNome] => ANIVERSÁRIO ARTHUR 2 ANOS [primeiroNome] => ARTHUR HENRIQUE [segundoNome] => [data] => 2018-04-08 [observacoes] => ) [1] => Array ( [evento_id] => 3 [celebracao] => 3 [eventoNome] => ANIVERSÁRIO DO ANDERSON [primeiroNome] => ANDERSON MOREIRA [segundoNome] => [data] => 2017-10-21 [observacoes] => ) )

O formulário é feito a partir de um select, como do código abaixo:

<div class="form-input-box">Evento: <select id="evento" name="evento" onchange="atualiza(this.value)">
       <?php foreach ($evento as $row) {
           echo "<option value=".$row['evento_id'].">".$row['eventoNome']." </option>";}?>
           </select></div>
           <div class="form-input-box">Data: <input type="date" data-format="dd-mm-yyyy" name="data" id="data" disabled/></div>
         <?php
         if ($evento == null) {
            echo "<div class='form-input-box'>Noivo: <input type='text' name='primeiroNome' id='primeiroNome' disabled/></div>";
            echo "<div class='form-input-box'>Noiva: <input type='text' name='segundoNome' id='segundoNome' disabled/></div>";
           } else {
               echo "<div class='form-input-box'>Nome: <input type='text' name='primeiroNome' id='primeiroNome' disabled/></div>";}

Eu sei que preciso dos ids dentro dos inputs para receber os dados do javascript, mas não estou sabendo como pegar o array que está em php, o value do select onde já vai estar com o nome do evento escolhido (ANIVERSÁRIO ARTHUR 2 ANOS value 2 ou ANIVERSÁRIO DO ANDERSON value 3) e atualizar os campos nome e data do form abaixo do select. O script que eu fiz para isso é este:

    function atualiza(valor) {

        var eventoid = valor;
        var eventos = <?php echo json_encode($evento);?>;
        for(i=0; i<= eventos.length; i++){
            for (j=0; j<=eventos.length; j++){
                if (eventos.evento_id = eventoid){
                    document.getElementById('primeiroNome').innerHTML=(eventos.primeiroNome);
                    document.getElementById('segundoNome').value=(eventos.segundoNome);
                    document.getElementById('data').value=(eventos.data);
                    document.getElementById('evento_id').value=(eventos.evento_id);
                }
            }
        }
    }

Mas não está ocorrendo esta atualização, o que posso estar fazendo. Qualquer ajuda é bem vinda.

2 Respostas 2

1

Ok, vamos fazer algumas alterações no seu código:

Adicione uma propriedade data-row na tag option

echo "<option data-row='". json_encode($row) . "' value=".$row['evento_id'].">".$row['eventoNome']." </option>"

Depois mude o parâmetro passado para a função atualiza para this

<select id="evento" name="evento" onchange="atualiza(this)">

Agora mude sua função atualiza

function atualiza(select) {
    var selectedOption = select.querySelector('option:checked');
    var data = JSON.parse(selectedOption.getAttribute('data-row'));

    console.log(data);

    document.getElementById('primeiroNome').value=(data.primeiroNome);
    document.getElementById('segundoNome').value=(data.segundoNome);
    document.getElementById('data').value=(data.data);
    document.getElementById('evento_id').value=(data.evento_id);
}

Código completo no pastebin.

0

Suponho (sem testar tudo) que o problema esteja na função em javascript. Você não deve usar o json_encode nessa situação (ele vai simplesmente colocar uma string na variavel em questão). Deixe assim:

function atualiza(valor) {

    var eventoid = valor;
    var eventos = <?php echo $evento;?>;
    for(i=0; i<= eventos.length; i++){
        for (j=0; j<=eventos.length; j++){
            if (eventos.evento_id = eventoid){
                document.getElementById('primeiroNome').innerHTML=(eventos.primeiroNome);
                document.getElementById('segundoNome').value=(eventos.segundoNome);
                document.getElementById('data').value=(eventos.data);
                document.getElementById('evento_id').value=(eventos.evento_id);
            }
        }
    }
}

No mais use as ferramentas de depuração do navegador para ver tem algum erro em javascrit.

1
  • O problema que os dados que eu preciso estão em um array multidimensional, e são neles que estão as informações que eu preciso. Fazendo desta forma, o echo não imprimiu a variável $evento, e usando o print_r, apenas mostrou o array completo. Commented 27/04/2017 às 3:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .