JavaScript - Clearing A 'textarea'

okay. clearing a form. I have a clear button. when I push it, I want all the red text boxes and onblur messages to disappear. anyone have an idea on where i can start?

heres javascript
Code:

function isFormValid() 
{	
	var userF = document.getElementById('FName').value;
	var userL = document.getElementById('LName').value;
	var userPW = document.getElementById('pw').value;
	var userPW2 = document.getElementById('pw2').value;
	var userBDay = document.getElementById('BDay').value;
	var userEmail = document.getElementById('email').value;
	var NameFormat = /^[A-Za-z]{2,12}$/;
	var PWFormat = /^[A-Za-z0-9]{6,12}$]/;
	var BDayFormat = /^(\d{1,2})[\s\.\/-](\d{1,2})[\s\.\/-](\d{4})$/;
	var EmailFormat = /^([\w-]{2,})@([A-z\d][-A-z\d]+)\.[A-z]{2,8}/;
	var retVal = true;
	var errorMsg = "";
	
	if (!NameFormat.test(userF))
		{
		assignErrorClass("FName");
		errorMsg = "First Name is required. 2-12 letters only\n";
		retVal = false;
		}
	if (!NameFormat.test(userL))
		{
		assignErrorClass("LName");
		errorMsg = errorMsg + "Last Name is required. 2-12 letters only\n"; 
		retVal = false;
		}
	if (!PWFormat.test(userPW))
		{
		assignErrorClass("pw");
		errorMsg = errorMsg + "Password is required. 6-12 letters or numbers only.\n";
		retVal = false;
		}
	if (userPW2 == "")
		{
		assignErrorClass("pw2");
		errorMsg = errorMsg + "Please Retype password.\n";
		retVal = false;
		}
	if ((userPW != userPW2) && (userPW2 !== ""))
		{
		assignErrorClass("pw2");
		errorMsg = errorMsg + "Passwords do not match.\n";
		retVal = false;
		}
	if (userBDay == "")
	{
		assignErrorClass("BDay");
		errorMsg = errorMsg + "Please Enter a Birthday.\n";
		retVal = false;
	}
	if ((!BDayFormat.test(userBDay)) && (userBDay !== "")) 
			{
				assignErrorClass("BDay");
				errorMsg = errorMsg + "Incorrect Birthday format\n";
				retVal = false;
			}
	if (badBirthday("BDay") && (userBDay !== "")) {
		assignErrorClass("BDay");
		retVal = false;
		errorMsg = errorMsg + "Invalid Birthday\n";
		}
		
	if (userEmail == "")
		{
		assignErrorClass("email");
		errorMsg = errorMsg + "Please Enter an Email address.\n";
		retVal = false;
		}
	if ((!EmailFormat.test(userEmail)) && (userEmail !== ""))
		{
		assignErrorClass("email");
		errorMsg = errorMsg + "Please Enter a valid Email address.\n";
		retVal = false;
		}
	if (!retVal)
		{
		alert( errorMsg);
		}
	return retVal;
}
         
function assignErrorClass(objName) 
{
	var obj = document.getElementById(objName);
	obj.className = "err";
}
function badBirthday( objName) {
	var obj = document.getElementById(objName);
	var dateStr = obj.value;
	var mn = dateStr.split("/")[0];
	var dy = dateStr.split("/")[1];
	var yr = dateStr.split("/")[2];
	var dateObj = new Date(yr,mn-1,dy);  //JavaScript and PHP number the months 0 to 11.
	if (dateObj.getFullYear() != yr || dateObj.getMonth()+1 != mn || dateObj.getDate() != dy) {
		return true;
	} else {
		return false;
	}
	}
              
function checkFName()
{
	var userF = document.getElementById('FName').value;
	var elementF = document.getElementById('labelFName');
	var NameFormat = /^[A-Za-z]{2,12}$/;
	if (!NameFormat.test(userF))
		{
		elementF.innerHTML = "First Name is required. 2-12 letters only";
		elementF.style.color = "red";
		}
	else
		{
		elementF.innerHTML = "";
		elementF.style.color = "green"; 
		}
}

