JavaScript Problem: Code Access Between Frames

  • Context: Comp Sci 
  • Thread starter Thread starter prosteve037
  • Start date Start date
  • Tags Tags
    Code Frames Javascript
Click For Summary

Discussion Overview

The discussion revolves around a JavaScript problem related to accessing and updating data between two frames in a web page. Participants explore how to transfer order details from a left frame containing item selections to a right frame displaying a receipt. The conversation includes technical challenges, code snippets, and attempts to resolve issues with variable accessibility across frames.

Discussion Character

  • Technical explanation
  • Debate/contested
  • Homework-related
  • Mathematical reasoning

Main Points Raised

  • The original poster describes their requirement for a page with two frames and expresses difficulty in having the right frame access data from the left frame.
  • Some participants suggest using the parent frame reference to access elements in the right frame, indicating the need for a specific syntax to reference the right frame's variables.
  • One participant proposes that the original code's reference to the form may be incorrect due to the frame hierarchy, suggesting an alternative way to access the receipt text area.
  • Another participant points out that the variable for the form in the left frame should be defined correctly to avoid null reference errors.
  • The original poster later confirms that they resolved the issue by defining a new variable for the second form and updating the code accordingly to successfully pass the order details.

Areas of Agreement / Disagreement

Participants generally agree on the need to correctly reference elements across frames, but there are differing suggestions on the exact syntax and approach to achieve this. The discussion reflects a collaborative effort to troubleshoot the problem without a definitive consensus on the best method until the original poster finds a solution.

Contextual Notes

There are unresolved aspects regarding the specific frame structure and variable definitions that may affect the implementation. The discussion highlights the complexity of working with frames in JavaScript, particularly in terms of scope and accessibility.

Who May Find This Useful

Web developers or students learning about JavaScript and frame manipulation, particularly those facing similar issues with cross-frame data handling.

prosteve037
Messages
110
Reaction score
3

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!
 
Physics news on Phys.org
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
 
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.
 
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 :]
 
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;
 
Would I need to change the variable "theForm" as well then?
 
Yes. Since you now have two frames, the expression document.form1 isn't defined.
 
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! :]
 

Similar threads

Comp Sci Optimal code for the array problem
  • · Replies 21 ·
Replies
21
Views
3K
Undergrad Request for Input: 2D Minkowski Spacetime Diagram Generator
  • · Replies 6 ·
Replies
6
Views
3K
Java How to paint an element in screen using javascript?
  • · Replies 1 ·
Replies
1
Views
2K
Comp Sci Using Single Source Shortest Path Algorithm to find the longest path
  • · Replies 4 ·
Replies
4
Views
2K
HTML/CSS Gravity Simulator: JavaScript & HTML Canvas Code Review
  • · Replies 1 ·
Replies
1
Views
2K
Comp Sci Implementing a PriorityQueue w/ a Doubly-Linked List (Java)
  • · Replies 2 ·
Replies
2
Views
4K
Comp Sci Java Programming Homework: Create Sandwich & TestSandwich Classes
  • · Replies 2 ·
Replies
2
Views
7K
JavaScript Problem using dat.GUI controller library
  • · Replies 9 ·
Replies
9
Views
4K
Comp Sci Analyzing Homework2Class's characterCounter() Method
  • · Replies 4 ·
Replies
4
Views
6K
Making a program to interpret equations. Am I going about this wrong?
  • · Replies 19 ·
Replies
19
Views
3K