My question is somewhat difficult to explain. What I am trying to do is, I have a button on a certain page. When I press that button, I must be able to access elements of a form that is located on another page (without having the other page open).
Pressing that button will edit some of the elements in the form from that "unopened" page, and then post it, all this without opening any extra popup/tab/window. After the form has been posted, the button will disappear.
The form in question contains unique parameters that can't be retrieved without accessing its particular page, so I cannot emulate the form in standalone.
Some of my guesses are to use a dynamic iframe set to "display: none", or Ajax, but otherwise I'm not exactly sure if it is possible and how to do it.
Would anybody have some ideas? (sorry if the question isn't very clear, I tried my best to describe the problem)
Try using frameset.
given below sample code which have 3 pages
1. page 1 is the parent document which contains two frames.
2.frame1 refers to page2
3.frame2 refers to page3
test1.htm
<html>
<head>
<title>test</title>
<frameset rows="25px,*" frameborder="0" framespacing="0" >
<frame name="Frame2" id="Frame2" src="test2.htm"/>
<frame name="Frame1" id="Frame1" src="test3.htm"/>
</frameset>
</head>
</html>
test2.htm
<html>
<script>
var global="testing"
</script>
</html>
test3.htm
<html>
<script>
alert(parent.window.frames[0].global);
parent.window.frames[0].global="local"
function test()
{
alert(parent.window.frames[0].global);
}
</script>
<body>
<input type="button" onclick="test()" />
</body>
</html>
In the page test2 the value of global can be change from the page test3.htm.
I did it this way, using jQuery:
Acquire HTML code from the form page using $.get()
Extract the form node from the HTML string
Create an hidden iframe
Parse the form's HTML inside the new iframe
Modify the form's values;
"URLEncode" the form's data using jQuery's .serialize();
Post the serialized data to the target using $.post(), with a
callback function receiving the response
If response indicates success, hide the button and remove the hidden
iframe
I decided to extract the form out of the HTML string returned by $.get(), since parsing it won't require to load the whole form page before using the actual form as an object. Using an hidden iframe for parsing is probably not the most "professional" way, but it works.
Related
Say I have a page a.php and want to get a table element using it's id from another page b.php. Know it have been asked but only answers were in Jquery, any way of doing it with pure js?
Thanks!
If you mean accessing data from another tab/window, that is possible via acquiring a reference to it. For example if you open it yourself:
<html>
<head>
<script>
var otherdoc;
function create(){
otherdoc=window.open("about:blank","otherwindow").document;
otherdoc.open();
otherdoc.write("<table border='1'><tr><td id='data'>aaa</td><td>ccc</td></tr></table>");
otherdoc.close();
}
function check(){
alert(otherdoc.getElementById('data').innerHTML);
}
function modify(){
otherdoc.getElementById('data').innerHTML="bbb";
}
</script>
</head>
<body>
<button onclick="create()">Create</button>
<button onclick="check()">Check</button>
<button onclick="modify()">Modify</button>
</body>
</html>
When you click on the first button, the window.open line opens a new window/tab, and a reference to its document is kept. "about:blank" could be an actual URL - here instead a table is written there manually.
The other two buttons access and modify a cell in the table.
Suggested sequence for pushing the buttons: Create, Check, Modify, Check.
I have a form which is placed in an IFrame.I have added javascript function for validation. It will rise an error message when click submit button without filling mandatory fields.
The form contains more than 8 fields. The error message will be displayed in top of the page.
So when click the submit button, it stays the bottom of the page. So that, the error message is not visible.
For Scroll to up in an iframe, I have added the following code,
parent.parent.window.scroll(0,0);
It takes me to the top of the page in iframe.But , Skips the Javascript validation. It passes the request without validation.
Please help me on this one.
Thanks in advance
Set an id for the error's wrapping div, then use JavaScript's window.location move internally to this id, after - and depending- the mandatory field validation code (you can put it in a conditional statement).
An example on how to use it:
<!DOCTYPE html>
<html>
<head>
<script>
function scroll(){
window.location = '#error';
}
</script>
</head>
<body>
<div id='error'>
<p>Error: This is an error message.</p>
</div>
<iframe src="http://www.yahoo.com" width="400" height="800">
</iframe>
</br>
<input type="button" onclick="scroll()" value="Scroll"></input>
</body>
</html>
You can also use jQuery to scroll smoothly to it:
http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery
Ok my code is as follow:
<body>
<iframe>
<script>
$(function( {
$('form).submit();
});
</script>
<form>
<input type="file" name="myfile"/>
</form>
</iframe>
</body>
this is an iframe inside another page which has a form with upload files inside submitted via jQuery.
Now i'm wondering if it's possible to hide the page loading when the form is submitted, since i'm into another page and not into the iframe page directly.
^ remove this animation from browser when iframe form is submitted
Yes it can be done but instead you submit the form you should call post service from jquery to hide loding on page
Your script inside the iframe, should be:
$(function() {
$('form').submit();
});
That wouldn't have executed otherwise.
The way you are using text inside the frame, is for when Javascript is disabled on the client.
You can come across some problems also with frames. Can you not load the page contents into a DIV?
I have two html pages one is parent.htm and other is child.html where i have given href in parent.htm' tochild.html, here i have to access the elements ofparent.htminchild.html`, here are my two files
parent.htm
<!DOCTYPE html>
<html>
<body>
<form>
<input id=text1 type=text name="test2">
Open kid
</form>
</body>
</html>
child.html
<html>
<script type="text/javascript">
function parent(){
//here i want to access values from parent.htm page, but does not work
var value = parent.getElementById('text1').value;
var value2=top.getElementById('text1').value;
alert(value);
}
</script>
<body onload="parent()">
<form>
</form>
</body>
</html>
Thanks in advance
Probably the easiest way to do what you want is through a cookie. It's a small text file stored on the client that can persist values across pages. If you don't specify an expiration date, the cookie will expire when the user closes their browser.
Cookie tutorial
Edit
Something else you could do is use Javascript to submit the form by clicking on the link. I think it's formname.submit() - which would allow you to read the values out of the form post. (Though it would be a little more work than just reading the cookie)
If you're only passing one or two fields I'd use the cookie. More than that you may want to consider submitting the form through Javascript.
First change the following:-
Open kid
to :-
Open kid
target="_self" means that the child page will open in the same parent window, effectively destroying the parent and its code.
Afterwards, access the parent's form textbox element with:-
var parentTextBox = window.opener.document.getElementById('text1');
I think you cannot do that, at least the way you are trying.
Once you clicked on "Open kid", your current page will be replaced by the new one, so you can't access that attribute.
You should be able to get around this by using cookies, passing the needed values in the url or with Web Storage.
You should be able to user window.opener to grab a reference to the parent window.
var parent = window.opener
I see -- you cannot access DOM elements from a previous page via javascript (AFAIK).
This is traditionally handled with HTTP post variables, passing the form variables collection to the subsequent page via some back-end procedures.
Or (as Moje notes) open the page in a new window so you can access the parent with window.opener
parent.htm
<!DOCTYPE html>
<html>
<body>
<form method="GET" id="myform" action="child.html">
<input id=text1 type=text name="test2">
Open kid
</form>
</body>
</html>
child.html
<!DOCTYPE html>
<html>
<body onload="alert(window.location.toString().split('?')[1].split('=')[1])">
</body>
</html>
Might contain some typo, but the idea is to submit form by GET to the child and then read GET parameters from window.location after child.html is loaded.
I have a page with an iframe that has no source on page load and just uses hardcoded html like this:
<iframe id="theframe" src="">
<html>
<body>
<form name="theform" action="http://domainB.com/new" method="POST">
<input type="text" />
</form>
</body>
</html>
</iframe>
The form is then submitted in jQuery using
$('#theform').submit();
This causes the source of the iframe to change from nothing (same domain) to domainB.com where the form data is sent and stored.
I then delay 1s to show success msg and then wish to set the frame back to it's original contents by changing the source back to nothing (same domain) and appending the original form, like this:
$('iframe').attr('src', '');
$('iframe').contents().find('body').empty();
$('iframe').contents().find('body').append('<form name="theform" action="http://domainB.com/new" method="POST"><input type="text" /></form>');
However it's not working... Is this cross site scripting even though I'm not trying to access the inner content of domainB, I'm just setting the src of the iframe back to domainA??
If so, is there anyway to set the src once it's been changed to a different domain?
(As I wrote the last sentence I realized I could just delete the iframe and replace it with a new one, I think?, but I'd still like to know if changing the source is considered cross site and thats why it's not working?)
This just returns true or false.
$('iframe').attr('src') == '';
Maybe you're looking for this:
$('iframe').attr('src', '');