Update each row of a table via a dropdown built by an associative array

Question

Update each row of a table via a dropdown built by an associative array

Navigation

#1 by (1 votes)

0

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

Theassociativearrayhasthefollowingform:

$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 on the first line, the corresponding data is placed in the Resp column and I can save that data, the problem is when I click on the second line, from here, the column "Resp" nor can I get the data chosen.

I want to save the data, so in order to click "Send" insert in the DB.

Table layout:

<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?

javascript html

asked by anonymous 14.11.2018 / 18:42

1 answer

Calculating date and time Sum of a result of a SQLDataSource

score 1 · Accepted Answer

The problem is that you are repeating two id s within the foreach loop. This goes awry because in JS you are selecting these id 's as if they are unique. The same id can never be repeated, it must be unique on the page.

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

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

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

What you should do is to create id 's in sequence within the loop, you can use the $indtr variable that you are incrementing ++ to each loop. Just put it within the% 2 of% '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>";

Next, you should send id , in addition to the code that is already there for the variable onchange , the $indtr itself represented by select , and involve the value of this with single quotation marks: / p>

onchange='mudaRes(this, $indtr)'

Add in onchange before td an input hidden empty to receive the text. This will make the process easier and you will not have to use span in the 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 innerHTML (in this case, you can use this that already contains in the function):

function mudaRes(just, indice){...

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

And in the line var just you concatenate the variable Re=document.getElementById('Res'+indice); to get its indice .

Also put the code to put the text in id :

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

And remove the line span that is no longer needed.

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 will work perfectly.

Functional example without PHP, to illustrate the operation (I removed the resp.rows[indice+1].cells[4].innerHTML = respValue; of the input in order to see 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>