Jump to content
Larry Ullman's Book Forums

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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()

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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();  

Share this post


Link to post
Share on other sites

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.

  • Upvote 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...