Javascript Help - Total Beginner

Conor · Nov 22, 2009

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 · Nov 22, 2009

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

Conor said:
HTML:

<script type="javascript">

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

Conor said:

"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:

    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.

Conor said:

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.

Conor said:

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.

Conor said:
HTML:

<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 · Nov 30, 2009

You should refer to tutorials at W3schools

misson · Nov 30, 2009

apoorav said:
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 · Dec 1, 2009

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

Javascript Help - Total Beginner

Conor

New Member

misson

Community Paragon

apoorav

New Member

misson

Community Paragon

leonard9

New Member

Free Web Hosting

Our Community

Legal