Remove ReadOnly Attribute

[chaychie]

Hi,

I would like to display my database data in text fields form.

I would like to have all the text fields to be locked (read only), so I added readonly attribute into the text fields. Moreover, I would like to add a button "EDIT" at each row, so that the specific row become unlock/editable.

The problem now is that my code is not working! Anyone can help?

I had created a EDIT! button to trigger the function.
The following is the code to display all the data in text fields form:

<?php 
  $i = 0;
    while ($row=mysql_fetch_array($result)){
  ?>
    <tr>
    <form name="form1" action="submitAction.php" method="post">
    <td width="72" ><input type="text" autocomplete=off readonly=true name="ProjectName<?php echo $row['No'];?>" value="<?php echo  $row['ProjectName'];?>" size="20" style="font-size: 9"></font></td>
    <td width="72" ><input type="text" autocomplete=off readonly=true name="DeviceType<?php echo $row['No'];?>" value="<?php echo  $row['DeviceType'];?>" size="15" style="font-size: 9"></font></td>
 <td width="64" ><input type="button" value="EDIT!" onclick="removeAlignment(<?php echo $i; ?>);"></font></td>
    <td width="67" style="font-size: 12">
    <select name="action" onchange="submitRequest(<?php echo $i; ?>);">
    <option value=>Ongoing </option>
    <option value="<?php echo $row['ProjectName'];?>">Complete</option>
    <option value="<?php echo $row['No'];?>">Update</option>
    </select>								
    </form>
      </td>
    </tr>
  <?php 
  $i++;
  }
  ?>

And the following is the javascript code:

<script language="JavaScript">
  function removeAlignment(id){
    var read=document.getElementById("txt")
        .removeAttribute("readonly",0);
  }
</script>

Thanks!

[vibhaJ]

Try this code.

<?php 
  $i = 0;
    while ($row=mysql_fetch_array($result)){
  ?>
    <tr>
    <form name="form1" action="submitAction.php" method="post">
    <td width="72" ><input type="text" autocomplete=off readonly="readonly" id="ProjectName_<?=$i?>" name="ProjectName<?php echo $row['No'];?>" value="<?php echo  $row['ProjectName'];?>" size="20" style="font-size: 9"></font></td>
    <td width="72" ><input type="text" autocomplete=off readonly="readonly" id="DeviceType_<?=$i?>" name="DeviceType<?php echo $row['No'];?>" value="<?php echo  $row['DeviceType'];?>" size="15" style="font-size: 9"></font></td>
 <td width="64" ><input type="button" value="EDIT!" onclick="removeAlignment(<?php echo $i; ?>);"></font></td>
    <td width="67" style="font-size: 12">
    <select name="action" onchange="submitRequest(<?php echo $i; ?>);">
    <option value=>Ongoing </option>
    <option value="<?php echo $row['ProjectName'];?>">Complete</option>
    <option value="<?php echo $row['No'];?>">Update</option>
    </select>								
    </form>
      </td>
    </tr>
  <?php 
  $i++;
  }
  ?>
  
  <script language="JavaScript">
  function removeAlignment(id){
    document.getElementById("ProjectName_"+id).removeAttribute("readonly",0);
	document.getElementById("DeviceType_"+id).removeAttribute("readonly",0);
  }
</script>

[diafol]

vin probably has it.

In addition:

DOn't know where this: </font> came from?! Yuk. Get rid of it. I'd also remove the inline js and put it in an event handler.

[divyakrishnan]

Try this also

<?php 
  $i = 0;
    while ($row=mysql_fetch_array($result)){
  ?>
    <tr>
    <form name="form1" action="submitAction.php" method="post">
    <td width="72" ><input type="text" autocomplete=off readonly name="ProjectName<?php echo $row['No'];?>" value="<?php echo  $row['ProjectName'];?>" size="20" style="font-size: 9"></font></td>
    <td width="72" ><input type="text" autocomplete=off readonly name="DeviceType<?php echo $row['No'];?>" value="<?php echo  $row['DeviceType'];?>" size="15" style="font-size: 9"></font></td>
 <td width="64" ><input type="button" value="EDIT!" onClick="removeAlignment(<?php echo $i; ?>);"></font></td>
    <td width="67" style="font-size: 12">
    <select name="action" onChange="submitRequest(<?php echo $i; ?>);">
    <option value=>Ongoing </option>
    <option value="<?php echo $row['ProjectName'];?>">Complete</option>
    <option value="<?php echo $row['No'];?>">Update</option>
    </select>								
    </form>
      </td>
    </tr>
  <?php 
  $i++;
  }
  ?>

[chaychie]

Hi, I had tried both the codes however it's not working! Any ideas?

Is it because of the

id="ProjectName_<?=$i?>"

thanks!

[chaychie]

Hi, I managed to make to code working!

I had edited the following code

id="ProjectName_<?=$i?>"

to

id="ProjectName_<?=$i?>"

And it works perfectly! Thanks guys!!

By the way, instead of removing the ReadOnly Attribute, is it possible to make it toggle between locked/unlocked by clicking the "EDIT!" button? I know is something to do with the javascript, but i am not sure how to do it.

Thanks!

[P0lT10n]

Why dont you pop up a textbox and the user enter the text to replace the "input text" with readonly ?

[divyakrishnan]

I think this will help you

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
function edit()
{
 
 
 var ck=document.f.chk;
 if(ck.checked==true)
 {
    document.f.t1.disabled=true;
 }
 else
 {
     document.f.t1.disabled=false;

 
 
 }

}
</script>
</head>

<body>
<form id="form1" name="f" method="post" action="">
  <input name="t1" type="text" id="t1" />
  <input type="checkbox" name="chk" value="checkbox" onclick="edit()"/>
</form>
</body>
</html>