Javascript Help - Total Beginner

**Conor** · 11-22-2009 11:42 AM

Hey guys,

I'm a total beginner in Javascript and I need help! I have an assignment due tomorrow and I can't get this figured out! I'll try to break it down for you as best I can.

The goal: When the 'Process' button is clicked, the inputted 'Price' multiplies by the number of items inputted and puts that value into the Sale Value field. It also adds the sale value to the Customer Total field value and increases the 'Items Purchased' field value by 1.

Here's all of my code.

Code:

<html>
<head>
<title>Assignment 5</title>


<script type="javascript">

	function process(price, number)
		{
var value = document.form.price.value * document.form.number.value;

		        document.form.salevalue.value = document.form.price.value * document.form.number.value;
			document.form.customertotal.value = document.form.salevalue.value + value;
			document.form.itemnumber.value = document.form.itemnumber.value + 1; 
		}
		

</script>


</head>
<body>

<p><b><u>East Residence Online Organic Store</u></b></p>

<br>

<table border="1" width="400">
<form name="form">
<tr>
	<td><b>Customer Number</b>
		<input type="text" name="customernumber" value="1" />
	</td>
	<td><b>Home delivery</b>
		<input type="checkbox" name="homedelivery" value="Home" checked />
	</td>
</tr>

<tr>
	<td><b>Items purchased</b></td>
	<td>
		<input type="text" name="itemspurchased" />
	</td>
</tr>

<tr>
	<td><b>Item number</b></td>
	<td>
		<input type="text" name="itemnumber" value="1" />
	</td>
</tr>

<tr>
	<td><b>Price</b></td>
	<td>
		<input type="text" name="price" />
	</td>
</tr>

<tr>
	<td><b>Number</b></td>
	<td>
		<input type="text" name="number" />
	</td>
</tr>

<tr>
	<td><b>Value of sale</b></td>
	<td>
		<input type="text" name="salevalue" value="0" />
	</td>
</tr>

<tr>
	<td><b>Customer Total</b></td>
	<td>
		<input type="text" name="customertotal" value="0" />
	</td>
</tr>

<tr>
	<td>&nbsp;</td>
	<td>
		<input type="button" name="Process" value="Process" onclick=" process()" />
	</td>
</tr>
</form>
</table>

</body>
</html>

My HTML should be more or less right on, but I have no idea with the Javascript. Please help!

**misson** · 11-22-2009 02:59 PM

Very important: don't dump all your code and say "it doesn't work". You did a good job describing what the code is supposed to do, but neglected to say what it does (including error messages). I'm not sure if it was intentional, but you posted a rather nice minimal test case. Keep doing that in the future.

The single best bit of advice I can give: use Firefox (if not already) and Firebug to debug your pages. You can use it to work with JS, CSS and even HTML.

Make sure you follow the advice in the sig and read all the links, though you don't have to do this before turning in the assignment.

The source is rather simple, so let's continue

Originally Posted by Conor

HTML Code:

<script type="javascript">

The "type" attribute should be a MIME type (also called a "content type" in the HTML standard), such as "text/javascript".

Originally Posted by Conor

Code:

    function process(price, number)
    {
        var value = document.form.price.value * document.form.number.value;

"document.form" may be undefined on some browsers. If you want to refer to a form by name, use "document.forms.name" or the equivalent "document.forms[name]"; the former is for a literal form name, the latter for when the form name is stored in a variable. In this case, you can use "document.forms.form". Even better, pass the form to "process()" when it's called:

HTML Code:

    function process(form) {
    ....
<input type="button" name="Process" value="Process" onclick="process(this.form)" />

In an inline event handler, "this" refers to the target; in this case, "this" is the button named "Process". Furthermore, every form input has a "form" property referring to the containing form.

Originally Posted by Conor

Code:

        var value = document.form.price.value * document.form.number.value;

        document.form.salevalue.value = document.form.price.value * document.form.number.value;
        document.form.customertotal.value = document.form.salevalue.value + value;

Look closely at these three lines. They can be shortened, reducing unnecessary calculation and fixing the bug described next.

Originally Posted by Conor

Code:

        document.form.customertotal.value = document.form.salevalue.value + value;
        document.form.itemnumber.value = document.form.itemnumber.value + 1;

Since one of the arguments is a string in both these lines, the "+" is a concatenation operator, not addition. Use parseInt or unary "+". Read "Javascript Type-Conversion" for more information.

Originally Posted by Conor

HTML Code:

<table border="1" width="400">
<form name="form">

The only valid children for a <table> are <caption>, <col>, <colgroup>, <thead>, <tfoot> and <tbody> (basically in that order) and (for backwards compatibility), except that <tbody> may be omitted if there's only one table body and no head or foot section. In the last case, <tr> may be a child of <table>. No other element, including <form>, can be a child of <table>. You can use W3C's validator to check for violations such as this.

The name "form" is a very poor name as you should always choose descriptive names, but it's a small concern for a homework problem.

You shouldn't use table based layouts, but (again) as this is a homework assignment, creating a CSS based layout is a low priority. Still, if you've the time, don't get into bad habits. "Applying CSS to forms" and "Fancy Form Design Using CSS" will help you with CSS form layout. Read "Designing Web Forms" and the pages it links to for info on designing forms.

Protip: use [HTML] and [PHP] rather than [CODE] when appropriate for pretty colors (see above for examples).

**apoorav** · 11-30-2009 03:24 AM

You should refer to tutorials at W3schools

**misson** · 11-30-2009 04:55 AM

Originally Posted by apoorav

You should refer to tutorials at W3schools

W3Schools is a mixed bag. Some good, some terrible. Besides, OP is already in a class. Not that other sources couldn't help, depending on the quality of his current instruction, but that's probably requires more time than OP has free.

**leonard9** · 12-01-2009 09:05 PM

You can also google java codeing and you will find a page on it quicker than posting

Thread: Javascript Help - Total Beginner

LinkBack

Thread Tools

Display

Javascript Help - Total Beginner

Re: Javascript Help - Total Beginner

Re: Javascript Help - Total Beginner

Re: Javascript Help - Total Beginner

Re: Javascript Help - Total Beginner

Similar Threads

drop down menus with JavaScript disabled?

javascript and external javascript files problem

XML and Javascript

Some nice-simple JavaScript effects !!

Rome : Total War Barbarian Invasion

Posting Permissions