0

I'm trying to use javascript with NO Innerhtml. i am very new to javascript and i need a little help completing this form. the code i have so far to create a form page is just below this message.

How do i create a code when focused the text fields should offer a hint to the right of the text field that indicates how the user should input data??

When unfocused, the validateData() function should be called.

also how do i create my 2 survey questions a radio buttons??

<script type="text/javascript">
function assignHandlers()
{
		document.getElementById("fname").onblur = function()
		{

			if (document.forms[0].fname.value !="")
			alert(document.forms[0].fname.value);
							}
						
}

window.onload=assignHandlers;
		</script>

</head>

<body>
<form>

<fieldset><legend>User Info</legend>
<label for="fname">First name</label><input type="text" name="fname" id="fname" />
<br/>



<label for="lname">Last name</label><input type="text" name="lname" /> <br/>
<label for="email">email</label><input type="text" name="email" /> <br/>
<label for="phone">Phone Number</label><input type="text" name="phone" /> <br/>
<label for="url">Sulley Website</label><input type="text" name="url" /> <br/>
</fieldset>

<fieldset><legend> Survey</legend>

<label for="question1">Do you drink alcohol?</label>
<input type="radio" name="question1" value="true" />True
<input type="radio" name="question1" value="false" />False <br/>

<label for="question2"> Do you have a DUI?</label>
<input type="radio" name="question2" value="true" />True
<input type="radio" name="question2" value="false" />False <br/>
</fieldset>

<input type="submit" name="submit" value="Submit!" />
</form>


</body>

Edited by nav33n: Please use [code] tags to wrap your code for better readability.

2
Contributors
1
Reply
2
Views
7 Years
Discussion Span
Last Post by Airshow
1

Dmmajorstudent,

I'm afraid this addresses only part of your problem (help fields) but the javascript should make a good basis for doing form validation too.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Form help fields</title>
<style type="text/css">
fieldset {
	display:block;
	margin:0 0 10px 0;
	padding:10px;
	width:500px;
	border:1px solid #006699;
}
fieldset legend {
	color:#006699;
	font-size:10pt;
	font-weight:bold;
}
fieldset td {
	padding:0px 5px;
	font-size:10pt;
}
fieldset td.label {
	padding:0 5px 0 0;
}
fieldset table.boolean th {
	font-size:10pt;
}
fieldset table.boolean th.active {
	background-color:#006699;
	color:#FFF;
}
fieldset table.boolean th {  }
fieldset table.boolean td {
	border:0px solid #e0e0e0;
	border-right-width:1px;
}
fieldset td.yesNo {
	padding:0px 10px;
}
fieldset td.help {
	color:#FFFFFF;
}
</style>

<script type="text/javascript">
var Help = function(){//Namespace container
	//Private members
	var setColor = function(id, color){
		var h = document.getElementById(id + '_help');
		if(h && color){ h.style.color = color; }
	};
	//Public members
	return {
		init : function() {
			var helpFields = document.getElementsByTagName('input');
			for(var i=0; i<helpFields.length; i++) {
				if(helpFields[i].className.indexOf('hasHelp') > -1) {
					helpFields[i].onfocus = function() { setColor(this.id, '#000'); }
					helpFields[i].onblur =  function() { setColor(this.id, '#FFF'); }
				}
			}
		}
	};
}();

window.onload = function(){
	Help.init();
}

</script>

</head>

<body>
<form>

<fieldset><legend>User Info</legend>
<table>
<tr>
<td class="label">First name</td>
<td><input class="hasHelp" id="f1_q1" type="text" name="fname" id="fname" /></td>
<td class="help" id="f1_q1_help">Help for fieldset_1 question_1</td>
</tr><tr>
<td class="label">Last name</td>
<td><input class="hasHelp" id="f1_q2" type="text" name="lname" id="lname" /></td>
<td class="help" id="f1_q2_help">Help for fieldset_1 question_2</td>
</tr><tr>
<td class="label">Email</td>
<td><input class="hasHelp" id="f1_q3" type="text" name="email" id="email" /></td>
<td class="help" id="f1_q3_help">Help for fieldset_1 question_3</td>
</tr><tr>
<td class="label">Phone Number</td>
<td><input class="hasHelp" id="f1_q4" type="text" name="phone" id="phone" /></td>
<td class="help" id="f1_q4_help">Help for fieldset_1 question_4</td>
</tr><tr>
<td class="label">Sulley Website</td>
<td><input class="hasHelp" id="f1_q5" type="text" name="url" id="url" /></td>
<td class="help" id="f1_q5_help">Help for fieldset_1 question_5</td>
</tr>
</table>
</fieldset>

<fieldset><legend> Survey</legend>
<table class="boolean" xborder cellspacing="1">
<tr><th>&nbsp;</th><th class="active">Yes</th><th class="active">No</th></tr>
<tr>
<td class="label"><label for="question1">Do you drink alcohol?</label></td>
<td class="yesNo"><input type="radio" name="question1" id="q1_1" value="true" /></td>
<td class="yesNo"><input type="radio" name="question1" id="q1_2" value="false" /></td>
</tr><tr>
<td class="label"><label for="question2"> Do you have a DUI?</label></td>
<td class="yesNo"><input type="radio" name="question2" id="q2_1" value="true" /></td>
<td class="yesNo"><input type="radio" name="question2" id="q2_2" value="false" /></td>
</tr></table>
</fieldset>

<input type="submit" name="submit" value="Submit!" />
</form>
</body> 
</html>

NOTES:

  • Each form field that has associated help is given class="hasHelp"
  • Each help cell has the same id as its corresponding form field with "_help" appended.

The code is not the simplest because it is in a "namespace" wrapper with private and public members. This is a good way to organise javascript as it keeps the global namespace nice and clean - ultimately you can program everything with just ONE global member.

Airshow

Edited by Airshow: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.