Clearing Form with onclick

[annasue]

I have a file where I want a Reset button to clear the form.

I have put

<SCRIPT LANGUAGE="JavaScript">
function clear(form) {
document.form1.wid.value="";
document.form1.heigh.value="";
}
</script>

as the script within the head codes and

<INPUT TYPE="reset" VALUE="=RESET=" onClick="clear(this.form)">

as the call within the form. The Reset isn't clearing the form. I know almost nothing about Javascripting - copied this code from a web site.

The page is

http://www.webs2impress.com/imperial/register2.php

- YOU HAVE TO GET TO THIS PAGE BY FIRST GOING TO

http://www.webs2impress.com/imperial/register.php

and partially completing the form.

Thanks in advance.

 

[kaht]

1. reset buttons have a default function of setting all the values on the page to what they originally were when the page was loaded.

2. you're passing a form reference to your clear function, but then not using it anywhere inside the function.

I'd make the following changes:

<SCRIPT LANGUAGE="JavaScript">
[b]//avoid using form as a variable name[/b]
function clear(blahForm) { 
   blahForm.wid.value=""; 
   blahForm.heigh.value="";
}
</script>

<INPUT TYPE="[b]button[/b]" VALUE="=RESET=" onClick="clear(this.form)">

-kaht

 

[annasue]

I tried that but it still isn't clearing the form.

 

[LFI]

Name your function something else. You can't name it 'clear'. It probably conflicts with something built in to JavaScript (the deprecated Document.clear() function possibly).

--Dave

 

[annasue]

I changed the function name, as recommended, and it not only isn't clearing the form, but I'm getting an "Error on page" message in the info line at the bottom of the screen when I click on the Reset button.

 

[LFI]

What is the error? Double-click on the message to see.

--Dave

 

[annasue]

It says:

Line: 7
Char: 4
Error: 'wid' is null or not an object
Code: 0
URL:

http://www.webs2impress.com/imperial/register2.php

 

[LFI]

Well, you don't have a form element on that page named 'wid'.

--Dave

 

[annasue]

Can I just delete that wid part? As I stated, I know practically nothing about javascripting. I just want a function to clear the form contents.

 

[LFI]

Here's a function you can use, based solely on your form:

function resetform(blahForm) { 
  for(var i=0; i < blahForm.elements.length; i++)
  {
   var elementType = blahForm.elements[i].type;
   if(elementType != 'button' && elementType != 'submit' && elementType != 'radio' && elementType != 'select-multiple')
    blahForm.elements[i].value = '';
   else if(elementType == 'radio')
    blahForm.elements[i].checked = false;
   else if(elementType == 'select-multiple')
    blahForm.elements[i].selectedIndex = -1;
  }
}

If you add other form element types (like a select list (as opposed to select-multiple) or a checkbox) some adjustments might be needed.

Let me know if there's anything in this you don't understand.

Good luck!

--Dave

 

[kaht]

I went to your site and once I got register2.php up I checked the view source. There are no form elements on your page with the name wid or heigh. The reason it's giving you an error is because you're trying to clear elements that don't exist. Try this as your function cause it doesn't reference any elements directly:

Notice when calling this function you pass no parameters, so take this.form out of your function call

function resetform() {
   var inputs = document.getElementsByTagName("input");
   for (i = 0; i < inputs.length; i++) {
      if (inputs[i].type == "text") {
         inputs[i].value = "";
      }
      if (inputs[i].type == "radio") {
         inputs[i].checked = false;
      }
   }
   var dropDowns = document.getElementsByTagName("select");
   for (i = 0; i < dropDowns.length; i++) {
      dropDowns[i].selectedIndex = -1;
   }
}

-kaht

 

[kaht]

whoops, neglected your textarea on your page, this will do the trick:

function resetform() {
   var inputs = document.getElementsByTagName("input");
   for (i = 0; i < inputs.length; i++) {
      if (inputs[i].type == "text") {
         inputs[i].value = "";
      }
      if (inputs[i].type == "radio") {
         inputs[i].checked = false;
      }
   }
   var dropDowns = document.getElementsByTagName("select");
   for (i = 0; i < dropDowns.length; i++) {
      dropDowns[i].selectedIndex = -1;
   }
   var textAreas = document.getElementsByTagName("textarea");
   for (i = 0; i < textAreas.length; i++) {
      textAreas[i].value = "";
   }
}

-kaht

 

[annasue]

Thanks to everyone who replied - the last code worked like a jewel.