Unknown Error

[ionezation]

This is my HTML

<form id="form" method="post">


First Name :
<input type="text" id="fname" name="fname">
<br>


Last Name :
<input type="text" id="lname" name="lname">
<br>
Department :


<select name="department" id="department">
<option value="accounts">Accounts</option>
<option value="hr">HR</option>
<option value="it">Information Technology</option>


<input type="submit" id="submit" value="Add Employee">


<div id="output"></div>
</form>
</select>

This is my CSS !

function calculate(){
'use strict';


var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
var depart = document.getElementById('department').value;


var output = document.getElementById('output');


var employee = {
firstname:fname,
lastname:lname,
department:depart,
hireDate:new Date()
};


var msg = '<h2>Employee Added</h2> Name :  ' + employee.firstname +  employee.lastname + '<br>';  
msg += 'Department :  ' + employee.department + '<br>';
msg += 'Hire Date :  ' + employee.hireDate.toDateString();


output.innerHTML = msg;
}




function init()
{
'use stric';
var form = document.getElementById('form');
form.onsubmit = calculate;
}; // end init()


window.onload = calculate;

For unknown reason i cant figured it out what is the problem please help

 

[HartleySan]

Trying moving your </select> tag to after the last </option> tag.

[ionezation]

It doesn`t work either hartley ! this is from chapter 6 [complex variable type] on page 212, its about working with array. 

 

Before this example there also one in this book that is also not working it is on page 196 chapter 6 [complex variable type] and it is for working with objects

[HartleySan]

Another thing is that you're not preventing the default form submission.

When you submit the form, do you get a page reload?

[ionezation]

Yes, even after this it is not working.

When i click add employee it reloads the page but doesn`t update the output field at all.

[ionezation]

one mistake i had that the misspell of 'strict' in Function init();

function init()
{
'use stric';
var form = document.getElementById('form');
form.onsubmit = calculate;
}; // end init()

[HartleySan]

That's my point. If the page reloads completely, then you're doing it wrong. JS should not cause a page reload, thus you need to prevent the default form submission to get your JS to work properly.

[ionezation]

now i have return false; after

 

 

output.innerHTML = msg;
return false;

}

 

but still not working :s 

[HartleySan]

What errors are output to the console?

[ionezation]

no errors at all hartley,  I just seeing

 

name:

department:accounts

Hiring Date : is the current date time.

 

thats it :x

[HartleySan]

Are you saying that the JS is catching the form submit, and then outputting the department and the hiring date, but not the first and last name?

 

Please do me the following favor:

In Chrome, load your console up, right-click in the console and select "Preserve log upon navigation", and then add the following line to your code and execute your code:

 

var msg = '<h2>Employee Added</h2> Name :  ' + employee.firstname +  employee.lastname + '<br>';  
msg += 'Department :  ' + employee.department + '<br>';
msg += 'Hire Date :  ' + employee.hireDate.toDateString();


console.log(employee.firstname, employee.lastname, employee.department, employee.hireDate);


output.innerHTML = msg;

 

Please let us know what you find.

Thank you.

[ionezation]

Yes hartleysan, after the script you have submitted it shows this

 

Employee Added

Name : undefinedundefined                    // undefined first and last name. They are still undefined
Department : IT                            // It is changing now
Hire Date : Wed Jan 15 2014                  // date is this

 

In console it is that

 

// undefined undefined "accounts" Wed Jan 15 2014 06:22:11 GMT-0800 (Pacific Standard Time)

 

i have found one error in my code and that was here in :

 

function init()

{

'use strict';

var form = document.getElementById('form');

form.onsubmit = calculate;

}; // end init()

 

 

window.onload = calculate;            // Instead of init; i placed here calculate();  

[HartleySan]

Well, it sounds like you're not properly capturing the two names.

Is that a fair judgment call to make?

[ionezation]

let me check again ! i dint change the document.getelementbyID(); method at all

 

var fname = document.getElementById('fname').value;

[HartleySan]

ionezation, thanks for sending me your code.

After getting the real code and being able to test it out myself, I quickly found the problem.

 

You need to change the following line:

var msg = '<h2>Employee Added</h2> Name :  ' + employee.firstname +  employee.lastname + '<br>';  

As follows:

var msg = '<h2>Employee Added</h2> Name :  ' + employee.firstName +  employee.lastName + '<br>';  

In other words, firstname and lastname need to be changed to their camel case variations firstName and lastName.

 

While those two simple changes will get your code working, there are a number of other things I would do to change your code, but I'll leave it at that for now.

[ionezation]

Thanks hartleySan, because of your efforts i finally made through the problem and moving forward in my pursue of Javascript Knowledge. Thank you very much for helping me out.

 

Anu

[HartleySan]

You're welcome.

In the future though, try using the JavaScript console in Chrome, etc. to debug your code. If you don't know how to use such tools, I highly recommend learning, as they are invaluable for front-end development.

[ionezation]

Thanks again HartleySan, You i cant understand the console errors .. sometimes it crossed me so i copy error and paste it on google to get it know how but few times i stuck.

[HartleySan]

With most (if not all) errors in the Chrome console, they also print out a line number in your code. You can click on that line number to view the exact spot where the error occurred in your code.

You can also set up breakpoints, etc. in your code from Chrome Dev Tools.