Enable Text box in a HTML Table

JavaScript
1

Dear all Gurus,

I’m stucked with below logic. Wanna get your advice to find out where I went wrong.Please help…

Below is my Coding done using PHP.
A dynamic HTML table is generated with text boxes (in Dissable mode) with EDIT & DELETE buttons . When user clicks on Edit button, particular row should be enable to edit the values generated.:blush::blush:

But Unfortunately in my coding, always the fist row only gets enabled.:slight_smile:


        <script type="text/javascript">
            function m(id){
document.getElementById('Record_id').disabled=false;
document.getElementById('file_number').disabled=false;
return false;
            }

        </script>



<?php
while ($rw = mysql_fetch_array($query1)) {
$k = $rw['Record_id'];
echo '<tr>';
echo'<form name = "t_data">';
echo '<td>'.'<input type="text" id="Record_id" name="Record_id"value="'.$rw['Record_id'].'" disabled="true" size ="5"/>'.'</td>';
echo '<td>'.'<input type="text" id="file_number" name="file_number" value="'.$rw['file_number'].'" disabled="true" size = "9"/>'.'</td>';
echo '</tr>';

echo '<tr>';
echo' <td>';
echo'<form action="dlt_grid.php" method = "GET">';
echo'<input type="submit" value="Delete">';
echo'<input type="hidden" name="hf" value="'.$k.'">';
echo'</form> ';
echo'</td>';

echo' <td>';
echo'<input type="submit" id="'.$k.'" value="Edit" onclick = "return m(this.id)">';
echo'<input type="hidden" name="hf" value="'.$k.'">';
echo'</td>';
echo '</tr>';
echo'</form>';
2

You are using the getElementById function…which by default should only return on element if it exists…plus id should be used as a unique identified for one element.

Your best bet would be to use jquery and target each textbox based off the selected rows index in the table.

3

Hi,

this is how your php should look like

<?php
while ($rw = mysql_fetch_array($query1))
{
    $k = $rw['Record_id'];
    echo '<tr>';
    echo'<form name = "t_data">';
    echo '<td>'.'<input type="text" id="Record_id' . $rw['Record_id'] . '" name="Record_id" value="'.$rw['Record_id'].'" disabled="true" size ="5"/>'.'</td>';
    echo '<td>'.'<input type="text" id="file_number' . $rw['Record_id'] . '" name="file_number" value="'.$rw['file_number'].'" disabled="true" size = "9"/>'.'</td>';
    echo '</tr>';

    echo '<tr>';
    echo' <td>';
    echo'<form action="dlt_grid.php" method = "GET">';
    echo'<input type="submit" value="Delete">';
    echo'<input type="hidden" name="hf" value="'.$k.'">';
    echo'</form> ';
    echo'</td>';

    echo' <td>';
    echo'<input type="submit" id="'.$k.'" value="Edit" onclick = "return m(' . $rw['Record_id'] . ')">';
    echo'<input type="hidden" name="hf" value="'.$k.'">';
    echo'</td>';
    echo '</tr>';
    echo'</form>';
?>

end this is javascript

<script type="text/javascript">
            function m(id){
document.getElementById('Record_id'+id).disabled=false;
document.getElementById('file_number'+id).disabled=false;
return false;
            }

        </script>

just let me know if it helps