How can I calculate user inputs from an html table using javascript

I am having trouble calculating the total that the user inputs for each text fields in the table. The total has to appear on the same page (under the table) after the calculate button is clicked on. Attached are the site files. Thanks.
site.zip
slipz1337Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

kostonconsultingCommented:
You need to update displayVolume to grab the price and then multiple by the number of rooms like so:



function displayVolume()
         {
			var rate1 = 120;
			var rate2 = 220;
			var rate3 = 350;
            var inputField = document.getElementById( "room1" ).value * rate1;
			var inputField2 = document.getElementById( "room2" ).value * rate2;
			var inputField3 = document.getElementById( "room3" ).value * rate3;
            var total = parseFloat( inputField+ inputField2 + inputField3 );
            var answerField = document.getElementById( "answer" );
            answerField.value = totalPrice( total );
         } 

Open in new window

function displayVolume()
         {
			var rate1 = 120;
			var rate2 = 220;
			var rate3 = 350;
            var inputField = document.getElementById( "room1" ).value * rate1;
			var inputField2 = document.getElementById( "room2" ).value * rate2;
			var inputField3 = document.getElementById( "room3" ).value * rate3;
            var total = parseFloat( inputField+ inputField2 + inputField3 );
            var answerField = document.getElementById( "answer" );
            answerField.value = totalPrice( total );
         }

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
slipz1337Author Commented:
Oh ok thanks, I also wanted to include the check in date and checkout date to display on the same page with the total prices. Check-in/checkout dates have to be valid dates (check-in date is larger than ‘today’ and checkout date is larger than check-in date)
0
kostonconsultingCommented:
You'll need some code to make the date popup, this one works or search google for 'javascript date pop-up':

http://www.mattkruse.com/javascript/calendarpopup/



Then, you can use the javascript date object to compare dates, depending on your date variable format:

http://www.w3schools.com/jsref/jsref_obj_date.asp

var todays_date = new Date();
var sel_date_from_form = document.getElementBy('date1').value;
var selected_date = new Date(sel_Date_from_form);

Open in new window


You might have to split up the input variable if it's something like this '03/28/2011' and then put it in the Date object:

var sel_date_from_form = document.getElementBy('date1').value;
var date_items = sel_date_from_form.split('/');
var month = date_items[0];
var day = date_items[1];
var year = date_items[2];
var selected_date = new Date(year, month, day, '','','','');

Open in new window

0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

slipz1337Author Commented:
Is there a way i can error check(validate) by manually putting in the date and not using the date popup?
0
kostonconsultingCommented:
Sure. Have them enter a date and then check it against today's date:

Say they are entering like this '03/28/2011'. Then you need to chop up the input, and compare it against today's date:

var date_from_form_input = document.getElementBy('date1').value;
var date_items = date_from_form_input.split('/');
var month = date_items[0];
var day = date_items[1];
var year = date_items[2];

var form_date = new Date(year, month, day, '','','','');
var todays_date = new Date();

if( form_date > todays_date){
   alert('The date cannot be after today');
}

Open in new window


You can compare Date objects with >, <, ==

if(form_date > todays_date){
     alert('form date is after today');
}else if( form_date < todays_date){
     alert('form date is before today);
}else{
   alert('form date is today');
}

Open in new window

0
slipz1337Author Commented:
oh ok, I feel like im asking too much but would u able to put everything together? I would feel that I have more of an understanding of what im doing.
0
kostonconsultingCommented:
You'll need to update the html to put in places for where you want the dates and upload that, then I can send you a sample.
0
slipz1337Author Commented:
Ok here is the attachment.
site.zip
0
kostonconsultingCommented:
You're going to need to clean up this page before it's going to work properly. It's definitely not valid HTML. Load your page, and click view source. Then copy the code to this page: http://validator.w3.org/#validate_by_input

You need to fix the 19 errors before you can get your JavaScript working properly.

Also, you should put JavaScript at the end of the page, after the </html> tag so it executes after the DOM is created.

Since there's so much to take care of before being able to write code towards the page, I can't really help out with the specific code. You should consider retaining a web developer to get things written.

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.