Clear text box when other radio button is selected

[DebbieC]

I have a site that has two radio buttons. One is for a date field but if they put a date in it and then decide to select the other field I want the first field to clear. I've tried several different ways to do it but can't get it working right. This is one of the ways I've tried:

<input type="radio" value="ExpirationDate" checked name="ExpirationDate">Expiration Date <input type="text" name="Expire_Date" size="10" >
<script language='javascript'>
<!--
(Code for calendar)
//-->
</script>
<input type="radio" value="Permanent" name="ExpirationDate" onClick="ClearField();"/>Never Expire


<script language="JavaScript">
<!--

function ClearField() {
document.newform[Expire_Date].value = "";

}
}
//-->
</script>


Thanks,
Debbie

 

[ToddWW]

<script language="JavaScript">
<!--

function setRadio(elmtRef,formRef) {    
  if (elmtRef.name == "Expire_Date" && formRef.ExpirationDate.value == "Permanent") {
    formRef.ExpirationDate.focus();
  } else {
    if (elmtRef.value == "Permanent") {
      formRef.Expire_Date.value = "";
      formRef.Expire_Date.style.background = "rgb(200,200,200)";
    } else {
      formRef.Expire_Date.style.background = "white";
      formRef.Expire_Date.focus();
    }
  }
}
//-->
</script>

<input type="radio" value="ExpirationDate" checked name="ExpirationDate" onClick="setRadio(this,this.form);">

Expiration Date <input type="text" name="Expire_Date" size="10" onFocus="setRadio(this,this.form);">

<script language='javascript'>        
      <!--
      (Code for calendar)            
      //-->                        
      </script>

<input type="radio" value="Permanent" name="ExpirationDate" onClick="setRadio(this,this.form);"/>Never Expire

This might look a little confusing but would be the best solution if I were in your shoes. Here is what we're doing.

All three elements, the (2) two radio objects and the (1) one text object call the same function. They pass reference to themselves and the form that they are in to the function so the function knows which element is calling the function.

The first item the function is doing is determining if it is being called by the user placing focus into the Date text field. If it is, it will examine the value of the radio object. If the value is set to "Permanent", the javascript will simply move focus somewhere else (I used the radio button) and will not allow the user to gain focus and enter any data into the field.

If the function is not being called by the user placing focus on the text field, then the function assumes that it is being called by the user clicking on either of the radio buttons. It will then examine the current state of the radio buttons by looking at the value. If the value is Permanent, javascript will erase the contents of the date field and set the background of the date field to grey which will give the user the impression that the field is disabled. In fact, it is because after this if they try to place focus on that field, it will trigger the first part of the function. If the value of the radio button is Expiration Date, the background of the text field is set to white and the focus is placed on the text field. I see that you are using some calendar object so you may want to remove that focus on the text field if you are trying to get them to use the calendar.

ToddWW

 

[DebbieC]

Thank you so much. I will give it a try.


Thanks,
Debbie