8 Replies - 1636 Views - Last Post: 07 May 2011 - 08:02 PM

#1 teahou  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 223
  • Joined: 01-April 11

My displayName() Function keeps coming up as undefined

Posted 06 May 2011 - 02:44 PM

I have a single page with a single form, but I have split the form into 3 divs for styling purposes. I have some java script that is supposed to pull values from the text fields, and put them in a selct box using 'document.forms[0].name.value', but nothing is happening. I am wondering if having the form split into to divs is causing the JS to not be able to find the fields, using the forms array? Here is the form portion of the html code:


<form name="roster" action="">
<div id="left">
<dl>
<dt>Team Name</dt>
<dd><input type="text" class="textField" name="teamName"></dd>
<dt>Coach's Last Name</dt>
<dd><input type="text" class="textField" name="coachlastName" ></dd>
<dt>Coach's First Name</dt>
<dd><input type="text" class="textField" name="coachfirstName" ></dd>
<dt>Coach's Phone</dt>
<dd><input type="text" class="textField" name="coachPhone" ></dd>
<dt>Coach's Email</dt>
<dd><input type="text" class="textField" name="coachEmail" ></dd>
</dl>
</div>

<div id="center">
<select name="members" size="12" onclick="memberList['member' + this.selectedIndex].getMembers();">
<option value="members">Team Members</option>
</select>
<p>
<input type="button" class="button" name="addMember" value="Add" onclick="addMember()">
<input type="button" class="button" name="delMember" value="Delete" >
<input type="button" class="button" name="modMember" value="Modify" >
</p>
</div>

<div id="right">
<p>
	<input type="checkbox" name="permission" value="permission" >Received parent/guardian permission
</p>
<dl>
<dt>Last Name</dt>
<dd><input type="text" class="textField" name="lastName" ></dd>
<dt>First Name</dt>
<dd><input type="text" class="textField" name="firstName" ></dd>
<dt>Position</dt>
<dd><input type="text" class="textField" name="position" ></dd>
<dt>Phone</dt>
<dd><input type="text" class="textField" name="phone" ></dd>
<dt>Email</dt>
<dd><input type="text" class="textField" name="email" ></dd>
</dl>
</div>
</form>





Is This A Good Question/Topic? 0
  • +

Replies To: My displayName() Function keeps coming up as undefined

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1148
  • View blog
  • Posts: 7,145
  • Joined: 07-September 06

Re: My displayName() Function keeps coming up as undefined

Posted 06 May 2011 - 10:04 PM

Yes, you can split your forms up however you wish as long as they still appear in one form tag set (opening and closing) it will work correctly.

