How to reset all form fields when reloading/refreshing page?

impfut · December 3, 2004, 2:38pm

Hi Everyone.
This is my first post on this forum. On first impression it seems to be a great resource with lots of knowledgeable folk but we will see

Anyway, my problem is…
I am using a JavaScript form which acts as an order form. The problem with this script is that if you select any of the check boxes and then click your browsers “refresh page” (not reset) button it will reset the price total on reload but will not clear the ticked boxes.

Please view the form at: http://www.improvingfutures.co.uk/Shopping/shopping4.htm

Basically all I need is a method to reset all form fields when the user reloads the page (clicking browser refresh)

I would be extremely grateful if someone could provide a solution.

Many thanks
Dave.

reminder · December 3, 2004, 2:40pm

wellcome to sitepoint!!!
for textfields…


function clearInp() {
document.getElementsByTagName("input").value = "";
}

for checkboxes…


function clearChk() {
for(var i = 0; i < document.myForm.myCheckboxes.lenght; i++) {
document.myForm.myCheckboxes.checked = false;
}
}

be sure that your checkboxes have the same name!
then call the function with body onLoad
cheers

impfut · December 3, 2004, 2:43pm

WOW!
Rapid response.

I will try it now.

Thank you so much Octopus

impfut · December 3, 2004, 2:54pm

heres is a snippet for one of the check boxes, could you tell me how I change the code provided to work with this? Cheers

Mail-Lite Padded Envelopes £12.39
<input type=“checkbox” name=“Envelopes” value=12.39 onclick=“this.form.total.value=CheckChoice(this);”>

reminder · December 3, 2004, 2:59pm


function clearChk() {
for(var i = 0; i < document.YourFormName.Envelopes.lenght; i++) {
document.YourFormName.Envelopes.checked = false;
}
}

be sure that all checkboxes have the same name
cheers

impfut · December 3, 2004, 3:07pm

I’m Really sorry but I can’t seem to work this 1 out.
If I am taking up too much time I will understand if you can’t offer further assistance.

Below is a complete copy of the code.

Any help would be fantastic. Cheers!

</style>
<SCRIPT LANGUAGE=“JavaScript”>
function clearChk() {
for(var i = 0; i < document.myform.Envelopes.length; i++) {
document.myform.Envelopes.checked = false;
}
}
</script>
<SCRIPT LANGUAGE=“JavaScript”>

<!-- Begin
function CheckChoice(whichbox)
{
with (whichbox.form)
{
if (whichbox.type == “radio”)
{
hiddentotal.value = eval(hiddentotal.value) - eval(hiddenpriorradio.value);
hiddenpriorradio.value = eval(whichbox.price);
hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.price);
}
else
{
if (whichbox.checked == false)
{ hiddentotal.value = eval(hiddentotal.value) - eval(whichbox.value); }
else { hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.value); }
}

		if (hiddentotal.value &lt; 0)
			{
			InitForm();
			}

		return(formatCurrency(hiddentotal.value));
	}
}

function formatCurrency(num)
{
	num = num.toString().replace(/\\£|\\,/g,'');
	if(isNaN(num))
	   num = "0";
	sign = (num == (num = Math.abs(num)));
	num = Math.floor(num*100+0.50000000001);
	cents = num%100;
	num = Math.floor(num/100).toString();
	if(cents&lt;10)
	    cents = "0" + cents;
	for (var i = 0; i &lt; Math.floor((num.length-(1+i))/3); i++)
	    num = num.substring(0,num.length-(4*i+3))+','+
	          num.substring(num.length-(4*i+3));
    return (((sign)?'':'-') + '£' + num + '.' + cents);
}

function InitForm()
	{
	document.myform.total.value='£0';
	document.myform.hiddentotal.value=0;
	document.myform.hiddenpriorradio.value=0;
	document.myform2.total.value='£0';
	document.myform2.hiddentotal.value=0;
	document.myform2.hiddenpriorradio.value=0;
	document.myform2.hiddenpriorradio.value=0;

	for (xx=0; xx &lt; document.myform.elements.length; xx++)
	{
	   if (document.myform.elements[xx].type == 'checkbox' | document.myform.elements[xx].type == 'radio')
		{
		document.myform.elements[xx].checked = false;
		}
	}
	for (xx=0; xx &lt; document.myform2.elements.length; xx++)
	{
	   if (document.myform2.elements[xx].type == 'checkbox' | document.myform2.elements[xx].type == 'radio')
		{
		document.myform2.elements[xx].checked = false;
		}
	}

}

// End –>
</script>

</HEAD>
<BODY onload=“InitForm();clearChk()” onreset=“InitForm();”>

