Reset Default Form Values

@sakrocksJun 11.2008

Help! I have a php page with a form. The form posts to itself and changes the default values of the various input fields to match what they initially entered in the form. In other words, once the user clicks the submit button the php code sets the default value for the form fields to match what the user entered before clicking the submit button.

What I need to do/would like to do is have a reset button that will clear the “value” attributes for the form input fields thus clearing them so the user can start over.

I ~~[U]~~~~[I]~~think[/I][/U] means requires javascript.

Can anyone help with this?

Thanks in advance.

to post a comment

JavaScript

12 Comments(s) _↴

@LeeUJun 11.2008 — #See if this works (didn't have time to try it):

[CODE]
 <FORM NAME="myForm" onSubmit="document.myForm.reset()">[/CODE]

@mrhooJun 11.2008 — #How about html?

<input type="reset" value="Reset">

</form>

@sakrocksauthorJun 11.2008 — #LeeU -

That did not work and if my limited knowledge of javascript is not failing me that will clear the form when it is submitted. I need the form to be cleared only if/when the user clicks the reset button.

mrhoo -

I already tried that. The problem is that a default html reset button resets the form to its default values. When the form is submitted I set the value attributes for each field to the users entry which in effect makes what the user entered the new default value.

Here is an example.

When the user initially loads the form there is a blank field to enter height. The user enters a height (lets say '16') and clicks the submit button. The height value is then passed back to the same page and, via php, the value for the height field is set to 16.

What I want/need is to be able to clear the 16 and make the field blank again so the user can start over.

Thanks for the suggestions so far!

@mrhooJun 12.2008 — #<input name="resetBtn" type="button" value="Start Over" onclick="reallyreset()">

[CODE]
 function reallyreset(){
 var f= document.forms[0] //or whichever form;
 var A= f.elements, i= 0,L= A.length,tem;
 while(i<L){
 tem= A[i++];
 if(tem.value)tem.value= '';
 }
 }[/CODE]

if some fields should [B]not [/B]have their values changed, make a condition in the loop

@sakrocksauthorJun 12.2008 — #That still didn't work. Let me include some of my code so you can see what I am working with.

//The function is in the head of the page

function reallyreset(){

var f= document.specs[0] //or whichever form;

var A= f.elements, i= 0,L= A.length,tem;

while(i<L){

tem= A[i++];

if(tem.value)tem.value= '';

}

}

...

<form action="cost3.php" method="post" name="specs">

...

<tr>

<td align="left" valign="top">

Pitch?<br />

<input type="hidden" name="processed" value="true" />

<select name="mm">

<option value="34" <?php if ($mm==34){echo ("selected="selected"");} ?>>34mm</option>

<option value="36" <?php if ($mm==36){echo ("selected="selected"");} ?>>36mm</option>

<option value="45" <?php if ($mm==45){echo ("selected="selected"");} ?>>45mm</option>

<option value="63" <?php if ($mm==63){echo ("selected="selected"");} ?>>63mm</option>

<option value="89" <?php if ($mm==89){echo ("selected="selected"");} ?>>89mm</option>

</select>

</td>

</tr>

<tr>

<td align="left">

Height:<br /><input type="text" name="h" <?php echo ("value="".$h."""); ?> />

</td>

</tr>

<tr>

<td align="left">

Width:<br /><input type="text" name="w" <?php echo ("value="".$w."""); ?> />

</td>

</tr>

<tr>

<td align="left">Number of Faces:<br />

<input type="radio" name="f" value="1" <?php if ($f==1){echo ("checked");} ?> /> Single

<input type="radio" name="f" value="2" <?php if ($f==2){echo ("checked");} ?> /> Double

</td>

</tr>

...

<input type="button" value="Clear Form" name="clear" onclick="reallyreset()" style="margin-left:10px;" />[/QUOTE]

Hopefully that will make it easier to help me.

Thanks again for everyones help so far.

@Declan1991Jun 12.2008 — #It'll have to be the defaultValue you reset. I'm not sure how to do it with selects, but try this.

