Clear/Reset - READONLY fields....

[Madhav Lakkapragada]

Ok, based on this discussion I changed my DISABLED fields to READONLY fields. Now, on (second thought) a bit more testing, I realized I need that ugly (as you call it) scripting option as well. My form also has a reset type 'Clear' form button. The 'READONLY' form fields, are not cleared.

Well, I added an onClick function and attempted to reset the form fields. But I get a JS error saying 'form.MyTextBox has no properties'.

Any clues please.
Thanks.

- m


Edited:

This is the script I have -

On the FORM:
 
<INPUT type="text" name="MyTextBox" 
value=[b]"<%= myValue %> 
READONLY />
 
<INPUT TYPE="Reset" VALUE="Clear Form" 
o n c l i c k ="return clearResetReadOnlyForm2(this)"
/></TD>
 
 
JS:
function clearResetReadOnlyForm2(form)
{
   if (form.MyTextBox.value!="")
   {
     form.MyTextBox.value = " ";
   }
}
 
ps: Please ignore the extra spaces in o n c l i c k. Thxs.

I also know that the JS is getting called. I checked this with alert(...) and it did alert me.
[ July 07, 2005: Message edited by: Madhav Lakkapragada ]

[Eric Pascarello]

clearResetReadOnlyForm2(this.form)

[Eric Pascarello]

also hint

instead of spacing out onclick="wow" use

&111; in place of the o

Eric
[ July 07, 2005: Message edited by: Eric Pascarello ]

[Madhav Lakkapragada]

nope that didn't help. I don't get any errors now, but the values are not cleared. Something weird going on.

- m

[Eric Pascarello]

the value is being reset by the button to what it started out as. SO lets break out the big and the ugly.

<style type="text/css">
  .RO{background-color:silver}
</style>
<script type="text/javascript">
  function ResetForm(xFormName){
    var arrElems = document.forms[xFormName].elements;
    document.forms[xFormName].reset();
    for(xi=0;xi<arrElems.length;xi++){
      if(arrElems[xi].type.toLowerCase() == "text" ||
         arrElems[xi].type.toLowerCase() == "hidden" ||
         arrElems[xi].type.toLowerCase() == "password" ||
         arrElems[xi].type.toLowerCase() == "textarea")
        arrElems[xi].value="";
      else if(arrElems[xi].type.toLowerCase() == "radio" ||
              arrElems[xi].type.toLowerCase() == "checkbox")
        arrElems[xi].selected = false;
      else if(arrElems[xi].type.toLowerCase().indexOf("select") != -1)
        arrElems[xi].selectedIndex = -1;
    }
  }
</script>
 

<form name="Form1">
  <input type="text" value="asdf" name="MyTextBox" readOnly=true" class="RO">
  <input type="text" name="t1" value="fdz">
  <input type="reset" name="btnReset" onclick="ResetForm(this.form.name);return false;">
</form>

For easy copy/paste look here: http://radio.javaranch.com/pascarello/2005/05/25/1117043999998.html

Eric

[Eric Pascarello]

I am going to take my hour drive home so you are on your own.

Eric

[Madhav Lakkapragada]

Ahh....I am missing the return false;. With that peice added, it is erasing the values alright, but my form seems to be pretty useless since the some of fields are still READONLY.

I think I need to have a BACK button instead of this whole reset form fields function. I hate to POST it to the server and do a RequestDispatch(...) back to the original JSP. Is there a decent way of doing this on the client side? Well other than the browser back button.

- m

[Eric Pascarello]

history.back()

Eric