In this case the problem you have is that you are trying toa ccess forms[0].name.value. This is actually getting the name of the first form on the page (which is a string) and then asking for its value (string doesn't have an attribute value). So it is doing exactly what you told it to, you just told it to do something other than what you wanted it to do.

What you should try is like so:
document.forms[0].lastName.value;


Hopefully that makes sense.
Was This Post Helpful? 0
  • +
  • -

#3 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,228
  • Joined: 08-June 10

Re: My displayName() Function keeps coming up as undefined

Posted 07 May 2011 - 12:17 AM

View PostBetaWar, on 07 May 2011 - 06:04 AM, said:

So it is doing exactly what you told it to, you just told it to do something other than what you wanted it to do.

an important fact to have in mind when starting to debug. the difficult thing is to find out where onself went astray.
Was This Post Helpful? 0
  • +
  • -

#4 teahou  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 223
  • Joined: 01-April 11

Re: My displayName() Function keeps coming up as undefined

Posted 07 May 2011 - 10:48 AM

Ok, I have fixed it up some, but there is still no communication between the html and js. Here is the code:



<script language="javascript" type="text/javascript">
    /* <[CDATA[ */
    	function Member ()
	{
		this.lastName = "";
		this.firstName = "";
		this.position = "";
		this.phone  = "";
		this.email = "";
		
		this.getMembers = getMemberInfo;
		this.updateMember = updateSelectedMember;
	}
	
	function getMemberInfo()
	{
		document.forms[0].lastName.value = this.lastName;
		document.forms[0].firstName.value = this.firstName;
		document.forms[0].position.value = this.position;
		document.forms[0].phone.value = this.phone;
		document.forms[0].email.value = this.email;
	}
	
	function updateSelectedMember(curIndex)
	{
		this.lastName = document.forms[0].lastName.value;
		this.firstName = document.forms[0].firstName.value;
		this.position = document.forms[0].position.value;
		this.phone = document.forms[0].phone.value;
		this.email = document.forms[0].email.value;

		document.forms[0].members.options[curIndex].value = this.lastName + ", " + this.firstName;
		document.forms[0].members.options[curIndex].text = this.lastName + ", " + this.firstName;
		window.alert("Member Information Updated");
	}
	
	var memberList = new Object();
	
	function addMember()
	{
		var newMember = 0;
		
		for (member in memberList)
		{
			++newMember;
		}
		
		if (document.forms[0].lastName.value == "" || document.forms[0].firstName.value == "")
			window.alert("You must enter a first and last name");
		else
		{
			memberList["member" + newMember] = new Member();
			memberList["member" + newMember].lastName = document.forms[0].lastName.value;
			memberList["member" + newMember].firstName = document.forms[0].firstName.value;
			memberList["member" + newMember].position = document.forms[0].position.value;
			memberList["member" + newMember].phone = document.forms[0].phone.value;
			memberList["member" + newMember].email = document.forms[0].email.value;
			
			var createMember = new Option();
			createMember.value = memberList["member" + newMember].lastName + ", " + memberList["member" + newMember].firstName;
			createMember.text = memberList["member" + newMember].lastName + ", " + memberList["member" + newMember].firstName;
			document.forms[0].members.options[newMember] = createMember;			
		}
		
	}
    /* ]]> */
    </script>
 
<title>Team Roster</title>
</head>

<body>
<div id="container">
<div id="top">
<h1>Little League Baseball Team Roster</h1>
</div>

<form name="members" action="">
<div id="left">
<dl>
<dt>Team Name</dt>
<dd><input type="text" class="textField" name="teamName"></dd>
<dt>Coach's Last Name</dt>
<dd><input type="text" class="textField" name="coachlastName" ></dd>
<dt>Coach's First Name</dt>
<dd><input type="text" class="textField" name="coachfirstName" ></dd>
<dt>Coach's Phone</dt>
<dd><input type="text" class="textField" name="coachPhone" ></dd>
<dt>Coach's Email</dt>
<dd><input type="text" class="textField" name="coachEmail" ></dd>
</dl>
</div>

<div id="center">
<select name="members" size="12" onclick="memberList['member' + this.selectedIndex].getMembers();">
<option value="members">Team Members</option>
</select>
<p>
<input type="button" class="button" name="addMember" value="Add" onclick="addMember()">
<input type="button" class="button" name="delMember" value="Delete" >
<input type="button" class="button" name="modMember" value="Modify" >
</p>
</div>

<div id="right">
<p>
	<input type="checkbox" name="permission" value="permission" >Received parent/guardian permission
</p>
<dl>
<dt>Last Name</dt>
<dd><input type="text" class="textField" name="lastName" ></dd>
<dt>First Name</dt>
<dd><input type="text" class="textField" name="firstName" ></dd>
<dt>Position</dt>
<dd><input type="text" class="textField" name="position" ></dd>
<dt>Phone</dt>
<dd><input type="text" class="textField" name="phone" ></dd>
<dt>Email</dt>
<dd><input type="text" class="textField" name="email" ></dd>
</dl>
</div>
</form>
</div>
</body>

</html>



Was This Post Helpful? 0
  • +
  • -

#5 teahou  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 223
  • Joined: 01-April 11

Re: My displayName() Function keeps coming up as undefined

Posted 07 May 2011 - 12:55 PM

I am re-writing some code which involves creating my own object which I plan to use to fill in the select list on the page. I have been having trouble getting the object properties to populate from the text input fields, so i have started over but am still running intot the same issue. i have created the 'member' object and have created a temp function to display the first and last names as enered by the user. The function pops up the alert window, but member.lastname and member.firstname keep coming up as undefined. I had originally that the syntax should be getMember.lastname + ", " + getMember.firstname, because getMember is the name of the instance variable here, but when I do that the function simply does not work. Could the problem be coming from me using dl, dt, dd tags? i have never used them before in conjection with JS, so??

I am temporarily calling the displayName function with an onclick tied to the delMember button. here is the code, let me know what you see:



<script language="javascript" type="text/javascript">
    /* <[CDATA[ */
    
    //Create the object
    var member = new Object();
    
    //Create the member object properties
    member.lastname = document.roster.lastname.value;
    member.firstname = document.roster.firstname.value;
    member.position = document.roster.position.value;
    member.phone = document.roster.phone.value;
    member.email = document.roster.email.value;
    
    
    // Object constructor function
    function member(lastname, firstname, position, phone, email)
    {
    		this,lastname = lastname;
    		this.firstname = firstname;
    		this.position = position;
    		this.phone = phone;
    		this.email = email;
    		
    		this.displayName = displayName;
    	}
    	
    	// Create instance of member object
    	var getMember = new member ("document.roster.lastname.value", 
    		"document.roster.firstname.value", 
    		"document.roster.position.value", 
    		"document.roster.phone.value", 
    		"document.roster.email.value");

	function displayName()
	{
		window.alert(member.lastname + ", " + member.firstname);
	}

    /* ]]> */
    </script>
 
<title>Team Roster</title>
</head>

<body>
<div id="container">
<div id="top">
<h1>Little League Baseball Team Roster</h1>
</div>

<form action="FormProcessor.html" name="roster" method="get" enctype="application/x-www-form-urlencoded">
<div id="left">
<dl>
<dt>Team Name</dt>
<dd><input type="text" class="textField" name="teamName"></dd>
<dt>Coach's Last Name</dt>
<dd><input type="text" class="textField" name="coachlastname" ></dd>
<dt>Coach's First Name</dt>
<dd><input type="text" class="textField" name="coachfirstname" ></dd>
<dt>Coach's Phone</dt>
<dd><input type="text" class="textField" name="coachPhone" ></dd>
<dt>Coach's Email</dt>
<dd><input type="text" class="textField" name="coachEmail" ></dd>
</dl>
</div>

<div id="center">
<select name="members" size="12" >
<option value="members">Team Members</option>
</select>
<p>
<input type="button" class="button" name="addMember" value="Add" >
<input type="button" class="button" name="delMember" value="Delete" onclick="displayName()">
<input type="button" class="button" name="modMember" value="Modify" >
</p>
</div>

<div id="right">
<p>
	<input type="checkbox" name="permission" value="permission" >Received parent/guardian permission
</p>
<dl>
<dt>Last Name</dt>
<dd><input type="text" class="textField" name="lastname" ></dd>
<dt>First Name</dt>
<dd><input type="text" class="textField" name="firstname" ></dd>
<dt>Position</dt>
<dd><input type="text" class="textField" name="position" ></dd>
<dt>Phone</dt>
<dd><input type="text" class="textField" name="phone" ></dd>
<dt>Email</dt>
<dd><input type="text" class="textField" name="email" ></dd>
</dl>
</div>
</form>
</div>
</body>



Was This Post Helpful? 0
  • +
  • -

#6 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Re: My displayName() Function keeps coming up as undefined

Posted 07 May 2011 - 01:38 PM

Hey.

I think you may be misunderstanding how you create an object in Javascript.

Judging by the comment above it your member function, I am assuming you want this function to become the constructor of the previously defined member object? - That's not how that works. By defining the function there using the same name the object variable had, you are effectively overwriting that variable with a function with the same name. So when you call new member(), that is not an object that has a constructor you can call. It's just a normal function.

If you want to use the new keyword to create an instance of an object, you will need to use prototype inheritance:
// First define the constructor function.
// (Keep in mind that functions are objects, 
// just like anything else in Javascript)
function member(lastname, firstname, position, phone, email)
{
    this.lastname = lastname;
    this.firstname = firstname;
    this.position = position;
    this.phone = phone;
    this.email = email;

    this.displayName = displayName;
}

// Then assign the function to be the
// constructor of it's prototype object.
// This means that when the "new" keyword
// is called with the "member" function,
// the function itself will be called as
// the constructor.
member.prototype.constructor = member;

// Then you can create instances of the
// member object using "new".
function displayName()
{
    var theMember = new member (
        document.roster.lastname.value, 
        document.roster.firstname.value, 
        document.roster.position.value, 
        document.roster.phone.value, 
        document.roster.email.value);
    window.alert(theMember.lastname + ", " + theMember.firstname);
}



You can also skip the whole prototype thing, and just do this:
function member(lastname, firstname, position, phone, email)
{
    this.lastname = lastname;
    this.firstname = firstname;
    this.position = position;
    this.phone = phone;
    this.email = email;

    this.displayName = displayName;
    
    return this;
}

function displayName()
{
    var theMember = member (
        document.roster.lastname.value, 
        document.roster.firstname.value, 
        document.roster.position.value, 
        document.roster.phone.value, 
        document.roster.email.value);
    window.alert(theMember.lastname + ", " + theMember.firstname);
}


I'd use the prototype version, but that's just me.
Was This Post Helpful? 0
  • +
  • -

#7 teahou  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 223
  • Joined: 01-April 11

Re: My displayName() Function keeps coming up as undefined

Posted 07 May 2011 - 02:27 PM

But don't I need this object creation part first?

    //Create the object
    var member = new Object();
    
    //Create the member object properties
    member.lastname = document.roster.lastname.value;
    member.firstname = document.roster.firstname.value;
    member.position = document.roster.position.value;
    member.phone = document.roster.phone.value;
    member.email = document.roster.email.value;
    



I thought the sequence was:

1. create the object using the new Object keywords
2. make the constructor function
3. If you want to have methods for the object, add them to the constructor and define them separately.

I am just learning js, so I may be completely off, am I?


Also, I tried your way (second option) and it works, except the lastname property is still undefined, all others show ok. Any idea on why that would be?

This post has been edited by teahou: 07 May 2011 - 02:42 PM

Was This Post Helpful? 0
  • +
  • -

#8 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Re: My displayName() Function keeps coming up as undefined

Posted 07 May 2011 - 03:14 PM

You don't need that, no. The two methods I used earlier is usually what you do to create custom objects.

Basically, to create a object prototype, you:
  • Write the constructor function.
  • Attach the function to it's own prototype.constructor.
  • Add any properties to the prototype object.
  • Optionally you can initialize them in the constructor itself.


Which could look something like:
// Create a MyObject object. (Functions are objects too)
function MyObject() {
    this.foo = 'I am initialized!';
}

// Set the MyObject prototype constructor
MyObject.prototype.constructor = MyObject;

// Add an attribute
MyObject.prototype.foo;

// Add a couple of function
MyObject.prototype.set_foo = function(afoo) {
    this.foo = afoo;
}

MyObject.prototype.get_foo = function() {
    return this.foo;
}



The equivalent non-prototype version could look like:
function MyObject() {
    // Add an initialize an attribute
    this.foo = 'I am initialized!';
    
    // Add a couple of functions
    this.set_foo = function(afoo) {
        this.foo = afoo;
    }
    
    this.get_foo = function() {
        return this.foo;
    }
    
    return this;
}




There syntax for creating objects can vary, but there is hardly ever a reason to user new Object(). You can, of course, but it's kind of redundant. For creating single objects, you can just do { } instead.

View Postteahou, on 07 May 2011 - 09:27 PM, said:

Also, I tried your way (second option) and it works, except the lastname property is still undefined, all others show ok. Any idea on why that would be?

Your original code has this,lastname = lastname; at some point. (Note the comma after the this keyword.)
That might be causing this, if it's still there.
Was This Post Helpful? 0
  • +
  • -

#9 Dogstopper  Icon User is offline

  • The Ninjaducky
  • member icon



Reputation: 2872
  • View blog
  • Posts: 11,031
  • Joined: 15-July 08

Re: My displayName() Function keeps coming up as undefined

Posted 07 May 2011 - 08:02 PM

Duplicate topics merged. Please keep related threads together. Thanks! :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1