JavaScript - Event Order Issue

I have a ondrag event handler and in that I am trying to retrieve e.ClientX but it always return 0 in Mozilla. Works fine in IE though.

How can retrieve the clientX and clientY in ondrag event?

Hi,

I need help with my javascript codes to finish my order form.

The first problem I am encountering is this:

I need the quantity to appear automatically in the total quantity for sub total.

how is this?

I have assigned TotalQuantity.value for the quantity.

Thank you.

You can see the image here.
http://img821.imageshack.us/i/oderform.jpg/

I am using the following code to rotate my banner 3 times.

I am trying to get it to order. Ive set it up so that you can choose yes/no drop down as to whether you wnat a panel to show and I have also set it up with a drop down so you can specify 1,2,3. I want to be able to randomly change the order to say 2, 1, 3 it dosent seem to work with what I have below. Any suggestions?

Code:

<script type="text/javascript">


$(document).ready(function(){ 

$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);



$(".ui-tabs-panel > a").hover( 
function() { 
$("#featured").tabs("rotate",0,true); 
}, 
function() { 
$("#featured").tabs("rotate",5000,true); 
} 
); 


<div id="featured" >

---------------------------------------------------------
<%
String sCount="";
String stitle = "";
String iPanels = "";
String sShowPanels = "";
String sContent="";
%>

<ul class="ui-tabs-nav">

<%
for(int i=1;i<7;i++){

sCount="" + i;
stitle = "stitle";
stitle= stitle + i;
iPanels = "iPanels";
iPanels = iPanels + i;
sShowPanels = "sShowPanels";
sShowPanels = sShowPanels + i;

//out.print(requestItem.getFieldValue(iPanels) + "=" + sCount);



if(requestItem.getFieldValue(iPanels).equals(sCount)){


if(requestItem.getFieldValue(sShowPanels)!=null && requestItem.getFieldValue(sShowPanels).equals("Yes")){

if(requestItem.getFieldValue(stitle)!=null && requestItem.getFieldValue(stitle).length() >2){

%>

<li class="ui-tabs-nav-item" id="nav-fragment-<%=i%>"><a href="#fragment-<%=i%>">
<%=requestItem.getFieldValue(stitle)%>
</a></li>
<%
}
}
}
}

%>
</ul>


<%


for(int i=1;i<7;i++){


sCount="" + i;
stitle = "stitle";
stitle= stitle + i;
iPanels = "iPanels";
iPanels = iPanels + i;
sShowPanels = "sShowPanels";
sShowPanels = sShowPanels + i;
sContent = "sContent";
sContent= sContent + i;



if(requestItem.getFieldValue(iPanels).equals(sCount))
{
if(requestItem.getFieldValue(sShowPanels)!=null && requestItem.getFieldValue(sShowPanels).equals("Yes"))
{
if(requestItem.getFieldValue(sContent)!=null && requestItem.getFieldValue(sContent).length() >2)
{
%>
<div id="fragment-<%=i%>" class="ui-tabs-panel ui-tabs-hide" style="">
<%=requestItem.getFieldValue(sContent)%>
</div>
<%
}
}
}
}
%>

</div>


</div> <!--content-->

hi,

This is my proble, I have some controls(textbox's,dropdown's),and using javascript,tab order,when i press "Enter" key the tab order 1 is not working(The cursor is focussed in the control which is tab order is 1, not moved to tab order 2)

please give a solution.

NARASIMHA RAO K.

Hello guys,
please help me in building an order form, the details.
The order form consist of text box product quantity, unit price, total price, sub total price, tax, discount, grand total quantity and grand total price.
There are 8 products so there will be 8 product quantity, unit price, total price text boxes. When a user enter the product quantity and unit price, the total price column should be automatically calculated e.g. if product quantity is 8, unit price is 2 then the total price should come to 16. The sub total price will be automatically calculated which should be the addition of all total prices so as the product quantity. The user will enter the tax and discount amount which should be calculated as percentage. Tax will be added to sub total and discount will be subtracted from sub total and then the total price will be displayed in the grand total text box.

Please help me to develop this form.

Thank You

I have a challenge I gave to myself. I want a script that asks me to put things in order. Say I want a quiz of family, order of age. I have a table with the left cell everybody's name I want a script where I click on a name and it moves over to the right hand cell, up top, then the next clicked named is put under it and so on until all the names are moved over. So far I have this, but I know there is a lot of room for improvment. any suggestions?
<HTML>
<HEAD>
<TITLE>Put Bible books in proper order</TITLE>
</head>

<body>
<h1>Hello World!</h1>
<TABLE BORDER=5><TR><TD>
<FORM NAME="BOOKS">
<script language="javascript" type="text/javascript">
alert('This is what an alert message looks like.');
FUNCTION TESTER() {
ALERT('WORKS');
VAR GOOD=0;
VAR BAD=0;
if (BOOKS.FONE="A") {
GOOD++;
}
ELSE {
BAD++;
};
ALERT("YOU HAVE INCORRECT");
}
</script>

<TABLE BORDER=0><TR><TD>

<TABLE BORDER=1>
<TR><TD><INPUT TYPE="BUTTON" VALUE="Adam" NAME="GONE" onClick="javascript:TEMP.value=this.value";>
<TR><TD><INPUT TYPE="BUTTON" VALUE="Dave" NAME="GTWO" ONCLICK="javascript:TEMP.value=this.value";>
<TR><TD><INPUT TYPE="BUTTON" VALUE="Kile" NAME="GTHREE" ONCLICK="javascript:TEMP.value=this.value";>
<TR><TD><INPUT TYPE="BUTTON" VALUE="John" NAME="GFOUR" ONCLICK="javascript:TEMP.value=this.value;">
<TR><TD><INPUT TYPE="BUTTON" VALUE="Geroge" NAME="GTWO" ONCLICK="javascript:TEMP.value=this.value;">
</TABLE>

<TD VALIGN="CENTER" ALIGN="CENTER" WIDTH=30>
<INPUT TYPE="BUTTON" VALUE=" " NAME="TEMP">
<TD>

<TABLE BORDER=1>
<TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FONE" ONCLICK="javascript:this.value=TEMP.value;TEMP.value=' '">
<TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FTWO" ONCLICK="javascript:this.value=TEMP.value;">
<TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FTHREE" ONCLICK="javascript:this.value=TEMP.value;">
<TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FFOUR" ONCLICK="javascript:this.value=TEMP.value;">
<TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FFIVE" ONCLICK="javascript:this.value=TEMP.value;">
</TABLE>

</TABLE>
<INPUT TYPE="BUTTON" NAME="CHECK" onClick="JAVASCRIPT:ALERT()" VALUE="CORRECT???">


</FORM>
</TABLE>
</BODY>
</HTML>

Hi their,

i'm trying to create an online order page

i'm having probelms calculating totals from the options

not sure if i've designed it correctly

i have 3 select options (with 4 different products in each)

a single checkbox for another single product

and a final select tag for amounts (500/1000/2500/5000)

i need to assign each select option a value then * it by the amount select

am i best using onchange/an array or ditching select tags for something easier

any help greatly appreciated

Marty

I have been playing with two options but just dont seem to get the coding right. Can someone please assist. Using ie9 but same problem with all browsers.

first snippets.
HTML:
Code:

<!-- Row 3, Col 3 purchase boxes -->
<td colspan="1" height="120" align="left">
<input style="margin-left: 60px" type="text" name="bed_359" size="3" maxlength="3" onchange="calculateValue(this.form)" /> R359</td></tr>
 
<!-- Row 10, Col 2 Order Value Box-->
<td colspan="1" align="left"><input style="margin-left: 60px" type="text" name="total" size="10" 
onfocus="this.form.elements[0].focus()" />
</td></tr>

javaScript:
Code:

// Function to calculate order value 
function calculateValue(orders) {
var orderValue = 0;
var value = 0;
var itemPrice = 0;
var itemQuantity = 0;
 
// Run through all the product fields
for(var i = 0; i < orders.elements.length; ++i) {
 
// Get the current field
formField = orders.elements[i];
 
// Get the fields name
formName = formField.name;
 
// Items price extracted from name
itemPrice = parseFloat(formName.substring(formName.lastIndexOf("_") + 1));
 
// Get the Quantity
itemQuantity = parseInt(formField.value);
 
// Update the OrderValue
if(itemQuantity >= 0) {
value = itemQuantity * itemPrice;
orderValue += value;
}
}
 
// Display the total
orders.total.value = orderValue;
}

Second code:
Code:

<!-- Row 9, Col 3 purchase boxes -->
<td colspan="1" height="120" align="left"> 
<select style="margin-left: 60px" name="shirt" value="215" onchange="calculateValue(this.form)" />
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option></select> R215</td></tr>

Java
Code:

// Function to calculate order value    
function calculateValue(orders) {
    var orderValue = 0;
    var value = 0;
    var itemPrice = 0;
    var itemQuantity = 0;
 
    // Run through all the product fields
    for(var i = 0; i < orders.elements.length; ++i) {
 
    // Get the current field
    formField = orders.elements[i];
 
    // Get the fields name
    formValue = formField;
 
    // Items price extracted from name
    itemPrice = formField;
 
    // Get the Quantity
    itemQuantity = formField.selectedIndex;
 
    // Update the OrderValue
    if(itemQuantity > 0) {
    orderValue += itemQuantity * itemPrice
    }
    }
 
    // Display the total
    orders.total.value = orderValue.toLocaleString();;
}

Please help its probably something simple.

Hi everyone,

I'm trying to capture the order in which the windows I've opened using window.open are layered on top of each other. For example, if I open three windows, starting with the first on the bottom and the third on top, but I then focus on the second window, bringing it to the top, is there a way to capture the new window order (2 on top, then 3, then 1)? I know that window.top can give me the first one, but from there, without closing it, is there a way to tell what the next one underneath it is?

Thanks in advance,
Katherine

I have a script that needs extra variables added, but need some help on how to do it. I need a textbox to add shipping charges, and also a text box to add sales tax. Then these 2 amounts need to be added to the grand total. Any help appreciated.

The link below is to the page that has the form and code:

http://spectrum-enterprise.com/sm/smorder.html

so I made this pizza order form for my ap comp sci class with javascript and html...teacher didnt realy teach javascript so i got most of javascript from online. the problem is that i have a price for everything but wen i hit the place order button, it would just reset the form...so i made it a reset button instead. heres the code:
<html>
<head>
<title>Pizza Planet</title>
<script language="javascript">

var pizzasize;
function emptyField(textObj)
{
if(textObj.value.length == 0) return true;

for(var i=0; i<textObj.value.length;i++) {
ch = textObj.value.charAt(i);
if(ch != ' ' && ch != '\t') return false;
}
return true;
}

function basecost(radioObj)
{
pizzasize = 1;
if(radioObj[0].checked) cost = 5.00; // small
if(radioObj[1].checked) {
cost = 7.00; // medium
pizzasize = 2;
}
if(radioObj[2].checked) {
cost = 9.00; // large
pizzasize = 3;
}
return cost;
}

function toppingscost(selectObj)
{
tcost = 0.0;
for(var i=0;i<selectObj.length;i++)
if(selectObj[i].selected) tcost += 0.50*pizzasize;
return tcost;
}


function extrascost(selectObj)
{
ecost = 0;
if(selectObj[0].selected) ecost += 0.00; //no extras
if(selectObj[1].selected) ecost += 1.00; // Coke
if(selectObj[2].selected) ecost += 5.00; // Hot wing 12
if(selectObj[3].selected) ecost += 3.00; // hot wing 6
if(selectObj[4].selected) ecost += 4.00; // bread sticks 12
if(selectObj[5].selected) ecost += 2.50; //bread sticks 6
return ecost;
}



function deliverycost(selectObj)
{
if(selectObj[0].selected) Dcost = 5.00;
else if(selectObj[1].selected) Dcost = 0;
return Dcost;
}

function confirmPizza(formObj)
{
if(emptyField(formObj.customer) ) {
alert("Please enter your name");
return false;
}

if(emptyField(formObj.address) ) {
alert("Please enter an address");
return false;
}

if(emptyField(formObj.email) ) {
alert("Please enter your e-mail address");
return false;
}
if(emptyField(formObj.phone) ) {
alert("Please enter your phone number");
return false;
}

total = basecost(formObj.p_size);
total +=toppingscost(formObj.tops);
total +=extrascost(formObj.xtra);
total +=deliverycost(formObj.deliv);
return confirm("The cost is " + total + ", place order?");

}



</script>

</head>
<body>
<h1>Pizza Planet</h1>


<h3><b>Pizza size</h3>
<form name="pizzaform"
onSubmit= "return confirmPizza(pizzaform)" >
</b>


Small (5.00)<input type="radio" name="p_size" value="sma">
Medium (7.00)<input type="radio" name="p_size" value="med">
Large (9.00)<input type="radio" name="p_size" value="lar">


<br>
<h3>Toppings 1</h3>
<select name="tops" size="3" multiple>
<option selected>Cheese</option>
<option>Pepperoni</option>

<option>Sausage</option>
<option>Chicken</option>
<option>Bacon</option>
<option>Pineapples</option>
<option>Jalapenos</option>
<option>Banana Peppers</option>

</select>
<h3>Toppings 2 (+.50)</h3>
<select name="tops" size="3" multiple>
<option selected>None</option>
<option>Cheese</option>
<option>Pepperoni</option>
<option>Sausage</option>
<option>Chicken</option>

<option>Bacon</option>
<option>Pineapples</option>
<option>Jalapenos</option>
<option>Banana Peppers</option>
</select>
<h3>Toppings 3 (+.50)</h3>
<select name="tops" size="3" multiple>
<option selected>None</option>

<option>Cheese</option>
<option>Pepperoni</option>
<option>Sausage</option>
<option>Chicken</option>
<option>Bacon</option>
<option>Pineapples</option>

<option>Jalapenos</option>
<option>Banana Peppers</option>
</select>


<br>
<h3>Extras <h3>
<select name="xtra" size="6" multiple>
<option selected>None</option>
<option>Coca-Cola (2-liter) (1.00)</option>
<option>Hot Wings (12) (5.00)</option>
<option>Hot Wings (6) (3.00)</option>
<option>Bread Sticks (12) (4.00)</option>
<option>Bread Sticks (6) (2.50)</option>
</select>
<br>
<br>
<h3>Is this delivery or carryout?</h3>
<select name="del" size="2" multiple>
<option>Delivery</option>
<option>Carryout</option>
</select>


<hr />
Name
<input type="text" size="20" maxlength="50" name="customer">


Address
<textarea name="address" cols="40" rows="3">
</textarea>


Email <input type="text" size="20" maxlength="50" name="email">
Phone <input type="text" size="20" maxlength="20" name="phone">
<hr>
<input type="reset" value="Reset">
</form>

<hr>
Thank you for ordering at Pizza Planet.
</body>
</html>

Hi,

I have a javascript function that is formatting data before it is being passed along to an Ajax call. The same function is formatting data for two variables but it seems as though the first call to the is being preempted by the same function call for the second variable's data formatting. On top of that the function does not seem to finish execution by the time it reaches the Ajax call so none of the data seems to be passed along.

Here's a condensed version at what I'm dealing with:

Code:

var data_group1 = FormatData('type_1');
var data_group2 = FormatData('type_2');

Ajax(data_group1, data_group2);

How can I ensure that the first call to FormatData is finished before the next call to it begins. Additional how can I prevent the Ajax function from executing until the first two lines have executed.

Thanks a ton.

Hello all,

I am just starting out trying to learn javascript and I am looking for a good forum to help me get through all the roadblocks I'm sure to hit. This looks like a very active place so hopefully I'll find some good help!

Right now I'm going through a tutorial series at webmonkey. Here is the lesson I am currently working on: http://www.webmonkey.com/2010/02/JavaScript_Tutorial_-_Lesson_3/#Getting_Framed

At the bottom of the page they give you a homework assignment which is to re-create this page using html and javascript.


This page has 2 row frames. I re-created these frames and the top frame initially has a page called "navigation" loaded and the bottom page initially has a page called "explorer" loaded. If you click the monkey image at the right in the "navigation" frame, it opens a new page called "brand" in the bottom frame. This "brand" page has the same monkey image as the "navigation" page but unlike the other monkey image, this one changes when you mouseover it. If you mouseover it again, it changes to another image, and a third mouseover brings you back to the original monkey image. If you click on one of the images, it swaps the monkey image in the "navigation" frame with that image. The idea is that you have 3 images to chose from in the "brand" page that you can designate as the logo in the "navigation" page. I have no problem re-creating this effect. Here is the code I used to re-create this:

I initialized these variables in the <head> of my page:

Code:

	<script language="JavaScript">
	
	var temp = "";
	
	var img1 = 'http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/brand_me_files/monkey.gif';
	
	var img2 = 'http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/brand_me_files/thau.gif';
	
	var img3 = 'http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/brand_me_files/sky.gif';
	
	
	</script>

Then I wrote this in the body of my page:

Code:

<a onclick="parent.navigation.document.logo.src=img1;" onmouseover=" temp=img1; img1=img2; img2=img3; img3=temp; document.the_image.src=img1;" href="#">
	<img src="http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/brand_me_files/monkey.gif" name="the_image"></a>

Out of curiosity, I switched the order of onmoseover and onclick so that onmouseover came first like this:

Code:

<a onmouseover=" temp=img1; img1=img2; img2=img3; img3=temp; document.the_image.src=img1;" onclick="parent.navigation.document.logo.src=img1;" href="#">
	<img src="http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/brand_me_files/monkey.gif" name="the_image"></a>

The page still worked in Firefox, but when I viewed the source (using firebug), onclick was still first and then onmouseover. I deleted my history and refreshed the page and still onclick was coming up first when I viewed the source. Does Firefox have an auto-correct feature that is forcing onclick to be first? Is there an order when using event handlers? Does onclick always have to come before onmouseover?


Also, this code worked in Firefox and Safari, but it did not work in Chrome. Both with onclick and onmouseover first, I was able to mouseover and rotate through the images in Chrome, but whenever I clicked on an image the image was not swapped in the "navigation" page. Why?

The "navigation" page also has a green button and a yellow button that change the background of the bottom frame to their respective color when clicked using the bgColor property. This effect also works in Firefox and Safari, but not in Chrome. Why? Do I have a setting in Chrome activated that is preventing this or does Chrome not recognize this code?


I know this was long-winded but I'm a beginner so don't go too hard on me! Thanks in advance!

Hello Guys, I have been grabbing good ideas and code from everywhere to build an online order form. I have no skill programming, but i have managed to almost finish it. However i still have two thing I cant done. Hope you can help me.
1. If any product of the "Product #2 drop-down menu" is selected, then "shipping drop-down menu" should only have "Post office option" enabled.

2. If "Shipping drop-down menu" is 7-11 or Family Mart, then "Convenience store text box" should be enabled.

You can check the whole code he http://dl.dropbox.com/u/21610873/code.txt

Thanks