Need help with Javascript
Hi Folks
I'm new to the forum here, at the moment I'm studying Javascripting and needs some tips how to solve a couple of puzzles that my friends have created for me to solve and I'm unable to solve them, I was hoping if any of you can help me out.
I've attached the document I'm working on for a few weeks and getting no where and its leading me to frustration. View the source code of the HTML document.
I managed to write down the coding to a state where I want to display the following item when I click on the "Add Sales" button. The plan I intended was that the function should add the sales information to the appropriate variable that will store the total sales for the item number that has been entered in the form that I have made up. If the value I entered in the ItemNumber field is outside the range 1-5 that I have, a warning message should be displayed.
Also the problem with my Javascript code to the button Show Totals, this function should display a HTML table showing the total sales for each item that have been entered by the user, it should look like something like.
Product No. Product Description Quantity Total Sales
1 Apples 2 $1.30
2 games 3 $40
Would you be able to help me solve it?
Your advice or assistance will be much appreciated.
# 1 Re: Need help with Javascript
well... dont think u'll appreciate my answer...even then...
some how ur idea of takin in quantities for items and then adding seems a bit tiresome from the point of the user. i got a slightly diff method of doing it... from the users point of view and also from the presentation angle i find it much better. also javascript is being used. maybe u can work on it.
to know exactly what i've changed ...view the page ... enter the quantity and press tab (just get the focus out of the quantity textbox).
incase u still want to stick to what u started(which i feel is un-necessarily tedious) get back...mabye i can think up of something with that code in mind :)
<script type = "text/javascript" language="JavaScript">
<!--
function calc_total(rate,quantity,total_id)
{
total_id.value=rate * quantity;
}
function showTotals()
{
// pick up each quantity textbox value and add it up to display the total
}
// -->
</script>
</head>
<body>
<table border = '1' width =100%>
<tr>
<td ><strong>Product #</strong></td>
<td ><strong>Product Description</strong></td>
<td ><strong>Unit Price</strong></td>
<td ><strong>Quantity</strong></td>
<td ><strong>Sales for this item</strong></td>
</tr>
<tr>
<td> Product 1 </td>
<td>Apples</td>
<td>$0.65</td>
<td align=center><input type=text name=quantity_p1 id=quantity_p1 onchange="calc_total(0.65,this.value,total_p1);"></td>
<td align=center><input type=text name=total_p1 id=total_p1 readonly ></td>
</tr>
<tr>
<td> Product 2 </td>
<td>Computers</td>
<td>$0.50</td>
</tr>
<tr>
<td> Product 3 </td>
<td>Movies</td>
<td>$1.60</td>
</tr>
<tr>
<td> Product 4 </td>
<td>Sports</td>
<td>$1.80</td>
</tr>
<tr>
<td> Product 5 </td>
<td>Entertainment</td>
<td>$0.80</td>
</tr>
</table>
<input type = "button" value = "Show Totals" onclick = "showTotals()">
</body>
</html>
# 2 Re: Need help with Javascript
Hey that's neat I like it!
Still I need to provide a solution to the other problem though. If you help me solve the one I have provided. Let me know.
I need to show all those items including the total of the times. And when I click on "Add Sales" I should be able to accumulate (like an addition) to the current items.
Same idea in putting them into a table with all the items shown.
If you can help me that would be greatly appreciated :)
# 3 Re: Need help with Javascript
:) well i did manage to whip up some thing...am not really sure this is what ur looking for though.
this is a section i add at the end of the html ...this is used to display the totals
<!--
the section below is used to display the products and the totals.
at first the div is not shown but once the table is populated by the function, its made visible.
-->
<div name=totDiv id=totDiv style="visibility:hidden">
<table>
<tr>
<td>
Product Description
</td>
<td >
Total Sales
</td>
</tr>
<tr>
<td>
Apples
</td>
<td id=prod_0> <!-- the ids are created such so that there is ease of programming...-->
Total Sales
</td>
</tr>
<tr>
<td>
Computers
</td>
<td id=prod_1>
Total Sales
</td>
</tr>
<tr>
<td>
Movies
</td>
<td id=prod_2>
Total Sales
</td>
</tr>
<tr>
<td>
Sports
</td>
<td id=prod_3>
Total Sales
</td>
</tr>
<tr>
<td>
Entertainment
</td>
<td id=prod_4>
Total Sales
</td>
</tr>
</table>
</div>
now the functions...
function addSales(productId, numSold)
{
// here i assume that the user enters the prod ids as 1,2,3...
switch(productId)
{
case '1':// prod id entered is 1
rate=parseInt(numSold) * 0.65; // calculate the total for the quantity enetered.
totqty[0] += rate ; // store in array
}// u need to work on for the rest of the ids.
}
function showTotals()
{
// To Do you need to write the code for this function
// This function will display the information as in Screen 2
// each of the values enetered in the array are displayed
for (counter=0;counter<5;counter++)
{
ele_Id="prod_" + counter;
document.all.item(ele_Id).innerHTML=totqty[counter];
}
totDiv.style.visibility="visible";
}
however... if the user enters prod id and quantity BUT does not click on the "Add Sales" button then the quantity is not added to the array... and thus not registered.
get back if theres something amiss or not clear. :)
# 4 Re: Need help with Javascript
Here is wait I've done so far... Tell me what you think of this plan I had in mind
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Prototype Test</title>
<script type = "text/javascript" language="JavaScript">
<!--
// FruitShop variables
var value = new Array();
var totprice = new Array();
var totqty = new Array ();
for (x=0; x<5; x++)
{
totprice[x]= 0;
totqty[x]= 0;
}
{
value[1] = 0.65;
value[2] = 0.50;
value[3] = 1.60;
value[4] = 1.80;
value[5] = 0.80;
}
// End FruitShop variables
// This function will add the quantity for each given item and calculates the total amount for that item
function addSales(productId, numSold)
{
var productId
{
if ((productId < 1) || (productId > 5))
{
alert ("Please select Product Number between 1-5");
return;
}
totqty[productId] += parseInt(numSold);
totprice[productId] = value[productId] * totqty[x];
}
}
// This function will display the information as in Screen 2
function showTotals(){
var pagecontent = "<h2>Prod Totals</h2>";
pagecontent += "<table border = '1' width = '600'>";
pagecontent += "<td width = '200'>";
pagecontent += "<tr><td>" + "<h2>Product 1</h2>" + "</tr><td>";
pagecontent += totqty[1] + "<td><tr>" + totprice[1] + "</td></tr>";
pagecontent += "<tr><td>" + "<h2>Product 2</h2>" + "</tr><td>";
pagecontent += totqty[2] + "<td><tr>" + totprice[2] + "</td></tr>";
pagecontent += "<tr><td>" + "<h2>Product 3</h2>" + "</tr><td>";
pagecontent += totqty[3] + "<td><tr>" + totprice[3] + "</td></tr>";
pagecontent += "<tr><td>" + "<h2>Product 4</h2>" + "</tr><td>";
pagecontent += totqty[4] + "<td><tr>" + totprice[4] + "</td></tr>";
}
// -->
</script>
</head>
<body>
<h2>Product Details</h2>
<table border = '1' width = '400'>
<tr><td width = '100'><strong>Product #</strong></td>
<td width = '200'><strong>Product Description</strong></td>
<td width = '100'><strong>Unit Price</strong></td></tr>
<tr><td> Product 1 </td><td>A</td><td>$0.65</td></tr>
<tr><td> Product 2 </td><td>B</td><td>$0.50</td></tr>
<tr><td> Product 3 </td><td>C</td><td>$1.60</td></tr>
<tr><td> Product 4 </td><td>D</td><td>$1.80</td></tr>
<tr><td> Product 5 </td><td>E</td><td>$0.80</td></tr>
</table>
<form name = "sales">
<p><label>Item Number:
<input name = "ItemNumber" type = "text" size = "5"/>
</label>
<label>Quantity:
<input name = "Quantity" type = "text" size = "5"/>
</label></p>
<input type = "button" value = "Add Sales" onclick = "addSales(ItemNumber.value, Quantity.value)">
<input type = "button" value = "Show Totals" onclick = "showTotals()">
</body>
</html>
I have an alert popup going to make it easier on me to check out. What do you think?
# 5 Re: Need help with Javascript
:)seems cool! didnt view the page...just went thru the code...and it seems to be doing the job. good work! :thumb:
# 6 Re: Need help with Javascript
Here is another way I found it...
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Assignment Part 1</title>
<script type = "text/javascript" language="JavaScript">
<!--
var totprice = new Array(); // To keep total price for each item
var totqty = new Array(); // To keep total quantity for each item
// Initialize variables
for (i=0; i<5; i++)
{
totprice[i] = 0;
totqty[i]=0;
}
function addSales(productId, numSold)
{
// To Do you need to write the code for this function
// This function will add the quantity for each given item
var itemId = parseInt(productId);
var qtysold = parseInt(numSold);
if (itemId >= 1 && itemId <= 5)
{
totqty[itemId - 1] = totqty[itemId - 1] + qtysold;
}
else
{
window.alert("Please select Product Number between 1-5");
}
sales.ItemNumber.value = "";
sales.Quantity.value = "";
sales.ItemNumber.focus();
}
function showTotals()
{
// Calculates the total amount for that item
// To Do you need to write the code for this function
// This function will display the information as in Screen 2
// Calculate the Totals
totprice[0] = Math.round(totqty[0] * 0.65 *100)/100;
totprice[1] = Math.round(totqty[1] * 0.50 *100)/100;
totprice[2] = Math.round(totqty[2] * 1.60 * 100)/100;
totprice[3] = Math.round(totqty[3] * 1.80 * 100)/100;
totprice[4] = Math.round(totqty[4] * 0.80 * 100)/100;
// Display the Totals Table
document.writeln("<h2>Prod Totals</h2>");
document.writeln("<table border = '1' width = '600'>");
document.writeln("<td width = '200'>");
document.writeln("<tr><td width = '100'><strong>Product #</strong></td>");
document.writeln("<td width = '200'><strong>Product Description</strong></td>");
document.writeln("<td width = '100'><strong>Unit Price</strong></td>");
document.writeln("<td width = '125'><strong>Total Quantity</strong></td>");
document.writeln("<td width = '125'><strong>Total Price</strong></td></tr>");
document.writeln("<tr><td> Product 1 </td><td>A</td><td>$0.65</td><td>" +
totqty[0] + "</td><td>" + totprice[0] + "</td></tr>");
document.writeln("<tr><td> Product 2 </td><td>B</td><td>$0.50</td><td>" +
totqty[1] + "</td><td>" + totprice[1] + "</td></tr>");
document.writeln("<tr><td> Product 3 </td><td>C</td><td>$1.60</td><td>" +
totqty[2] + "</td><td>" + totprice[2] + "</td></tr>");
document.writeln("<tr><td> Product 4 </td><td>D</td><td>$1.80</td><td>" +
totqty[3] + "</td><td>" + totprice[3] + "</td></tr>");
document.writeln("<tr><td> Product 5 </td><td>E</td><td>$0.80</td><td>" +
totqty[4] + "</td><td>" + totprice[4] + "</td></tr>");
document.writeln("</table>");
}
// -->
</script>
</head>
<body>
<h2>Product Details</h2>
<table border = '1' width = '400'>
<tr><td width = '100'><strong>Product #</strong></td>
<td width = '200'><strong>Product Description</strong></td>
<td width = '100'><strong>Unit Price</strong></td></tr>
<tr><td> Product 1 </td><td>A</td><td>$0.65</td></tr>
<tr><td> Product 2 </td><td>B</td><td>$0.50</td></tr>
<tr><td> Product 3 </td><td>C</td><td>$1.60</td></tr>
<tr><td> Product 4 </td><td>D</td><td>$1.80</td></tr>
<tr><td> Product 5 </td><td>E</td><td>$0.80</td></tr>
</table>
<form name = "sales">
<p><label>Item Number:
<input name = "ItemNumber" type = "text" size = "5"/>
</label>
<label>Quantity:
<input name = "Quantity" type = "text" size = "5"/>
</label></p>
<input type = "button" value = "Add Sales" onclick = "addSales(ItemNumber.value, Quantity.value)">
<input type = "button" value = "Show Totals" onclick = "showTotals()">
</body>
</html>
# 7 Re: Need help with Javascript
just noticed...in the previous example u dont display the table any where, u just accumulate the HTML in a string...or maybe i missed that part somehow...
in this current example... u must have tried it out...but document.write clears the whole document and then writes... so the table appears as if its printed on a new page.
theres another way of display the final table... here i dynamically create the table and add rows to it...
//create table element
ele=document.createElement("table");
//give it an id
ele.id="tab";
//append it to the document body
document.body.appendChild(ele);
//insert row
var oRow=document.all.item("tab").insertRow();
//create cell for product
var oCell = oRow.insertCell();
//write product
oCell.innerHTML="<font>Product 1</font>";
//create cell for quantity
oCell = oRow.insertCell();
//write quantity
oCell.innerHTML="<font>" + totqty[0] + "</font>";
another point ...it is always best to have the product names/ids, rates also to be stored in an array. since this is just a test prog...its fine,...but what if i decide to change the rates for product 3 or maybe i decide to change the name of product 4 or add a new product!? :) u cud try doing this as ur next exercise! ;)
# 8 Re: Need help with Javascript
Thanks PallaviDalvi with all your help, much appreciated! :)
I'll try your example when I have the time ;)
Attached is another problem I'm having and want to solve, wondering if you can help me.
Far as I understand...
All required form fields have some text entered.
Include a new field for the phone number without any spacer characters, such as parentheses, dashes, spaces, and dots. It should have exactly ten digits, if not you should reject it.
Include an email field in the form and the validity of the email address should be checked by making sure it follows this format: some characters, then an at symbol (@), then some more characters, then a dot (.), then two or three more characters.
A password field and a confirm password field in your form, has a minimum of 6 characters and both fields should be valid.
What is the best way to tackle on this approach?
Your advice will be much appreciated.
# 9 Re: Need help with Javascript
to check for entry in a textfield. there are 2 ways... either u do when the user is making the entry or u do after the user has made the entry,
1. when the user makes entry...
<input type=text id=txt name=txt onchange=chk();>
function chk()
{
/*check window.event.keyCode against the keycodes that u want to permit/ block and do processing accordingly. use window.event.keyCode=0 to cancel the invalid keypress.
to find out the keyCodes... just use alert and press the keys for which u need to know the keyCodes.
similarly u can check for the length of entry also. as
txt.value.length */
}
2. after the entry is made
/* the following function is called just before the form is posted*/
function validate()
{
/*carry out the checks here. however i wud prefer making length checks this way but not character checks...as programatically speaking its a bit of a tedious job. Moreover as a user , i always find it irritating...that after i make the entire entry i'm told that its in-valid. better be done when i'm still at it. but the email checking and required fields entry has to be done here. */
}
hope this takes u another step further! :)
