I am new in Javascript and trying how to get variables from iframe to child iframe (locally). The 1st iframe (iframesrc.php) can show variables from the parent (index.php) but the 2nd iframe (iframesrc2.php) cannot. I need the 2nd iframe to show variables from the 1st without losing all variables when clicking the button "insert ticket". Please help.. Thanks in advance. And sorry for my english..
Here are my codes (index.php, iframesrc.php, iframesrc2.php) :
index.php
index.php contains ajax script (in header) to post variables to iframe. It works and successfully show a variable on target page (iframesrc.php)
<!doctype html>
<html>
<head>
<title>Post to an iFrame using Ajax</title>
<script type='text/javascript' charset='utf-8'>
function ajax(m,u,p,c){
/*
m=method
u=url
p=params {name:value}
c=callback
*/
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if( xhr.readyState==4 && xhr.status==200 )c.call(this,xhr.response);
};
var params=[];
for( var n in p )params.push(n+'='+p[n]);
switch( m.toLowerCase() ){
case 'post': p=params.join('&'); break;
case 'get': u+='?'+params.join('&'); p=null; break;
}
xhr.open( m.toUpperCase(), u, true );
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send( p );
}
function initialise(){
var bttn=document.querySelectorAll('input[type="button"]')[0];
bttn.onclick=function(event){
var params={};
var fd=new FormData( document.forms['myform'] );
for( var key of fd.keys() ) params[key]=fd.get(key);
ajax.call( this, 'post', document.querySelectorAll('iframe[name="ifr"]')[0].src, params, cbfd );
};
}
function cbfd(r){
var iframe=document.querySelectorAll('iframe[name="ifr"]')[0].contentWindow.document;
iframe.body.innerHTML=r;
}
document.addEventListener('DOMContentLoaded',initialise,false);
</script>
</head>
<body>
<form name="myform" method="post">
<input name="tid" value="<?php if(isset($_REQUEST['tid'])) { echo htmlentities($_REQUEST['tid']); }?>" type="text" placeholder="VAL1" />
<input type="button" value="Generate" />
</form>
<iframe name="ifr" src="iframesrc.php"></iframe>
</body>
</html>
iframesrc.php
iframesrc.php contains script that store variables (value 1) by echoing :
<?php
echo $_POST['tid'];
?>
And it works. Also contain an ajax script at header to show value 2 at the next target page / iframesrc2.php (not work). Please help me :(
<!doctype html>
<html>
<head>
<title>iframesrc.php</title>
<script type='text/javascript' charset='utf-8'>
function ajax(m,u,p,c){
/*
m=method
u=url
p=params {name:value}
c=callback
*/
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if( xhr.readyState==4 && xhr.status==200 )c.call(this,xhr.response);
};
var params=[];
for( var n in p )params.push(n+'='+p[n]);
switch( m.toLowerCase() ){
case 'post': p=params.join('&'); break;
case 'get': u+='?'+params.join('&'); p=null; break;
}
xhr.open( m.toUpperCase(), u, true );
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send( p );
}
function initialise(){
var bttn=document.querySelectorAll('input[type="button"]')[0];
bttn.onclick=function(event){
var params={};
var fd=new FormData( document.forms['myform'] );
for( var key of fd.keys() ) params[key]=fd.get(key);
ajax.call( this, 'post', document.querySelectorAll('iframe[name="ifr"]')[0].src, params, cbfd );
};
}
function cbfd(r){
var iframe=document.querySelectorAll('iframe[name="ifr"]')[0].contentWindow.document;
iframe.body.innerHTML=r;
}
document.addEventListener('DOMContentLoaded',initialise,false);
</script>
</head>
<body>
<?php
echo $_POST['tid'];
?>
<form name="myform" method="post">
<input name="notikjarkom" value="<?php if (isset($notikjarkom)) { echo htmlentities($notikjarkom); }?>" type="text" placeholder="VAL2" />
<input type="button" value="Insert Ticket" />
</form>
<iframe name="ifr" src="iframesrc2.php"></iframe>
</body>
</html>
iframesrc2.php
iframesrc2.php is the second iframe (the child iframe that I want it to show the variable requested from iframesrc.php
<!doctype html>
<html>
<head>
<title>iframesrc2.php</title>
</head>
<body>
<?php
echo $_POST['notikjarkom'];
?>
</body>
</html>
Here is the screenshot : image
When I filled a value (value 1) and clicked Generate, the value 1 is successfully shown in iframesrc.php, but when I then filled a value (value 2) and clicked Insert Ticket, the value 2 not shown in the second iframe (iframesrc2.php) Please help me...