<i>
 </i>function reallyreset(){
 var f= document.getElementsByName("specs")[0]; //or whichever form;
 var A= f.elements?f.elements:f.getElementsByTagName("*"), L= A.length,tem;
 while(i--&gt;=0){
 tem= A[i];
 if(tem.defaultValue)tem.defaultValue= '';
 }
 }

@LeeUJun 12.2008 — #That did not work and if my limited knowledge of javascript is not failing me that will clear the form when it is submitted. I need the form to be cleared only if/when the user clicks the reset button.[/QUOTE]
I misunderstood. I thought you wanted it done automatically after the user submitted the form.

@sakrocksauthorJun 12.2008 — #Still no luck...

There was a problem when I copied and pasted the code for the function into my webpage so I adjusted as best I could. Here is what I put:

function reallyreset(){

var f= document.getElementsByName("specs")[0]; //or whichever form;

var A= f.elements?f.elements:f.getElementsByTagName("*"), L=A.length,tem;

while(i>=0){

tem= A[i];

if(tem.defaultValue)tem.defaultValue= '';

}

}[/QUOTE]

The extra "--" in the while statement created a comment.

It is still not working.

Any other thoughts?

Thanks for everyones patience helping a js newbie like me out!

@Declan1991Jun 12.2008 — #Try:

<i>
 </i>function reallyreset(){
 var f= document.getElementsByName("specs")[0]; //or whichever form;
 var A= f.elements?f.elements:f.getElementsByTagName("*"), L=A.length,tem;
 while((L--)&gt;=0){
 tem= A[L];
 if(tem.defaultValue)tem.defaultValue= '';
 }
 }

It only works for textboxes and text inputs I think though.

@sakrocksauthorJun 12.2008 — #Still no luck.

I did come up with a work around though.

I made the "Reset" button a link back to the page which effectively clears the page because no POST data is sent.

Thanks for all the help.

@sakrocksauthorJun 17.2008 — #I was able to put together a function that clears all the text, radio, and checkbox elements of my form. I am still working on the select elements but I thought I would post this in case someone else is having this problem.

 function realclear() {
   document.form.hiddentextelement.value = "";
   var el, i = 0, oForm = document.form;
   while (el = oForm.elements[i++]){
   if (el.type == 'checkbox') {
   el.checked = false;
   }
   }
   var tel, i=0, oForm = document.form;
   while (tel = oForm.elements[i++]){
   if (tel.type== 'text') {
   tel.value="";
   }
   }
   var rel, i=0, oForm = document.form;
   while (rel = oForm.elements[i++]){
   if (rel.type== 'radio') {
   if (rel.checked == true) {
   rel.checked = false
   }
   }
   }
   }

[/QUOTE]

I trigger the function with an onclick in the clear button.

@Declan1991Jun 17.2008 — #Maybe

function realclear() {
 document.form.hiddentextelement.value = "";
 var el, i = 0, oForm = document.form;
 while (el = oForm.elements[i++]){
 if (el.type == 'checkbox') {
 el.checked = false;
 continue;
 }
 if (el.type== 'text' || (el.nodeName &amp;&amp; el.nodeName.toLowerCase() == "textarea")) {
 el.value="";
 continue;
 }
 if (el.type == 'radio' &amp;&amp; el.checked == true) {
 rel.checked = false
 continue;
 }
 if (el.nodeName &amp;&amp; el.nodeName.toLowerCase() == "select") {
 var els = el.getElementsByTagName("select"), j = els.length;
 while (j--) {
 if (els[j].selected == "selected") {
 els[j].removeAttribute("selected");
 break;
 }
 }
 }
 }
 }

would do the trick?

Also in #JavaScript _↴

Mini-Calendar Blues Getting Windows username using javascript Accordion Panels not funtioning correctly with a certain Doctype

Success!

Help @sakrocks spread the word by sharing this article on Twitter...

Tweet This

Reset Default Form Values

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Reset Default Form Values

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