Update of each row of a table through a dropdown constructed by an associative matrix

Question

I intend to create a table where one of the fields is of the drop down type, consisting of the key values of an associative matrix and according to the key chosen, a second column is automatically updated with the corresponding value.

The associative matrix has the following form:

$JusRes=array(
"Jus 1"=>"Resp 1",
"Jus 2"=>"Resp 2",
"Jus 3"=>"Resp 3"
);

Javascript function:

<script type='text/javascript'>
function mudaRes(indice){   
    var just=document.getElementById('Just');   
    var selectedOption = just.options[just.selectedIndex];  
    var respValue = selectedOption.getAttribute('Resp');
    var resp=document.getElementById('DadosTab');   
    var Re=document.getElementById('Res');  
    Re.value = respValue;
    resp.rows[indice+1].cells[4].innerHTML = respValue; 
}

</script>

This setting only works when I click the first time in the first row, the data is placed in the Resp column and I can save this data, the problem is when I click in the second row, from here, the update of the "Resp" column no longer works I can’t even get the chosen data.

I intend to save the data, so in order to click "Send" insert in the BD.

Constitution of the table:

<table id='DadosTab'>
  <tr>
    <th>Nome</th>
    <th>Sobrenome</th>
    <th>Idade</th>    
    <th>Just</th>   
    <th>Resp</th>   
  </tr>";
echo "<form action='' method='POST'>"; 
$indtd=0;
$indtr=0;
foreach ($Dados as $chave=>$valor){
    echo "<tr id='".$indtr."'>";
    //nome
    echo "<td align='center'><input type='hidden' name='nome[]' value='".$Dados[$indtr][0]."' />".$Dados[$indtr][0]."</td>";
    $indtd++;
    //sobrenome
    echo "<td align='center'><input type='hidden' name='sobrenome[]' value='".$Dados[$indtr][1]."' />".$Dados[$indtr][1]."</td>";
    $indtd++;
    //idade 
    echo "<td align='center'><input type='text' name='idade[]' value='".$Dados[$indtr][2]."' /></td>";
    $indtd++;
    //echo "<td align='center'>".$Dados[$ind][2]."</td>";   
    echo "<td><select id='Just' name='Just[]' style='width: 220px' onchange=mudaRes($indtr)>";
    $indtd++;
        echo "<OPTION>Tipo de Justificacao</OPTION>";
        foreach ($JusRes as $Jus=>$Resp){
            echo "<OPTION id='".$indtr."' Resp='".$Resp."' value='".$Jus."'>".$Jus."</OPTION>";
        }   
    echo "</select></td>";
    echo "<td align='center'><input id='Res' type='hidden' name='Res[]' /></td>";
    $indtd++;   
    echo "</tr>";    
    $indtr++;
}
echo "<tr><th align='left' colspan='5'><input type='submit' value='Send' name='Send'></th></tr>";
echo "</form>";

Can you help me?

Answer 1

The problem is you’re repeating two ids inside the loop foreach. This goes wrong because in JS you are selecting these id'as if they were unique. The same id can never be repeated, it should be unique on the page.

If you have more than one element with the same id and try to do that:

var Re=document.getElementById('Res');

You will only get the first element with the id "Res".

What you must do is create id'different s in sequence within the loop, you can use the variable $indtr that you are increasing ++ every loop. Just put it inside the two id's repetitive:

Here:

                            ↓
echo "<td><select id='Just$indtr' name='Just[]' style='width: 220px' onchange='mudaRes(this, $indtr)'>";

And here:

                                         ↓
echo "<td align='center'><input id='Res$indtr' type='hidden' name='Res[]' /></td>";

Then you must send by onchange, beyond the code that is already there of the variable $indtr, own select represented by this, and involve the value of onchange in single quotes:

onchange='mudaRes(this, $indtr)'

Add to td before the input hidden one span empty to receive the text. This will facilitate the process and you will not need to use innerHTML in function:

                           ↓      ↓
echo "<td align='center'><span></span><input id='Res$indtr' type='hidden' name='Res[]' /></td>";

