• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 331
  • Last Modified:

How to rest all Form Elements on a Form.

Hi there I have a form,  which has 6 dropdowns,  15 Checkboxes and  A Text Field. I would like to know how to code a javascript function that will loop through these elements and reset each one.

Many Thanks
0
MayoorPatel
Asked:
MayoorPatel
2 Solutions
 
samic400Commented:
This will give you an idea of how to loop through all elements and read different properties. Now you would just have to add code to change whatever you wish -

http://jennifermadden.com/javascript/loopForms.html




0
 
hieloCommented:
You do not need javascript to reset a form to its initial state. All you need is a field of type "reset":
<input type="reset" value="Start Over" />
0
 
MayoorPatelAuthor Commented:
Hielo this does not reset dropdowns only text fields.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
samic400Commented:
Or you could put all of the default values into something like below and have them changed when a reset button gets pressed.

<html>
<head>

<script type='text/javascript'>
function resetvalues() {
var seloption = document.getElementById('taxlist');
 seloption.selectedIndex=0;
 seloption = document.getElementById('joblist');
 seloption.selectedIndex=0;
 document.getElementById('firstname').value = " ";
 
}
</script>
</head>
<body>
<select id='taxlist'>
<option value=0>select tax code</option>
<option value=1>tax 1</option>
<option value=2>tax 2</option>
</select>
<br />
<br />
<select id='joblist'>
<option value=0>select job code</option>
<option value=1>job 1</option>
<option value=2>job 2</option>
</select>
<br />
<br />
<input type='text' id='firstname' />
<br />
<br />
<input type='button' value='reset all values' onclick='resetvalues();' />
</body>
</html>
0
 
Murali MurugesanFull stack Java developerCommented:
do ad below,

function resetForm(formId){

var inputs = document.getElementById(dialogId).getElementsByTagName('input')
for(var x in inputs)
if(inputs[x].type="text")
inputs[x].value = ''
if(inputs[x].type="checkbox")
inputs[x].chacked=false
......
}

so on u continue for any form elements with input
for select just have the getElementsByTagName changes to "Select"..

Hope this helps
0
 
hieloCommented:
The purpose of the type="reset" is to set the form to its original state when it loaded from the server. Thus, if any field loads up with a specified value at load time, its value is then changed, and finally the "reset" button is pressed, it will rever to its original value. The "reset" button resets all the elements no just text fields. To reset does not necessarily mean "to blank out". I believe you are trying to "blank out" all the fields.
If at all possible, you could load up the form so that initally the "blank" option on the dropdown is blank.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form>
<select>
 <option value="" selected="selected">Make a selection</option>
 <option value="1">A</option>
 <option value="2">B</option>
</select>
<textarea></textarea>
<input type="text" value=""/>
<input type="radio" name="flower"/>Rose<input type="radio" name="flower"/>Violet

<input type="reset" value="Reset"/>
</form>
</body>
</html>
0
 
Computer101Commented:
Forced accept.

Computer101
Community Support Moderator
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now