IT Community - Software Programming, Web Development and Technical Support

How can I reset the value of form fields if the page is revisted?

This is a discussion on How can I reset the value of form fields if the page is revisted? within the HTML, CSS and Javascript Coding Techniques forums, part of the Web Development category; Hi all... How can I reset the value of form fields if the page is revisted? Thanks......


Go Back   IT Community - Software Programming, Web Development and Technical Support > Web Development > HTML, CSS and Javascript Coding Techniques

Reload this Page How can I reset the value of form fields if the page is revisted?

Register FAQ Members List Calendar Mark Forums Read

Reply
 
LinkBack (1) Thread Tools Display Modes
  1 links from elsewhere to this Post. Click to view. #1 (permalink)  
Old 11-01-2007, 11:41 PM
itbarota itbarota is offline
D-Web Architect
  
Join Date: Jun 2007
Posts: 547
itbarota is on a distinguished road
Default How can I reset the value of form fields if the page is revisted?
Hi all...


How can I reset the value of form fields if the page is revisted?


Thanks...
Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Sponsored Links
  #2 (permalink)  
Old 11-01-2007, 11:58 PM
Pvinothkumar Pvinothkumar is offline
D-Web Analyst
  
Join Date: Sep 2007
Posts: 237
Pvinothkumar is on a distinguished road
Default Re: How can I reset the value of form fields if the page is revisted?
Hi all...


Use HTML to provide a default value:

<FORM NAME="myForm">
<INPUT TYPE="TEXT" VALUE="">
</FORM>

<SCRIPT LANGUAGE="JavaScript">
document.myForm.reset();
</SCRIPT>


If that doesn't work then:

<FORM NAME="myForm">
<INPUT NAME="myField" TYPE="TEXT">
</FORM>

<SCRIPT LANGUAGE="JavaScript">
document.myForm.myField.value = '';
</SCRIPT>

Thanks...
Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #3 (permalink)  
Old 12-05-2007, 04:48 AM
kingmaker kingmaker is offline
D-Web Genius
  
Join Date: Jun 2007
Posts: 882
kingmaker is on a distinguished road
Send a message via Yahoo to kingmaker
Smile Re: How can I reset the value of form fields if the page is revisted?
<html>
<head>
<script Language="JavaScript">
<!--
function Form1_Validator(theForm)
{

var alertsay = ""; // define for long lines
// alertsay is not necessary for your code,
// but I need to break my lines in multiple lines
// so the code won't extend off the edge of the page

// check to see if the field is blank
if (theForm.Alias.value == "")
{
alert("You must enter an alias.");
theForm.Alias.focus();
return (false);
}

// require at least 3 characters be entered
if (theForm.Alias.value.length < 3)
{
alert("Please enter at least 3 characters in the \"Alias\" field.");
theForm.Alias.focus();
return (false);
}

// allow ONLY alphanumeric keys, no symbols or punctuation
// this can be altered for any "checkOK" string you desire
var checkOK = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvw xyz0123456789";
var checkStr = theForm.Alias.value;
var allValid = true;
for (i = 0; i < checkStr.length; i++)
{
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length)
{
allValid = false;
break;
}
}
if (!allValid)
{
alert("Please enter only letter and numeric characters in the \"Alias\" field.");
theForm.Alias.focus();
return (false);
}

// require at least 5 characters in the password field
if (theForm.Password.value.length < 5)
{
alert("Please enter at least 5 characters in the \"Password\" field.");
theForm.Password.focus();
return (false);
}

// check if both password fields are the same
if (theForm.Password.value != theForm.Password2.value)
{
alert("The two passwords are not the same.");
theForm.Password2.focus();
return (false);
}

// allow only 150 characters maximum in the comment field
if (theForm.comment.value.length > 150)
{
alert("Please enter at most 150 characters in the comment field.");
theForm.comment.focus();
return (false);
}

// check if no drop down has been selected
if (theForm.sex.selectedIndex < 0)
{
alert("Please select one of the \"Gender\" options.");
theForm.sex.focus();
return (false);
}

// check if the first drop down is selected, if so, invalid selection
if (theForm.sex.selectedIndex == 0)
{
alert("The first \"Gender\" option is not a valid selection.");
theForm.sex.focus();
return (false);
}

// check if no drop down or first drop down is selected, if so, invalid selection
if (theForm.date_month.selectedIndex <= 0)
{
alert("Please select a month.");
theForm.date_month.focus();
return (false);
}

// check if no drop down or first drop down is selected, if so, invalid selection
if (theForm.date_day.selectedIndex <= 0)
{
alert("Please select a day.");
theForm.date_day.focus();
return (false);
}

