How do I make a javascript that updates data in a form?

Question

How do I make a javascript that updates data in a form?

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I'm starting to learn javascript now, and I have to fill out a form with some data I have in a bank. When doing the query in the database (through 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 in 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 that 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 it will already be with the name of the chosen event (ANNIVERSARY ARTHUR 2 YEARS value 2 or ANDERSON ANNIVERSARY value 3) and update the name and date fields of the form below the select. The script I made for this 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 is not happening, what can I be doing. Any help is welcome.

php javascript html5

asked by anonymous 27.04.2017 / 01:33

2 answers

0

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 in the variable in question). Leave it like this:

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 longer use the browser debugging tools to see any javascrit errors.

27.04.2017 / 02:31

Error Listing Object Data in PHP Redirecting Excess ASP NET MVC

score 0 · Accepted Answer

Ok, let's make some changes to your code:

Add a data-row property in the option tag

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

Then change the parameter passed to the function atualiza to 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);
}

Full code on pastebin .