Reset HTML form on submit using Javascript

I would like to be able to reset all form values to the default values apart from the textfield on submit, if  href id="filter" reads Filter. if href id="less" then the form should submit all entered values.
<html>
<head>
 
<title>Untitled Document</title>
<script type="text/javascript">
 
function show_adv() {
 
	if (document.getElementById("adv").style.display=='none') {
	document.getElementById("adv").style.display='';
	document.getElementById("filter").innerHTML = 'Less';
	}
	else  {
	document.getElementById("adv").style.display='none';
	document.getElementById("filter").innerHTML = 'Filter';
	}
 
}
 
</script>
</head>
 
<body>
 
<form action="" method="POST">
  <table width="899" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="860" style="padding-bottom:10px;"><input name="textfield" type="text" id=""  size="30" />          <input name="" type="button" /></td>
    <td style="padding-bottom:10px;"><a href="#" id="filter" class="style46" onclick="show_adv();">Filter </a></td>
  </tr>
  <tr>
    <td colspan="2" id="adv" style="display:none;">
    <table width="100%" border="0" style="background-color: #D6ECD2">
  
  <tr>
  <td colspan="7" class="style2" style="padding:10px;">Query the following:<br/>
  <label><input name="Title" type="checkbox" disabled value="Title" checked />Title</label>
  <label><input name="Title" type="checkbox"  value="Tags" checked />Tags</label>
  <label><input name="Title" type="checkbox"  value="Description" checked />Description</label>
  <label><input name="Title" type="checkbox"  value="Uploader" checked />Uploader</label>
  </td>
  </tr>
  
  
  <tr>
    <td colspan="7" class="style2" style="padding:0px 10px 10px 10px;">Uploaded: <br/>
  <select name="no_of_student" id="no_of_student">
  <option selected="selected">Anytime</option>
    <option value="1">Today</option>
    <option value="7">Within the week</option>
    <option value="30">Within the month</option>
    <option value="1-">Within the year</option>
    <option value="1+">Over a year ago</option>
			  			  
 
      </select>
  </td></tr>
  
 
   
  </table>
    </td>
  </tr>
</table>
</form>
</body>
</html>

Open in new window

agulaidAsked:
Who is Participating?
 
scrathcyboyConnect With a Mentor Commented:
if (  document.getElementById("filter").innerHTML == 'Filter' )
{      var txtval = document.form_name.textfield.value;
       document.form_name.reset();
        document.form_name.textfield.value = txtval;
}

you have to give the form a NAME, and replace form_name with that name in the above, and it will work.
0
 
kelvinwkwCommented:
<html>
<head>
 
<title>Untitled Document</title>
<script type="text/javascript">
 
function show_adv() {
 
        if (document.getElementById("adv").style.display=='none') {
        document.getElementById("adv").style.display='';
        document.getElementById("filter").innerHTML = 'Less';
        }
        else  {
        document.getElementById("adv").style.display='none';
        document.getElementById("filter").innerHTML = 'Filter';
        }
 
}
 
</script>
</head>
 
<body>
 
<form action="" method="POST">
  <table width="899" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="860" style="padding-bottom:10px;"><input name="textfield" type="text" id=""  size="30" />          <input name="" type="submit" value="submit"/></td>
    <td style="padding-bottom:10px;"><a href="#" id="filter" class="style46" onclick="show_adv();">Filter </a></td>
  </tr>
  <tr>
    <td colspan="2" id="adv" style="display:none;">
    <table width="100%" border="0" style="background-color: #D6ECD2">
 
  <tr>
  <td colspan="7" class="style2" style="padding:10px;">Query the following:<br/>
  <label><input name="Title" type="checkbox" disabled value="Title" checked />Title</label>
  <label><input name="Title" type="checkbox"  value="Tags" checked />Tags</label>
  <label><input name="Title" type="checkbox"  value="Description" checked />Description</label>
  <label><input name="Title" type="checkbox"  value="Uploader" checked />Uploader</label>
  </td>
  </tr>
 
 
  <tr>
    <td colspan="7" class="style2" style="padding:0px 10px 10px 10px;">Uploaded: <br/>
  <select name="no_of_student" id="no_of_student">
  <option selected="selected">Anytime</option>
    <option value="1">Today</option>
    <option value="7">Within the week</option>
    <option value="30">Within the month</option>
    <option value="1-">Within the year</option>
    <option value="1+">Over a year ago</option>
                                                 
 
      </select>
      <input type="reset" value="reset"/>
  </td></tr>

  </table>
    </td>
  </tr>
</table>
</form>
</body>
</html>
0
 
agulaidAuthor Commented:
Hi kelvinwkw,

all you have done is post the code i included in my original question.
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
kelvinwkwCommented:
<input type="reset" value="reset"/>
 <input name="" type="submit" value="submit"/>

i added in the reset and edit the submit
0
 
agulaidAuthor Commented:
That just resets the entire form, i am looking to reset all form fields aside from the first field on submitting the form if filter says "less", otherwise the form should not be reset.
0
 
agulaidAuthor Commented:
Perfect I wrote exactly what you wrote but wasn't sure if another method was possible, but im happy you wrote the same script i wrote... It confirms my method, thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.