como-faço-um-javascript-que-atualiza-dados-de-um-formulario

<?php

$evento = [
    [
        'evento_id' => 2,
        'celebracao' => 3,
        'eventoNome' => 'ANIVERSÁRIO ARTHUR 2 ANOS',
        'primeiroNome' => 'ARTHUR HENRIQUE',
        'segundoNome' => null,
        'data' => '2018-04-08',
        'observacoes' => null
    ],
    [
        'evento_id' => 3,
        'celebracao' => 3,
        'eventoNome' => 'ANIVERSÁRIO DO ANDERSON',
        'primeiroNome' => 'ANDERSON MOREIRA',
        'segundoNome' => null,
        'data' => '2017-10-21',
        'observacoes' => null
    ]
];
?>

<div class="form-input-box">
    Evento:
    <select id="evento" name="evento" onchange="atualiza(this)">
        <?php foreach ($evento as $row) {
            echo "<option data-row='" . json_encode($row) . "' 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>

<div class='form-input-box'>primeiroNome: <input type='text' id='primeiroNome' disabled/></div>
<div class='form-input-box'>segundoNome: <input type='text' id='segundoNome' disabled/></div>
<div class='form-input-box'>evento_id: <input type='text' id='evento_id' disabled/></div>

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