How do I do a javascript updating form data?

Question

I’m starting to learn Javascript now, and I have to fill out a form with some data I have in a database. When performing the query in the database (via php), u have a multidimensional array like this:

    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] => ) )

The form is made from a select, as from the code below:

<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>";}

I know I need the ids inside the inputs to receive the javascript data, but I’m not sure how to get the array that is in php, the value of the select where will already be with the name of the event chosen (ARTHUR BIRTHDAY 2 YEARS value 2 or ANDERSON ANNIVERSARY value 3) and update the form name and date fields below the select. The script I made for that is this:

    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);
                }
            }
        }
    }

But this update isn’t happening, which I might be doing. Any help is welcome.

Answer 1

Okay, let’s make some changes to your code:

Add a data-Row property to the tag option

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

Then change the parameter passed to the function atualiza for this

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

Now change your function 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);
}

Complete code on Pastebin.

Answer 2

I suppose (without testing everything) that the problem is in the javascript function. You should not use json_encode in this situation (it will simply put a string on the variable in question). Leave it at that:

Function updates(value) {

    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 more use the browser debugging tools to see have some error in javascrit.