// check if no drop down or first drop down is selected, if so, invalid selection
if (theForm.date_year.selectedIndex <= 0)
{
alert("Please select a year.");
theForm.date_year.focus();
return (false);
}

// check if email field is blank
if (theForm.Email.value == "")
{
alert("Please enter a value for the \"Email\" field.");
theForm.Email.focus();
return (false);
}


// test if valid email address, must have @ and .
var checkEmail = "@.";
var checkStr = theForm.Email.value;
var EmailValid = false;
var EmailAt = false;
var EmailPeriod = false;
for (i = 0; i < checkStr.length; i++)
{
ch = checkStr.charAt(i);
for (j = 0; j < checkEmail.length; j++)
{
if (ch == checkEmail.charAt(j) && ch == "@")
EmailAt = true;
if (ch == checkEmail.charAt(j) && ch == ".")
EmailPeriod = true;
if (EmailAt && EmailPeriod)
break;
if (j == checkEmail.length)
break;
}
// if both the @ and . were in the string
if (EmailAt && EmailPeriod)
{
EmailValid = true
break;
}
}
if (!EmailValid)
{
alert("The \"email\" field must contain an \"@\" and a \".\".");
theForm.Email.focus();
return (false);
}


// check if numbers field is blank
if (theForm.numbers.value == "")
{
alert("Please enter a value for the \"numbers\" field.");
theForm.numbers.focus();
return (false);
}

// only allow numbers to be entered
var checkOK = "0123456789";
var checkStr = theForm.numbers.value;
var allValid = true;
var allNum = "";
for (i = 0; i < checkStr.length; i++)
{
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length)
{
allValid = false;
break;
}
if (ch != ",")
allNum += ch;
}
if (!allValid)
{
alert("Please enter only digit characters in the \"numbers\" field.");
theForm.numbers.focus();
return (false);
}

// require at least one radio button be selected
var radioSelected = false;
for (i = 0; i < theForm.fruit.length; i++)
{
if (theForm.fruit[i].checked)
radioSelected = true;
}
if (!radioSelected)
{
alert("Please select one of the \"Fruit\" options.");
return (false);
}

// check if no drop down or first drop down is selected, if so, invalid selection
if (theForm.rangefrom.selectedIndex <= 0)
{
alert("Please select a valid number in the range \"From\" field.");
theForm.rangefrom.focus();
return (false);
}

// check if no drop down or first drop down is selected, if so, invalid selection
if (theForm.rangeto.selectedIndex <= 0)
{
alert("Please select a valid number in the range \"To\" field.");
theForm.rangeto.focus();
return (false);
}

// require that the To Field be greater than or equal to the From Field
var chkVal = theForm.rangeto.value;
var chkVal2 = theForm.rangefrom.value;
if (chkVal != "" && !(chkVal >= chkVal2))
{
alert("The \"To\" value must be greater than or equal to (>=) the \"From\" value.");
theForm.rangeto.focus();
return (false);
}

// check if more than 5 options are selected
// check if less than 1 options are selected
var numSelected = 0;
var i;
for (i = 0; i < theForm.province.length; i++)
{
if (theForm.province.options[i].selected)
numSelected++;
}
if (numSelected > 5)
{
alert("Please select at most 5 of the \"province\" options.");
theForm.province.focus();
return (false);
}
if (numSelected < 1)
{
alert("Please select at least 1 of the \"province\" options.");
theForm.province.focus();
return (false);
}

// require a value be entered in the field
if (theForm.NumberText.value == "")
{
alert("Please enter a value for the \"NumberText\" field.");
theForm.NumberText.focus();
return (false);
}

// require that at least one character be entered
if (theForm.NumberText.value.length < 1)
{
alert("Please enter at least 1 characters in the \"NumberText\" field.");
theForm.NumberText.focus();
return (false);
}

// don't allow more than 5 characters be entered
if (theForm.NumberText.value.length > 5)
{
alertsay = "Please enter at most 5 characters in "
alertsay = alertsay + "the \"NumberText\" field, including comma."
alert(alertsay);
theForm.NumberText.focus();
return (false);
}

// only allow 0-9, hyphen and comma be entered
var checkOK = "0123456789-,";
var checkStr = theForm.NumberText.value;
var allValid = true;
var decPoints = 0;
var allNum = "";
for (i = 0; i < checkStr.length; i++)
{
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length)
{
allValid = false;
break;
}
if (ch != ",")
allNum += ch;
}
if (!allValid)
{
alert("Please enter only digit characters in the \"NumberText\" field.");
theForm.NumberText.focus();
return (false);
}

