Solved

Reset HTML form on submit using Javascript

Posted on 2008-10-07
6
2,836 Views
Last Modified: 2013-11-19
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

0
Comment
Question by:agulaid
  • 3
  • 2
6 Comments
 
LVL 11

Expert Comment

by:kelvinwkw
ID: 22665528
<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
 

Author Comment

by:agulaid
ID: 22667305
Hi kelvinwkw,

all you have done is post the code i included in my original question.
0
 
LVL 11

Expert Comment

by:kelvinwkw
ID: 22667341
<input type="reset" value="reset"/>
 <input name="" type="submit" value="submit"/>

i added in the reset and edit the submit
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:agulaid
ID: 22667418
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
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 500 total points
ID: 22672731
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
 

Author Closing Comment

by:agulaid
ID: 31504086
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

919 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now