[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

How to rest all Form Elements on a Form.

Posted on 2007-12-06
8
Medium Priority
?
328 Views
Last Modified: 2012-06-27
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
Comment
Question by:MayoorPatel
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
8 Comments
 
LVL 13

Expert Comment

by:samic400
ID: 20418704
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
 
LVL 82

Expert Comment

by:hielo
ID: 20420868
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
 
LVL 1

Author Comment

by:MayoorPatel
ID: 20426730
Hielo this does not reset dropdowns only text fields.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 13

Accepted Solution

by:
samic400 earned 1000 total points
ID: 20426805
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
 
LVL 13

Expert Comment

by:Murali Murugesan
ID: 20427067
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
 
LVL 82

Assisted Solution

by:hielo
hielo earned 1000 total points
ID: 20427216
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
 
LVL 1

Expert Comment

by:Computer101
ID: 20953172
Forced accept.

Computer101
Community Support Moderator
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

656 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