function checkLName()
{
	var userL = document.getElementById('LName').value;
	var elementL = document.getElementById('labelLName');
	var NameFormat = /^[A-Za-z]{2,12}$/;
	if (!NameFormat.test(userL))
		{
		elementL.innerHTML = "Last Name is required. 2-12 letters only";
		elementL.style.color = "red";
		}
	else
		{
		elementL.innerHTML = "";
		elementL.style.color = "green"; 
		}
}
function checkpw()
{
	var userPW = document.getElementById('pw').value;
	var elementPW = document.getElementById('labelpw');
	var PWFormat = /^[A-z0-9]{6,12}$/;
	if (!PWFormat.test(userPW))
		{
		elementPW.innerHTML = "Password is required. 6-12 letters or numbers only.";
		elementPW.style.color = "red";
		}
	else
		{
		elementPW.innerHTML = "Good Password";
		elementPW.style.color = "green"; 
		}
}
function checkpw2()
{
	var userPW2 = document.getElementById('pw2').value;
	var userPW = document.getElementById('pw').value;
	var elementPW2 = document.getElementById('labelpw2');
	if ((userPW != userPW2) && (userPW2 !== ""))
		{
		elementPW2.innerHTML = "Passwords do not match.";
		elementPW2.style.color = "red";
		}
	else if (userPW2 == "") 
		{
		elementPW2.innerHTML = "Please Retype password.";
		elementPW2.style.color = "red";
		}
	else
		{
		elementPW2.innerHTML = "Passwords Match";
		elementPW2.style.color = "green"; 
		}
}
function checkBDay()
{
	var userBDay = document.getElementById('BDay').value;
	var elementBDay = document.getElementById('labelBDay');
	var BDayFormat = /^(\d{1,2})[\s\.\/-](\d{1,2})[\s\.\/-](\d{4})$/;
	if (userBDay == "")
		{
		elementBDay.innerHTML = "Please enter A Birthday.";
		elementBDay.style.color = "red";
		}
		else if ((!BDayFormat.test(userBDay)) && (userBDay !== "")) 
		{
			elementBDay.innerHTML = "Please enter mm/dd/yyyy format.";
			elementBDay.style.color = "red";
		}
		else if ((badBirthday("BDay")) && (userBDay !== ""))
		{
			elementBDay.innerHTML = "Please enter valid Birthday.";
			elementBDay.style.color = "red";
		}
	else
		{
		elementBDay.innerHTML = "";
		elementBDay.style.color = "green"; 
		}
}
function checkEmail()
{
	var userEmail = document.getElementById('email').value;
	var elementEmail = document.getElementById('labelEmail');
	var EmailFormat = /^([\w-]{2,})@([A-z\d][-A-z\d]+)\.[A-z]{2,8}/;
	if ((!EmailFormat.test(userEmail)) && (userEmail !== ""))
		{
		elementEmail.innerHTML = "Please enter a Valid Email address.";
		elementEmail.style.color = "red";
		}
	else if (userEmail == "") 
		{
		elementEmail.innerHTML = "Please enter an Email address.";
		elementEmail.style.color = "red";
		}
	else
		{
		elementEmail.innerHTML = "";
		elementEmail.style.color = "green"; 
		}
}

heres the html
Code:

<form action="mailto:hummdedum@felloff.com" method="post" name="form" onSubmit="return isFormValid();">

* First Name: <input type="text"  name="FName" id="FName" onblur="checkFName();"/><label id="labelFName"></label><br />
* Last Name: <input type="text" name="LName" id="LName"onblur="checkLName();"/><label id="labelLName"></label><br />



* Password: <input type="password" id="pw" name="Password" onblur="checkpw();"/><label id="labelpw"></label><br />
*Re-type Password: <input type="password" name="2Password" id="pw2" onblur="checkpw2();" /><label id="labelpw2"></label><br />


I am a: <br />
<input type="radio" name="status" value="fresh" /> Freshman<br />
<input type="radio" name="status" value="soph" /> Sophomore<br />
<input type="radio" name="status" value="jr" /> Junior<br />
<input type="radio" name="status" value="sr" /> Senior<br />



I am taking classes in the: <br />
<input type="checkbox" name="semester" value="fall" /> fall time<br />
<input type="checkbox" name="semester" value="spring" /> Spring time <br />



My favorite element is:
	<select name="element" id="element">
    	<option value="">select</option>
		<option value="fire">Fire</option>
		<option value="earth">Earth</option>
		<option value="water">Water</option>
		<option value="air">Air</option>
	</select><br />



*Birthday: mm/dd/yyyy<input type="text" id="BDay" name="Birthday" onblur="checkBDay();"/><label id="labelBDay"></label><br /> 



*E-Mail: <input type="text" id="email" name="Email" onblur="checkEmail();"/><label id="labelEmail"></label><br />


	<input type="submit" value="Submit" />
	<input type="reset" value="Clear" />

</form>

css i guess would be
Code:

