JavaScript Problem: Code Access Between Frames

prosteve037 · Mar 20, 2011

Homework Statement

I'm required to make a page that has the following format:

Left Frame

Items with prices and check boxes next to them
An "Update Order" button at the bottom so the order details on the Right Frame can be updated.

Right Frame

A "receipt" form with all the selected items from the Left Frame listed with their prices.
The total price of the entire order.

However, I'm having trouble with having the Right Frame use the code on the Left Frame. I'm at a loss for how to have the Left Frame "send" the code and the data to the "Right Frame".

2. Relevant codes

If I'm not mistaken, I would need to have the "parent.---.---.value=" statement in there somewhere right?

That's about all I know however in terms of codes that are new to me.

I already know how to write the code as if it were all going to be on a single frame (which is precisely what I did so far), I just don't know how to do it for 2 separate frames :[

The Attempt at a Solution

I've written all of the JavaScript code down on the Left Frame (the frame with all the items on it) with the functions and variables all stated so the order details would be listed under "txtOrder".

But since "txtOrder" is on the Right Frame, the Left Frame can't find it and when the button is clicked, Internet Explorer says that " 'txtOrder' is null or not an object.' ".

On the Right Frame, the only code that's written is the following:

<html>
<body>
<center>
<form name="form2">
<textarea rows="30" cols="60" id="receiptText" name="receiptText"></textarea>
</form>
</center>
</body>
</html>

It's literally been days now of 4 hour nights and me stabbing my eyes to try and get this darn thing to work.

I hope this is all enough useful information for anybody who think they can help me with this. Help will greatly be appreciated.

Thanks for taking the time to read!

prosteve037 · Mar 21, 2011

No responses yet but I figured I should add more details in case anyone did know my error.

Here's the entire code for the Left Frame:

<html>
<head>
<script language="JavaScript" type="text/javascript">

var chooseItem = new Array();

chooseItem[100] = 20;
chooseItem[101] = 35;

chooseItem[200] = 50;
chooseItem[201] = 65;

chooseItem[300] = 75;
chooseItem[301] = 100;

function updateOrder()
{
var total = 0;
var orderDetails = "";
var formElement;
var theForm = document.form1;

formElement = theForm.small1;
if(formElement.checked == true)
{
orderDetails = orderDetails + "25 Small Posters: $" + chooseItem[formElement.value] + "\n";
total = total + parseFloat(chooseItem[formElement.value]);
}

formElement = theForm.small2;
if(formElement.checked == true)
{
orderDetails = orderDetails + "50 Small Posters: $" + chooseItem[formElement.value] + "\n";
total = total + parseFloat(chooseItem[formElement.value]);
}

formElement = theForm.medium1;
if(formElement.checked == true)
{
orderDetails = orderDetails + "25 Medium Posters: $" + chooseItem[formElement.value] + "\n";
total = total + parseFloat(chooseItem[formElement.value]);
}

formElement = theForm.medium2;
if(formElement.checked == true)
{
orderDetails = orderDetails + "50 Medium Posters: $" + chooseItem[formElement.value] + "\n";
total = total + parseFloat(chooseItem[formElement.value]);
}

formElement = theForm.large1;
if(formElement.checked == true)
{
orderDetails = orderDetails + "25 Large Posters: $" + chooseItem[formElement.value] + "\n";
total = total + parseFloat(chooseItem[formElement.value]);
}

formElement = theForm.large2;
if(formElement.checked == true)
{
orderDetails = orderDetails + "50 Large Posters: $" + chooseItem[formElement.value] + "\n";
total = total + parseFloat(chooseItem[formElement.value]);
}

orderDetails = orderDetails + "\n\nTotal:" + total;

theForm.receiptText.value = orderDetails;
}
</script>
</head>
<body>
<center>
<p><b>Choose which item(s) you would like to order below:</b></p>

<form action="" name="form1">
<table>
<tr>
<td width="300">
Small Posters
<br>
<img src="smallposter.jpg" width=" height=">
<br>
<input type="checkbox" name="small1" value="100"/>$20.00 - 25 Small Posters
<br>
<input type="checkbox" name="small2" value="101"/>$35.00 - 50 Small Posters
<br>
<br>
<br>
<br>
<br>
<br>
Medium Posters
<br>
<input type="checkbox" name="medium1" value="200"/>$50.00 - 25 Medium Posters
<br>
<input type="checkbox" name="medium2" value="201"/>$65.00 - 50 Medium Posters
<br>
<br>
<br>
<br>
<br>
<br>
Large Posters
<br>
<input type="checkbox" name="large1" value="300"/>$75.00 - 25 Large Posters
<br>
<input type="checkbox" name="large2" value="301"/>$100.00 - 50 Large Posters
<br>
<br>
<form>
<input type="button" value="Update Order" onClick="updateOrder();"/>
</form>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>

As you see, the parts highlighted in red are the parts of the code that I'm especially not sure about. Are these specific parts the reason why the Left Frame isn't updating the order on the Right Frame?

Thanks

Mark44 · Mar 21, 2011

I haven't done any Javascript for about 15 years, but I did have a short refresher just last week. In any case, I'm not an expert in Javascript.

If you have code in one frame that refers to variables in another frame, you need to specify which frame the variable is in. As you have described it, the left frame is probably theForm.frames[0] and the right frame is probably theForm.frames[1]. If receiptText is a textbox in the right frame, I think this will work:

Code:

theForm.frames[1].receiptText.value = orderDetails;

See if that works.

prosteve037 · Mar 21, 2011

Thanks much for the helpful reply Mark44! :]

But regrettably it didn't solve the problem :/

This time, instead of giving me " 'txtOrder' is null or not an object", it gave me " 'frame.1' is null or not an object"

Thanks again though for replying Mark :]

Mark44 · Mar 21, 2011

It might be this code that's causing problems:

Code:

var theForm = document.form1;

The hierarchy is document --> frame --> form, and document.form1 skips the frames layer.

Try this:

Code:

document.frames[1].receiptText.value = orderDetails;

prosteve037 · Mar 21, 2011

Would I need to change the variable "theForm" as well then?

Mark44 · Mar 21, 2011

Yes. Since you now have two frames, the expression document.form1 isn't defined.

prosteve037 · Mar 21, 2011

Sweet! Thanks so much for the help Mark! I finally got it! :]

The problem was that there wasn't a variable defined for the second form (form2)

What I did was make a new variable and define it like so:

...
var theReceiptForm = parent.frameRight.document.form2;
...

Then I changed the "theForm.receiptText.value = orderDetails;" to "theReceiptForm.receiptText.value = orderDetails;"

And violá! Updatable receipt and functioning script! :]

Much thanks again! :]

JavaScript Problem: Code Access Between Frames

Homework Statement

The Attempt at a Solution

Engineering Joint and Marginal Distributions of a Randomly Selected Test Answer

Engineering Drawing Acceleration Diagram with Coriolis Acceleration

Engineering Shear Stress Question (Rocker Arm & pin diameter)

Engineering Calculating the Degrees of Freedom

Engineering Kinematic study of connected rods

Engineering Plate Cam -- find the pressure angle and follower displacement

Insights Revisiting the Velocity-Time Function

Insights Remote Operated Gate Control System

Insights AI Enriched Problem Solving

Insights Thinking Outside The Box Versus Knowing What’s In The Box

Insights Why Entangled Photon-Polarization Qubits Violate Bell’s Inequality

Insights Quantum Entanglement is a Kinematic Fact, not a Dynamical Effect

JavaScript Problem: Code Access Between Frames

Homework Statement

The Attempt at a Solution

Similar threads