<table width=“363” border=“0” cellpadding=“0” cellspacing=“0” class=“web_main”>
<!–DWLayoutTable–>
<tr>
<td width=“8” height=“278”> </td>
<td width=“355” valign=“top”><form method=“POST” name=“myform” class=“supplyform”>
<input type=“Hidden” name=“subject” value=“Ebay Club: Supplies Order”>
<input type=“Hidden” name=“recipient” value="support@improvingfutures.co.uk">
<input type=“Hidden” name=“redirect” value=“http://www.improvingfutures.co.uk/ecm/order_ty.htm”>
<span class=“web_supplyform”> AirCap Bubble Wrap £15.25
<input type=“checkbox” name=“Steak” value=15.25 onclick=“this.form.total.value=CheckChoice(this);”>
<br>
Mail-Lite Padded Envelopes £12.39
<input type=“checkbox” name=“Envelopes” value=12.39 onclick=“this.form.total.value=CheckChoice(this);”>
<br>
Pure Kraft Wrapping Paper £18.75
<input type=“checkbox” name=“Sushi” value=18.75 onclick=“this.form.total.value=CheckChoice(this);”>
<br>
<br>
Additional options: <br>
None, thanks
<input type=“radio” name=“Sauce” value=none price=0.00
onclick=“this.form.total.value=CheckChoice(this);”>
Field £10.99
<input type=“radio” name=“Sauce” value=duck price=10.99
onclick=“this.form.total.value=CheckChoice(this);”>
Field £5.00
<input type=“radio” name=“Sauce” value=ginger price=5.00
onclick=“this.form.total.value=CheckChoice(this);”>
Field £1.50
<input type=“radio” name=“Sauce” value=hot price=1.50
onclick=“this.form.total.value=CheckChoice(this);”>
<br>
<input type=“hidden” name=“hiddentotal” value=0>
<input type=“hidden” name=“hiddenpriorradio” value=0>
</span> <span class=“web_heading”>Your total is:
<input name=“total” type=“text” onFocus=“this.blur();” size=“5” readonly>
<input type=“image” class=“submit” src=“buynow.gif” width=“96” height=“26” border=“0” name=“submit”>
</span> </form>

reminder · December 3, 2004, 3:15pm

then use names separately like…


function clearChk() {
if(document.getElementById) {
document.myForm.Envelopes.checked = false;
document.myForm.Sushi.checked = false;
document.myForm.Sauce.checked = false;
// and so on....
}
}

impfut · December 3, 2004, 3:34pm

OK It’s working!!! You are a star!

What do I need to change to get the radio buttons to do the same thing?

Cheers

reminder · December 3, 2004, 3:41pm


function clearChk() {
if(document.getElementById) {
document.myForm.Envelopes.checked = false;
document.myForm.Sushi.checked = false;
for (var i = 0; i < document.myForm.Souce.lenght; i++) {
document.myForm.Sauce.checked = false;
}
}
}

cheers

jimfraser · December 3, 2004, 3:42pm

2 things:

your resetForms function has a syntax error (there’s a “b” where there shouldn’t “b”)
you need to use double vertical bars to do a logical OR in initForm, ie:
if (document.myform.elements[xx].type == ‘checkbox’ || document.myform.elements[xx].type == ‘radio’)

impfut · December 3, 2004, 3:43pm

I added:

document.myform.Sauce.checked = false;

Which relates to the radio button names but it isn’t working?

impfut · December 3, 2004, 3:49pm

Thanks Jim. Will update the code adding double verticals.

Where is the “b”? I can’t find it

jimfraser · December 3, 2004, 4:09pm

function resetForms() {
for (i=0; i b< document.forms.length; i++) {
document.forms[i].reset();
}
}

impfut · December 3, 2004, 4:11pm

reminder, I still can’t get the radio buttons to reset.
Script

function clearChk() {
if(document.getElementById) {
document.myform.Envelopes.checked = false;
document.myform.Sushi.checked = false;
document.myform.Steak.checked = false;
document.myform.Sauce.checked = false;
}
}

Form Snippet For Radio button(s)

    Field &pound;10.99
    &lt;input type="radio" name="Sauce" value=duck   price=10.99
	onclick="this.form.total.value=CheckChoice(this);"&gt;

Sorry if I am being a pain. You are a true gent!

Cheers

reminder · December 3, 2004, 4:13pm

jim…
where u see this function?

reminder · December 3, 2004, 4:13pm

look better at the previous post
cheers

impfut · December 3, 2004, 4:26pm

reminder:
After changing the script too:

It Still doesn’t reset the radio buttons and now will not reset the price

I also can’t find the section Jim is seeing

impfut · December 3, 2004, 4:56pm

I’m pulling my hair out here. Can’t get the damn radio’s to reset. Tried lots of things but no Joy.

reminder · December 3, 2004, 4:58pm

u cant do this…
value=duck price=10.99

reminder · December 3, 2004, 5:08pm

try this…


function clearForm() {
document.myform.reset();
}

cheers