// require a minimum of 9 and a maximum of 5000
// allow 5,000 (with comma)
var chkVal = allNum;
var prsVal = parseInt(allNum);
if (chkVal != "" && !(prsVal >= "9" && prsVal <= "5000"))
{
alertsay = "Please enter a value greater than or "
alertsay = alertsay + "equal to \"9\" and less than or "
alertsay = alertsay + "equal to \"5000\" in the \"NumberText\" field."
alert(alertsay);
theForm.NumberText.focus();
return (false);
}

// alert if the box is NOT checked
if (!theForm.checkbox1.checked)
{
alertsay = "Just reminding you that if you wish "
alertsay = alertsay + "to have our Super Duper option, "
alertsay = alertsay + "you must check the box!"
alert(alertsay);
}

// require that at least one checkbox be checked
var checkSelected = false;
for (i = 0; i < theForm.checkbox2.length; i++)
{
if (theForm.checkbox2[i].checked)
checkSelected = true;
}
if (!checkSelected)
{
alert("Please select at least one of the \"Test Checkbox\" options.");
return (false);
}

// only allow up to 2 checkboxes be checked
var checkCounter = 0;
for (i = 0; i < theForm.checkbox2.length; i++)
{
if (theForm.checkbox2[i].checked)
checkCounter = checkCounter + 1;
}
if (checkCounter > 2)
{
alert("Please select only one or two of the \"Test Checkbox\" options.");
return (false);
}

// because this is a sample page, don't allow to exit to the post action
// comes in handy when you are testing the form validations and don't
// wish to exit the page
alertsay = "All Validations have succeeded. "
alertsay = alertsay + "This is just a test page. There is no submission page."
alert(alertsay);
return (false);
// replace the above with return(true); if you have a valid form to submit to
}
//--></script>
</head>
<body>
<form method="POST" onsubmit="return Form1_Validator(this)" name="Form1">
<input type="submit" name="Submit" value="Submit"><p>

Alias:
<input type="text" size="15" maxlength="15" name="Alias"><br>
3 checks:
Not blank, at least 3 characters, only alphanumeric characters allowed.<p>

Password:
<input type="password" size="10" maxlength="10" name="Password">

Verify Password:
<input type="password" size="10" maxlength="10" name="Password2"><br>
2 checks: Require at least 5 characters in the first password field.
Check if both password field values are the same.<p>

Comment: (Please enter 150 characters maximum.)<br>
<textarea name="comment" rows="4" cols="50" wrap="virtual">
</textarea><br>

Gender:
<select name="sex" size="1">
<option>Select a Gender</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select><br>
2 checks: Check that at least one drop down has been selected.
The first drop down is an invalid selection.<p>

Date Month:
<select NAME="date_month">
<option VALUE="0">
<option VALUE="1">1
<option VALUE="2">2
<option VALUE="3">3
<option VALUE="4">4
<option VALUE="5">5
<option VALUE="6">6
<option VALUE="7">7
<option VALUE="8">8
<option VALUE="9">9
<option VALUE="10">10
<option VALUE="11">11
<option VALUE="12">12
</select>

Day:
<select NAME="date_day">
<option VALUE="0">
<option VALUE="1">1
<option VALUE="2">2
<option VALUE="3">3
<option VALUE="4">4
<option VALUE="5">5
<option VALUE="6">6
<option VALUE="7">7
<option VALUE="8">8
<option VALUE="9">9
<option VALUE="10">10
<option VALUE="11">11
<option VALUE="12">12
<option VALUE="13">13
<option VALUE="14">14
<option VALUE="15">15
<option VALUE="16">16
<option VALUE="17">17
<option VALUE="18">18
<option VALUE="19">19
<option VALUE="20">20
<option VALUE="21">21
<option VALUE="22">22
<option VALUE="23">23
<option VALUE="24">24
<option VALUE="25">25
<option VALUE="26">26
<option VALUE="27">27
<option VALUE="28">28
<option VALUE="29">29
<option VALUE="30">30
<option VALUE="31">31
</select>

Year:
<select NAME="date_year">
<option VALUE="0">
<option VALUE="2000">2000
<option VALUE="1999">1999
<option VALUE="1998">1998
<option VALUE="1997">1997
<option VALUE="1996">1996
<option VALUE="1995">1995
<option VALUE="1994">1994
<option VALUE="1993">1993
<option VALUE="1992">1992
<option VALUE="1991">1991
<option VALUE="1990">1990
</select>
<br>
2 checks: Check that at least one drop down has been selected.
The first drop down is an invalid selection.<p>

Email:
<input type="text" size="60" name="Email" value><br>
2 checks: Can't be blank. A valid email address must contain an "@"
and a "." in the address.<p>

<input type="submit" name="Submit" value="Submit"> <p>

