Hi friends,
I have a little difficulty accessing a textbox value from a function.
Here's the code:

<HTML>
	<SCRIPT language = javascript>
		function getdata(f){
		var myArray = new Array()
		   for(var i = 0; i < 4; i++){//gets data
			myArray[i] = f.itemboxes[i].value
		   }

		   for(var i = 0; i < 4; i++){//displays data
			document.writeln( myArray[i] + "<br>") 
		   }

		   var sum = 0	
		   for(var i = 0; i < 4; i++){//adds data
			sum = sum + eval(myArray[i])
		   }
			document.writeln("The total number of items : " + sum ) 
		}

		function validatedata(f){
		  
		  var pass_str =  f.passbox.value
		  document.writeln("Your pass is : " + pass_str)
		 
		  if(pass_str.length < 5 || pass_str.length > 8)
			alert("Inappropriate length")

  		  var name_str = f.namebox.value
		  document.writeln("Your name is : " + name_str) /*This doesnt    display the name!!! */

	}
	</SCRIPT>

<body>
<form>
<center>
	<TABLE>
        item 1: <input type = text name = itemboxes value = ""> <br>
	item 2: <input type = text name = itemboxes value = ""> <br>
	item 3: <input type = text name = itemboxes value = ""> <br> 
	item 4: <input type = text name = itemboxes value = ""> <br>

	password: <input type = text name = passbox value = "">	<br>
	name : <input type = text name = namebox value = "">	<br></br>

	<input type = button name = OK button value = "CLICK ME!" onclick = validatedata(this.form)>	
	</TABLE>
</center>
</form>
</body>
</HTML>

I am calling the validatedata() to get the value from the "namebox" textbox and store it in the name_str variable which is to be displayed. But it doesnt display the value of name_str.

Hmmm, I usually enclose all attributes in ""s in html elements. E.g. type="text" name="passbox". Also another thing is the this.form you are passing to the function. I don't know for sure if that would pass what you want because the form is the parent of that particular element. Another words you can access that element as document.form[0].OK assuming that there is only one form. One way to make things easier is to name the form something unique like formIwantToUse or whatever you like, and change the function to utilize getElementById() to assign the variable to get the form input values. This would be a mod to the function:

function validatedata(formName){
f=getElementById(formName); /* This should definitely find the form as parent */
var pass_str =  f.passbox.value;
document.writeln("Your pass is : " + pass_str);
if(pass_str.length < 5 || pass_str.length > 8)
alert("Inappropriate length")
var name_str = f.namebox.value;
document.writeln("Your name is : " + name_str); /*This should find the element */
}

This only works if you change the form to have a unique id and instead of passing this.form to the function you pass the id of the form.

<form id="someUniqueForm">
<input type="text" name="passbox" size="10" maxlength="25"><br />
<input type="text" name="namebox" size="10" maxlength="25"><br />
<input type="button" value="CLICK ME!" onclick="validatedata('someUniqueForm')">
</form>

But I really think that it is printing name_str only name_str is equal to an empty string, but only because this.form doesn't exist because the element is actually form.this . I hope this helps.

> I have a little difficulty accessing a textbox value from a function.

Your HTML markup is all broken up, make sure you validate your markup before posting it here. You are incorrectly accessing form fields. Read this and this.

> f = getElementById(formName);

This is incorrect, getElementById is not a method of the window object, but the document object. Plus, it accepts an id and not name. Please make sure you verify the code you post.

This article has been dead for over six months. Start a new discussion instead.