JavaScript Problem: Code Access Between Frames

In summary, the conversation discusses a problem with creating a page with two frames, one with items and prices and the other with a receipt form. The issue is that the code on the left frame cannot access the elements on the right frame. The solution is to define a variable for the second form and specify the frame in which it is located. This allows for the receipt to be updated and the script to function properly.
  • #1
prosteve037
110
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
  • #2
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
 
  • #3
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.
 
  • #4
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 :]
 
  • #5
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;
 
  • #6
Would I need to change the variable "theForm" as well then?
 
  • #7
Yes. Since you now have two frames, the expression document.form1 isn't defined.
 
  • #8
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! :]
 

1. What is "JavaScript Problem: Code Access Between Frames"?

"JavaScript Problem: Code Access Between Frames" refers to the issue of accessing JavaScript code and data between different frames on a webpage. Frames are separate sections of a webpage that can contain different HTML documents. Iframes, or inline frames, are commonly used to embed one webpage within another. However, due to security concerns, JavaScript code and data cannot be accessed between frames that are from different domains.

2. Why is it a problem to access code between frames?

Accessing code between frames can be a security risk as it allows one webpage to potentially manipulate the content of another webpage. This can be used maliciously to steal sensitive information or compromise the functionality of a webpage. As a result, browsers have implemented restrictions on cross-frame scripting to prevent this type of vulnerability.

3. How can I access code between frames?

In order to access code between frames, both frames must be from the same domain. This means that the webpages must have the same origin, which includes the protocol (http/https), domain, and port. If the frames are from the same domain, you can use the window.parent or window.frames methods to access the parent or child frame, respectively. However, this method is only possible if the frames are from the same origin.

4. What are the alternatives to accessing code between frames?

If the frames are from different domains, there are alternative methods for communication, such as using window.postMessage() or using a server-side solution. window.postMessage() allows for secure messaging between frames, but it requires both frames to have access to the same JavaScript code. A server-side solution involves sending data between frames through a server, which can be more complex to implement but allows for communication between frames from different domains.

5. How can I prevent cross-frame scripting vulnerabilities?

To prevent cross-frame scripting vulnerabilities, it is important to ensure that all frames on a webpage are from the same domain. Additionally, it is recommended to properly sanitize and validate user input to prevent malicious code from being injected into the webpage. It is also important to regularly update and patch any known security vulnerabilities in your web application.

Similar threads

  • Programming and Computer Science
Replies
1
Views
1K
  • Engineering and Comp Sci Homework Help
Replies
21
Views
2K
  • Programming and Computer Science
Replies
1
Views
1K
  • Programming and Computer Science
Replies
21
Views
5K
  • Programming and Computer Science
Replies
24
Views
1K
  • Special and General Relativity
3
Replies
78
Views
4K
  • Engineering and Comp Sci Homework Help
Replies
8
Views
2K
  • Advanced Physics Homework Help
Replies
13
Views
2K
  • Programming and Computer Science
Replies
9
Views
3K
  • Programming and Computer Science
Replies
2
Views
858
Back
Top