Clear contents on click

Question

All,

In the following code

<INPUT TYPE="radio" name="1" id="1" VALUE="1" <?php echo $checked1 ?>><font size="2">1</font>
<INPUT TYPE="radio" name="2" id="2" VALUE="2" <?php echo $checked2 ?>><font size="2">2</font>
<TEXTAREA name="names" id="names" rows="15" cols="65"><?php echo $names ?></TEXTAREA>

If the radio button 1 selected for the first time then onclick on textarea its contents should be cleared .But if the user clicks for the second time on the same text area the contents should not be cleared for the same radio button1.

The same should hold good for radio button2.How is this done.

Thanks.

Answer 1

edit: Looks like I mis-understood your requirements. This only applies to the click of the radio button, not to the textarea.

You need to setup a click event to clear the textarea content, and then unbind itself.

With jQuery the event handler would be something like:

$('#names').val('');
$(this).unbind('click');

Answer 2

Demo and here is the code:

<TEXTAREA name="names" id="names" rows="15" cols="65" onclick="doIt(this);">Hello There</textarea>

<script>
var isDone = false;

function doIt(field)
{
  if (document.getElementById("1").checked == true && isDone == false)
  {
     field.value = "";
     isDone = true;
  }
}
</script>

This would clear contents for the first time and not again for the life time of page.

Answer 3

This will fullfill your requirement. just place in body tag

<input type="radio" name="G1"  id="1" value="1" /> <font size="2">1</font>
<input type="radio" name="G1" id="2" value="2"  /> <font size="2">2</font>
<textarea name="names" id="names" rows="15" cols="65" onfocus="handleOnFocus()"></textarea>

<script type="text/javascript">
    var isCleardForButton1 = false;
    var isCleardForButton2 = false;

    function handleOnFocus() {
        var objTA = document.getElementById("names");
        var objRadio1 = document.getElementById("1");
        var objRadio2 = document.getElementById("2");
        if (isCleardForButton1 == false && objRadio1.checked == true) {
            objTA.value = "";
            isCleardForButton1 = true;
        }
        if (isCleardForButton2 == false && objRadio2.checked == true) {
            objTA.value = "";
            isCleardForButton2 = true;
        }
    }
</script>