Forum Moderators: open

Message Too Old, No Replies

Reset Button

         

panday

3:16 pm on Jun 7, 2005 (gmt 0)

10+ Year Member



Hi Guys

If I enter information into a form from a database like in a <textarea> or even a textfield, I notice that the normal reset button does not clear the form when I hit it

Is there a method to work around this.

rocknbil

9:02 pm on Jun 7, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



This is because the reset button is not a CLEAR button. Reset sets the form to the initial state, and if you're loading data into it - that's it's initial state.

If you must do this, adda CLEAR FORM button and cycle through the form elements:

<html><head><title>Clearing Form</title></head>
<body>

<form>
<input type="text" name="textfield" value="Loaded Value"><br>
<select name="selectfield">
<option value="">select</option>
<option value="one">one</option>
<option value="two" selected>two</option>
<option value="three">three</option>
</select> <br>
<input type="radio" name="color" value="red"> Red
<input type="radio" name="color" value="green" checked> Green
<input type="radio" name="color" value="blue"> Blue <br>
<textarea name="textareafield" rows="4" cols="35">
Change some values and hit reset.
Watch me magically reappear.
Do the same and hit clear.
</textarea><br>
<input type="reset" value="Reset">
<input type="button" onclick="clearForm(this.form);" Value="Clear">
</form>
<script type="text/javascript">

function clearForm(form) {
for (i=0;i<form.elements.length;i++) {
var element = form.elements[i];
if ((element.type == 'text') ¦¦ (element.type == 'textarea') ¦¦ (element.type == 'file')) { element.value = ''; }
else if (element.type == 'select-one') { element.selectedIndex = 0; }
else if (element.type == 'radio') {
var elementName = element.name;
var radio = eval('form.' + elementName);
for (r=0;r<radio.length;r++) {
if (r == 0) { eval('form.'+elementName+'['+r+'].checked=true'); }
else { eval('form.'+elementName+'['+r+'].checked=false'); }
}
}
}
}
</script>
</body>
</html>

In the above, the broken vertical lines are the single pipe character, or you can use or. Just a habit.

Perhaps master tedster can share how I can do this without using the damnable eval incorrectly. :-)