Numbers:</strong>
<input type="text" size="3" maxlength="3" name="numbers"><br>
2 checks: Can't be blank. Only numbers 0-9 accepted.<p>

Fruit<br>
<input type="radio" name="fruit" value="A"> A. Apples<br>
<input type="radio" name="fruit" value="B"> B. Oranges<br>
<input type="radio" name="fruit" value="C"> C. Pears<br>
<input type="radio" name="fruit" value="D"> D. Lemons<br>
1 check: At least one radio button must be selected.<p>
<br>

Range From:
<select NAME="rangefrom">
<option VALUE="0" selected>
<option VALUE="1">1
<option VALUE="2">2
<option VALUE="3">3
<option VALUE="4">4
<option VALUE="5">5
<option VALUE="6">6
<option VALUE="7">7
<option VALUE="8">8
<option VALUE="9">9
</select>

To:
<select NAME="rangeto">
<option VALUE="0" selected>
<option VALUE="1">1
<option VALUE="2">2
<option VALUE="3">3
<option VALUE="4">4
<option VALUE="5">5
<option VALUE="6">6
<option VALUE="7">7
<option VALUE="8">8
<option VALUE="9">9
</select><br>
3 checks: Must select at least one option from both the From and the To fields.
The FROM value must be less than or equal to the TO value.<p>

Select 1-5 Provinces: (0 or more than 5 not allowed)<br>
<select NAME="province" size="5" MULTIPLE>
<option value="AB">
Alberta, Canada
</option>
<option value="BC">
British Columbia, Canada
</option>
<option value="MB">
Manitoba, Canada
</option>
<option value="NB">
New Brunswick, Canada
</option>
<option value="NF">
Newfoundland, Canada
</option>
<option value="NS">
Nova Scotia, Canada
</option>
<option value="ON">
Ontario, Canada
</option>
<option value="PE">
Prince Edward Island, Canada
</option>
<option value="PQ">
Quebec, Canada
</option>
<option value="SK">
Saskatchewan, Canada
</option>
<option value="YT">
Yukon - N.W.T., Canada
</option>
</select>
<br>2 checks: At least 1 option must be selected.
No more than 5 options may be selected.
<p>
Number between 9 and 5000. Accepts commas:
Enter a number: <input type="text" size="5" maxlength="5" name="NumberText"><br>
5 checks: Cannot be blank. Must enter at least one character.
Can't enter more than 5 characters, including comma.
Must be between 9 and 5000. Accepts numbers, commas and hyphens,
so allows up to 5 characters for text field maxlength.<p>

Check Box: <input type="checkbox" name="checkbox1" value="Y"><br>
1 check: Reminds the user they have not checked the box.
Does not fail the validation however.<p>

Test Boxes: Check at least 1. No more than 2.
<input type="checkbox" name="checkbox2" value="1">Test1
<input type="checkbox" name="checkbox2" value="2">Test2
<input type="checkbox" name="checkbox2" value="3">Test3 <br>
2 checks: Requires at least one of the 3 checkboxes be selected.
Only allows a maximum of 2 boxes to be selected.<p>
<p>

<input type="submit" name="Submit" value="Submit">
<input type="reset" name="Reset" value="Reset"><p>
</form>
</body>
</html>
__________________
The KINGMAKER
Makes Every Thing Possible

Stuffs (My Blog)
Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Reply

« Previous Thread | Next Thread »

Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

LinkBacks (?)
LinkBack to this Thread: http://www.discussweb.com/html-css-javascript-coding-techniques/4355-how-can-i-reset-value-form-fields-if-page-revisted.html
Posted By For Type Date
DiscussWeb IT Community - Technical Support and Technology Discussions This thread Refback 12-05-2007 04:55 AM

Similar Threads
Thread Thread Starter Forum Replies Last Post
How can I disable form fields? GDevakii HTML, CSS and Javascript Coding Techniques 7 08-04-2008 07:04 PM
popup date selector return dates to different form fields. itbarota HTML, CSS and Javascript Coding Techniques 3 01-08-2008 10:19 PM
How do I use my own graphic button to reset all the text fields in a form? Pvinothkumar HTML, CSS and Javascript Coding Techniques 1 11-02-2007 12:02 AM
Appearance of Form Fields. itbarota HTML, CSS and Javascript Coding Techniques 13 10-05-2007 08:59 AM
How do I submit a form or a part of a form without a page refresh in ASP.Net using C# mobilegeek ASP and ASP.NET Programming 1 07-23-2007 10:38 PM


All times are GMT -7. The time now is 10:14 AM.

Contact Us - IT Community - Archive - Top

Copyright ©2004 - 2007, DiscussWeb. All Rights Reserved.

SEO by vBSEO 3.0.0