.err {
	border: 2px solid #FF0000;}
#errMsg {
	font-size: 110%;
	color: #FF0000;}

super thanks!!!!!!
-pumpkin

I need to learn how to clear form fields when a user clicks on them.

Here is the site in question:

http://www.yourvancouvermortgagebroker.ca/apply

They used to work, but then I changed the field value and now it doesn't work on some of the fields (whichever ones I changed).

Here is a link to the .js file:

http://www.yourvancouvermortgagebroker.ca/js/apply.js

I'm trying to have a textbox clear after it has been filled and submitted.
this is my form look....
Code:

<form action="" name="webForm" id="webForm">
<div id="title0" class="pageTitle">Enter Student Dropping A Course: </div>
<div id="fieldName">Name: <input type="text" id="fName" name="fName" size="40" maxlength="60" /></div>
<div id="button"><input type="button" value="Add Latest Student To Drop A Course" onclick="addRecord()" /></div>
</form>

Sooo...in my javascript i'm coding it like this but for somereason it's not working
Code:

function resetForm() {//clear the value in the txt field
    document.getElementsById("fName").value = "";
    
    }

and i have it called from another function here...
Code:

function addRecord() {
            var old = XMLdoc.getElementsByTagName("studentName")[0];  //Declare var old and set it's value to the elements by tag name
            var clone = old.cloneNode(true);
            removeWhiteSpaceNodes(clone);
            clone.childNodes[0].nodeValue = webForm.elements[0].value; // set clone to value entered by user in text field
            XMLdoc.documentElement.appendChild(clone); //append the clone to the document object
            displayStudents();
            resetForm();

....
any help? ..Much thanks Everyone!

I have a page with a form on it and a button that opens a new window for them to verify the data. What happens is that when the window opens, the form gets cleared out. This is with FireFox (IE has issues too!) Now this code has actually work fine for several years, now all of a sudden it's an issue. Possibly browser update issues? Here's a VERY stripped down version that shows the problem:

Code:

<HTML>
<HEAD>
<TITLE>Test</TITLE>

<script language="JavaScript" type="text/javascript">

function Proc_Reg(frm)
{
   window.open("","","status=1,menubar=1,resizable=1,scrollbars=1,width=900,height=800");
}
</script>
</HEAD>

<BODY>
test
<form name=RegForm >

<TABLE>
<TR><TD><font color = "RED">PLEASE MAKE SURE YOUR BROWSER'S SECURITY SETTINGS ALLOW SCRIPTS TO RUN.</font></TD></TR></TABLE>
<BR><BR>
<font size=7>BCU Festival Registration</font><BR><center>Event Date: September 11, 2011</center>
<HR>
<table>
<tbody>
<tr><td><FONT FACE="BRITANNIC BOLD" size=4>
Name:</font></td><td>
<input title="What is Your Name?" name="FullName" rows="1" size="45" type="text">
</td></tr>
</tbody></table>

</form>

<A HREF="" OnClick="javascript:Proc_Reg(RegForm);">Click</A>

</BODY>
</HTML>

Ideas???

This is some of the script that I have and it works well. The story is that I have a drop down list and depending on the selection a different set of text is displayed below the list.

Code:

	if (Val == "general")
		{
		document.getElementById('Link0').innerHTML="<font size=2><a Href='http://www.web1.com/'>web 1</a>"
		document.getElementById('Link1').innerHTML="<font size=2><a Href='http://www.web2.com/'>web 2</a>"

However when the selection runs this part of the code:-

Code:

	if (Val == "duties")
		{
		document.getElementById('Link0').innerHTML=""
		document.getElementById('Link1').innerHTML="<font size=2><a Href='http://www.web2.com/'>web3</a>"

The "web 3" text is placed under where the 'Link0' text would have been if there had been some. So basically what I need to do is set the 'Link0' text to nothing and have the 'Link1' text sit in its place.

I know I could just put the 'Link1' text in the 'Link0' element but I have other controls on the screen that mean I need to run it as it is.

I hope that is clear, cheers Daniel.

ok, i'm sure you all will laugh at this, but it seems really bizzario to me.

i have two small routines worked out.
routine G gets a value out of the db and brings it back to the browser script.
routine P puts a value into the db from the browser script.
they both run fine.

but.........
you have to turn the browser totally off and restart it after retrieving a value out of the db (?) why? is this some kind of "clear memory" i need to be doing. its like the last value i retrieved thru the server is stuck in memory and keeps coming up, and it won't flush out until i turn the browser off and restart it.

is this a Javascript problem or a PHP problem?

i dont' have a clue, maybe i need to somehow flush the memory in the PHP file after i echo() back the result.? is that normal?

thanks,
Paul

Hi there, this is my first post.

I'm very new to javascript and have been programming a "beer counter" that simply counts +1 into a text object after every click. After I got this to work I copied the code in order to make a clear button / function. I've been having problems, even though the code seems to be identical. This is likely an obvious question, pardon my inexperience.


<html>
<head>
<title>Beer Counter</title></head>
<body><script language="Javascript">

var beers = 0
var output =""

function beer()
{
beers = beers + 1
output = document.getElementById('output')
output.value = beers
}

function clear()
{
beers = 0
output = document.getElementById('output')
output.value = beers
}

</script>

<input type='button' value='Crush' onclick='beer()'; /> Beer count:</input>
<input type='text' id='output' name='output'; /><br/>
<input type='button' value='Clear' onclick='clear()'; />
</body>
</html>

I'm working with datepickers to select a date range for my travel site (so they are a departure date and a return date). There are two datepickers and I can't get the min date on the first calendar set to today, and I also can't figure out how to get the date fields to clear if the user clicks the browsers refresh button - please help!

Here's the javascript code I'm currently trying to run:
$(function() {
var dates = $("#datepicker1, #datepicker2").datepicker({
defaultDate: '',
minDate: '+0m +0w +0d', // this isn't working to set the earliest selectable date to today
maxDate: '+0m +0w +365d', // but oddly enough this one works to make sure users can't select a date farther than a year out
numberOfMonths: 2,
beforeShow: function() {
var other = this.id == "from" ? "#datepicker2" : "#datepicker1";
var option = this.id == "from" ? "maxDate" : "minDate";
var selectedDate = $(other).datepicker('getDate');

$(this).datepicker("option", option, selectedDate);
}
}).change(function(){
var other = this.id == "from" ? "#datepicker2" : "#datepicker1";
if($('#datepicker1').datepicker('getDate') > $('#datepicker2').datepicker('getDate'))
$(other).datepicker('setDate', $(this).datepicker('getDate'));
});
});

// this is the function I wrote to try to clear the fields when browser refresh is clicked but it doesn't do anything
function clearInp() {
document.getElementById('datepicker1').value = "";
document.getElementById('datepicker2').value = "";
}


Here's the corresponding HTML code:
<form method="POST" name="myForm2" class="calendars">
<input id="datepicker1" type="text" name="departure_date" class="dates" size="15" maxlength="25" />
to
<input id="datepicker2" type="text" name="return_date" class="dates" size="15" maxlength="25" />
</form>

Thanks in advance!

Hello all.

Complete newbie to this and to be quite honest, completely out of my depth.

Ok, I have the following set up on my page - the page essentially uses three different search methods to bring back data in a gridview.

1. A cascading drop down list (ddlBuyer, ddlSub, ddlProd) and an associated radio button radBuyer.

2. An autocomplete textbox (tbxProdAC) that sources product information and an associated radio button (radProd)

3. A text box whereby users specify the number of products they wish to see and (txtHowMany) a subsequent sub category radio button list that breaks the products down further (radTopx)

What I would like to do is essentially make the page so that a user can only user one of the above methods and the radio is focused according to what the user first specifies.

For example, if they wish to use the ddl method, they should click ddlBuyer, ddlSub and ddlProd and the focus is placed upon the radBuyer. Along side of this, any information that may have been entered into tbxProdAC or txtHowMany is cleared.

Alternatviely, should a user use the drop down method then wish to use the third method specified above, once a user clicks in txtHowMany, the ddl should revert back to their original values.

I would like to achieve this in the c# code behind and I currently have the following code on my page load event/ I have got to the point where I am going round in circles (mainly because I don't know what I am doing!) so I would appreciate a few pointers.

Code:

ddlProd.Attributes.Add("onchange", "return SetRadioFocus('" + radBuyer.ClientID + "');");
        radTopx.Attributes.Add("onclick", "return SetRadioFocus('" + radTopx.SelectedItem + "');");
        tbxProdAC.Attributes.Add("onclick", "return SetRadioFocus('" + radProd.ClientID + "');");

        ClientScript.RegisterClientScriptBlock(this.GetType(), "MyScript", @"
                function SetRadioFocus(target)
                {
                document.getElementById(target).checked = true;             
                }"
        , true);

If someone can help me, I would be extremely grateful and it would save me from smashing my head further into my desk.

Please excuse my ignorance, brand spanking new to this and feeling more than a little thick.

I type something on the current textarea/input and all the values get removed after I add another field. Is there a solution?


Code:

<script language="Javascript" type="text/javascript">
<!--
//Add more fields dynamically.
function addField(area,field,limit) {
	if(!document.getElementById) return; //Prevent older browsers from getting any further.
	var field_area = document.getElementById(area);
	var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
	//Find the count of the last element of the list. It will be in the format '<field><number>'. If the 
	//		field given in the argument is 'friend_' the last id will be 'friend_4'.
	var last_item = all_inputs.length - 1;
	var last = all_inputs[last_item].id;
	var count = Number(last.split("_")[1]) + 1;
	
	//If the maximum number of elements have been reached, exit the function.
	//		If the given limit is lower than 0, infinite number of fields can be created.
	if(count > limit && limit > 0) return;
 	
	 //Older Method
		
		field_area.innerHTML += "<li><textarea id='steps' name='steps[]' rows='5' cols='40'></textarea><br /><input id='steps_image' name='steps_image[]' /></li>";
	
}
//-->
</script>


<ol id="steps_area"><li>
<textarea id='steps' name='steps[]' rows='5' cols='40'></textarea><br /><input id='steps_image' name='steps_image[]' />
</li>
</ol>

<input type="button" value="Add" onclick="addField('steps_area','',15);"/>

Hello there . Here is my simple code
Quote:
<html>

<head>
<script>
function addText(){
document.getElementById("textarea").value+=document.getElementById("text").value+'\n';
document.getElementById("text").value="";
document.getElementById("text").onblur=document.getElementById("text").value=" Your Message...";

}
</script>



<style>

#textarea{background-color:#F3F3F3;


}

</style>

</head>
<body>

<form>
<TEXTAREA id="textarea" COLS="80" ROWS="20" ></TEXTAREA><br/><br/>
<input type="text" id="text" name="text" value=" Your Message..." onclick="this.value=''" size="96">
<input type="button" value="Send" name="submit" onclick="addText()"> </form>

</body>
</html>


My problem is I dont know what to do iorder to make my send button to push the text entered in the text field from bottom to the top (not from the top to the bottom)

Hi all,

I'm loading external xml and displaying specific tagged elements in a textarea.
It works fine in IE because I can turn the variable object into text with a simple object.text property, but in Firefox (using the serializeToString method), the object appears in my textarea tags and all.

The code looks something like this (this is just a dummy script - imagine the xml is already loaded into the object xmlDoc ):
Code:

function writePage(){
     document.write('<textarea name="inputText">'+myText+'</textarea>');
}

function xmlIsLoaded(){
     if(window.ActiveXObject){  //tests for IE
          myText = xmlDoc.getElementsByTagName("desiredTag")[0].text;
     } else { //tests for FF
          myText = (new XMLSerializer()).serializeToString(xmlDoc.getElementsByTagName("desiredTag")[0]);
     }
     writePage();
}

What am I missing here? I've tried toString, textContent, innerText, childNodes - just about everything I can think of to get just the text w/o the tags from the xml for the FF version.

Any thoughts?

~gyz

I am fairly new at Javascript, but there is something happening I do not understand. Please someone explain it to me and help with a solution.

In the function, I pull data from an URL and I have done this with several different data fields and populate the HTML input, option, and check boxes with no problem with the following method.

Code:

document.getElementById("othertxt").value=strValue;
document.getElementById("radsig").checked=true;
document.getElementById("eventtime").value=strValue;

But for some reason this method for textarea does not work and I know that there is a value in strValue because check it right before the line of code.

Code:

document.getElementById("othertxt").value=strValue;

Is textarea just treated differently? I have searched the internet and seen examples but for some reason I can not find the correct solution.

I'm making this expanabel textarea which works fine, but... If I set a predefined numbers of rows, when start typing it jumps back (schrinks) into 2 rows... How do I avoid this?

Code:

<script>
function checkRows(textArea){

if (navigator.appName.indexOf("Microsoft Internet Explorer") == 0)
{
textArea.style.overflow = 'visible';
return;
}

while (
textArea.rows > 4 && 
textArea.scrollHeight < textArea.offsetHeight
){
textArea.rows--;
}

while (textArea.scrollHeight > textArea.offsetHeight)
{
textArea.rows++;
}


return;
}
</script>

<textarea style="overflow:hidden;" onkeyup="checkRows(this)" rows="4">Some Test Text</textarea>

Thanks in advance:-)

I'm adding text into a text area using document.createTextNode

Code:

document.getElementById('controlQueueDump').appendChild(document.createTextNode(args+';'));

But whenever the user edits the text box, it will never update anything again. I can add as much as I want, but when a user edits it (for example removes the contents), BAM, it is no longer updated.

it's a textarea so it should be appending the child to the value attribute.

Thanks a lot.