And in the function, add one more parameter to receive the this (in case, you can use just already contained in the function):

function mudaRes(just, indice){...

Then you can remove the line var just=document.getElementById('Just'); because the just already comes as parameter.

And on the var line Re=document.getElementById('Res'+indice); you concatenate the variable indice to catch the respective id.

Also put the code in the function to put the text in the span:

var resp_txt = resp.rows[indice+1].cells[4].querySelector("span");
resp_txt.innerHTML = respValue;

And remove the line resp.rows[indice+1].cells[4].innerHTML = respValue; that is no longer necessary.

The whole function will look like this:

function mudaRes(just, indice){   
    var selectedOption = just.options[just.selectedIndex];  
    var respValue = selectedOption.getAttribute('Resp');
    var resp=document.getElementById('DadosTab');   
    var Re=document.getElementById('Res'+indice);  
    Re.value = respValue;
    var resp_txt = resp.rows[indice+1].cells[4].querySelector("span");
    resp_txt.innerHTML = respValue;
}

With all these changes it will work perfectly.

Functional example without PHP to illustrate how it works (I removed the hidden input to display the value):

function mudaRes(just, indice){   
    var selectedOption = just.options[just.selectedIndex];  
    var respValue = selectedOption.getAttribute('Resp');
    var resp=document.getElementById('DadosTab');   
    var Re=document.getElementById('Res'+indice);  
    Re.value = respValue;
    var resp_txt = resp.rows[indice+1].cells[4].querySelector("span");
    resp_txt.innerHTML = respValue;
//    resp.rows[indice+1].cells[4].innerHTML = respValue;
}

<table id="DadosTab">
  <tbody><tr>
    <th>Nome</th>
    <th>Sobrenome</th>
    <th>Idade</th>    
    <th>Just</th>   
    <th>Resp</th>   
  </tr><form action="" method="POST"></form><tr id="0"><td align="center"><input type="hidden" name="nome[]" value=""></td><td align="center"><input type="hidden" name="sobrenome[]" value=""></td><td align="center"><input type="text" name="idade[]" value=""></td><td><select id="Just0" name="Just[]" style="width: 220px" onchange="mudaRes(this, 0)"><option>Tipo de Justificacao</option><option id="0" resp="Resp 1" value="Jus 1">Jus 1</option><option id="0" resp="Resp 2" value="Jus 2">Jus 2</option><option id="0" resp="Resp 3" value="Jus 3">Jus 3</option></select></td><td align="center"><span></span><input id="Res0" name="Res[]"></td></tr><tr id="1"><td align="center"><input type="hidden" name="nome[]" value=""></td><td align="center"><input type="hidden" name="sobrenome[]" value=""></td><td align="center"><input type="text" name="idade[]" value=""></td><td><select id="Just1" name="Just[]" style="width: 220px" onchange="mudaRes(this, 1)"><option>Tipo de Justificacao</option><option id="1" resp="Resp 1" value="Jus 1">Jus 1</option><option id="1" resp="Resp 2" value="Jus 2">Jus 2</option><option id="1" resp="Resp 3" value="Jus 3">Jus 3</option></select></td><td align="center"><span></span><input id="Res1" name="Res[]"></td></tr><tr id="2"><td align="center"><input type="hidden" name="nome[]" value="d"></td><td align="center"><input type="hidden" name="sobrenome[]" value=""></td><td align="center"><input type="text" name="idade[]" value=""></td><td><select id="Just2" name="Just[]" style="width: 220px" onchange="mudaRes(this, 2)"><option>Tipo de Justificacao</option><option id="2" resp="Resp 1" value="Jus 1">Jus 1</option><option id="2" resp="Resp 2" value="Jus 2">Jus 2</option><option id="2" resp="Resp 3" value="Jus 3">Jus 3</option></select></td><td align="center"><span></span><input id="Res2" name="Res[]"></td></tr><tr><th align="left" colspan="5"><input type="submit" value="Send" name="Send"></th></tr>
</tbody></table>