JavaScript - Form Onfocus Function, Clearing Input Value, Also Clearing User Created Text

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 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???

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'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!

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

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!

Hey everyone,

I've looked around quite a bit and can't seem to find anything but I was wondering if there is some open source software offering a text editor/input field similar to the one used on this forum when submitting a comment or thread?
Where you can click a bold button or Italic button or URL button to structure it?

Thanks

Josh

Hey guys,

I just joined the forums (literally) and just started coding (mainly with CSS and HTML) about 3-4 weeks ago. I'd really like to get into JavaScript to make cool things happen on my website. With that being said, I've come up with a pretty cool idea but am not sure how to go about my problem.

Enough with the chit chat. What I'm trying to do is add text to a user's input. For instance, if they write "Hello", the function should automatically add "World" to the output. I'd ideally like for the output to be searched on Google (think search engine) with the results displayed on a new page.

Thanks in advance for any help!

This should be simple, but I can't quite get it to work without some kind of side-effect. I've checked the forum and there doesn't seem to be anything that directly relates. What I want to do is convert the text that a user is typing to uppercase as they type it. What I have so far:

function convertToUppercase(aControl)
{
var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;";

if (cursorKeys.indexOf(event.keyCode+";") == -1) {
aControl.value = aControl.value.toUpperCase();
}
}

<input onkeyup="convertToUppercase(this)"/>


The problem that I have is that this moves the cursor to the end of the line after every character. If you want to go and add something to the middle of what you've typed, you can type one character and then the cursor jumps to the end.

e.g. inserting "abc" between the "R" and "E" of "FRED" gets you: FRAEDBC

What I need is either:
1) ability to get the cursor/caret position and restore it after I set the uppercase string
-- or --
2) ability to intercept the keystroke in the event and make it uppercase before the browser adds it naturally to the input's value.

Solution should be browser-independent (if at all possible). I'm mostly interested in IE though.

Thanks,
Chris

Yes - I need a script that will validate user input against a text file - exactly like the one in the left sidebar at
http://www.oilpatchfuel.com/Pages/Welcome.aspx
titled "Delivery Area".

Thanks!

I am thinking this should be fairly easy but yet I am not getting far. I want to have a form with a single text imput field for a zip code. Depending on which zip code the user enters will determine which url they will be sent to. If they enter a zip code which is not in the script, they would be sent to a default url.
I am also assuming this can be accomplished with javascript.

Any help is greatly appreciated.

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);"/>

So I am trying to make a form that will eventually take the user to a specified link. It is a form that uses drop down menus. I based this off of someone elses code (with permission ), but it shows everything <= user input. I cannot for the life of me figure out how to make it only show only one of the next options.
here is the JS code:
Code:

<script language="JavaScript">
function ShowMenu(num, menu, max)
        {
                
                for(i = 1999; i <= num; i++){
                     var menu2 = menu + i;
                        document.getElementById(menu2).style.display = 'block';
                }
                var num2 = num;
                num2++;
                while(num2 = max){
                        var menu3 = menu + num2;
                            document.getElementById(menu3).style.display = 'none';
                        num2=num2+1;
                }
        }
</script>

This is only the JS code. I didn't want to waste space with the rest of the code. If you want to see it let me know and I can include that.

I am sure this is rather basic, but my JS knowledge is less than that...It has been some time since undergrad computer science class.
Thanks in advance for any help!