Toggle attributes on multiple forms

[Glorifindal]

Hi there,

I use the code below to remove the readonly attribute on form elements.

<script type="text/javascript">
      function toggleWrite()
      {
         $("#Housewives").removeAttr('readonly');  
         $("#Students").removeAttr('readonly');  
      }
</script>

However, on one page I have multiple forms - taken from the database, displayed as rows - and each row / form should be toggled readonly. At the moment it only works on the first form / first row.

Each form has an unique id - created so :

	while($row = mysql_fetch_array($result))
	{
	$id = (isset($row['ID']))? $row['ID'] : "";
        $formID = "paymentForm".$id;

?>
<fieldset>
<form id="<?php echo $formID; ?>" method="post" action="help.php">
<input type="text" readonly id="Housewives" value="<?php echo $Housewives ?>" >
<input type="text" readonly id="Students" value="<?php echo $Students ?>" >
<input id="payment" type="button" value=" Edit " onclick="toggleWrite()">
</form>
		</fieldset>
<?php
	}
?>

Can someone suggest how I can get every row / form to work, what am I not doing ?

Many thanks in advance

Glorifindal

[crh3675]

An ID cannot be reassigned, (http://www.w3.org/TR/xhtml1/). Try using a class

<input type="text" readonly="readonly" class="readonly" value="<?php echo $Housewives ?>" >

instead and pass the current element.

onclick="toggleWrite(this)"

      function toggleWrite(button)
      {
         $('.readonly', button.form).removeAttr('readonly');
      }

[Glorifindal]

Hi there,

many thanks for the speedy reply

It works wonderfully - and taught me a great lesson in using (this)

MANY THANKS INDEED

Glorifindal

[Glorifindal]

Is it also possible to change the button text / color once it has been clicked - using the same javascript ?