...

View Full Version : how to accessing iframe page elements



atferraz
09-10-2004, 07:33 PM
Hello, I've this page to submit witch has another page in an iframe. This last one has fields that I need to submit along the first the parent. I thought to pull them to hidden fields on the main, so I also need to know how to create those on the process.

Thanks any one

sad69
09-10-2004, 08:58 PM
I'm a bit confused.. so you've got a page with a form on it. Call this page ParentPage. ParentPage has an iFrame holding another page, call it ChildPage. ChildPage has a form on it also?

So your users will be filling out the form elements on ParentPage as well as ChildPage, and on pressing the submit button on ParentPage, you want the values from ParentPage and ChildPage to be submitted?

The obvious question is why have you split your form into two pages? Why not keep everything on the one page? If you must keep them on two pages, is it possible to construct a multi-page form, where the user presses a 'next' button to get to the second page and then submit the whole form then?

But if you REALLY feel that you need to do it this way, it is possible to get this information IF and ONLY IF ChildPage resides on the same domain as ParentPage. Meaning that ParentPage cannot reside on www.domain1.com while ChildPage resides on www.domain2.com -- for security reasons, this is built into most browsers.

So if both are on the same domain, here is a small example using document.getElementById():
ParentPage.html


<html>
...
<body>
<script>
function addChildInputs() {
var iframe = document.getElementById('childFrame');
var childText = iframe.document.getElementById('childText');

var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('name', 'childText');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('value', childText.getAttribute('value'));

var parentForm = document.getElementById('parentForm');
parentForm.appendChild(hiddenInput);

return true;
}
</script>
<form id="parentForm" onsubmit="addChildInputs()" ...>
<iframe id="childFrame" src="ChildPage.html" ...></iframe>
<input type="submit" ...>
</form>
</body>
</html>


ChildPage.html


<html>
...
<body>
<form id="childForm"...>
<input type="text" id="childText" ...>
</form>
</body>
</html>


Untested, but that's the idea behind it anyway.. let me know if you run into any issues.

Hope that helps,
Sadiq.

atferraz
09-10-2004, 11:33 PM
So your users will be filling out the form elements on ParentPage as well as ChildPage, and on pressing the submit button on ParentPage, you want the values from ParentPage and ChildPage to be submitted?
You got all right,



The obvious question is why have you split your form into two pages? Why not keep everything on the one page? If you must keep them on two pages, is it possible to construct a multi-page form, where the user presses a 'next' button to get to the second page and then submit the whole form then?
Thatís a good tip, but that page on the iframe may get lot of data lines. It depends on who is the owner of the parent one. I've made that way and all the user has to do is to scroll up and down on the iframe. In the end is the same. I think. :D

I really want to thank you for that code. Workís just fine :thumbsup:

atferraz
09-11-2004, 03:58 AM
thought it work just fine. Did a functon to pass all the rows but there must bo some bugs, because only the last row gets there.


function getIframeData(formObj, iframeID)
{
var iframeObj = document.getElementById(iframeID);
var index = document.docsPagar.document.getElementById("index").value;// gets the number of rows to test

var newindex = 0 // gets the active number of rows
var data; // data temp
var tDoc;
var nDoc;
var descri;
var valorDoc;
var saldoc;
var checkBox;
var valorPagar;

var hiddenInputindex = document.createElement("input");
// shouldn't be enough only one??
// if not then the problem must be here, because this set is reused in all cycles
var hiddenInputData = document.createElement("input");
var hiddenInputTdoc = document.createElement("input");
var hiddenInputNdoc = document.createElement("input");
var hiddenInputDescri = document.createElement("input");
var hiddenInputValorDoc = document.createElement("input");
var hiddenInputSaldoc = document.createElement("input");
var hiddenInputCheckBox = document.createElement("input");
var hiddenInputValorPagar = document.createElement("input");

for(var i=0; i < parseInt(index); i++)
{
if(document.docsPagar.document.getElementById("checkBox_"+i).checked) // filter for active row
{

data = document.docsPagar.document.getElementById("data_"+i).innerText;
// get the active row
tDoc = document.docsPagar.document.getElementById("tDoc_"+i).innerText;
nDoc = document.docsPagar.document.getElementById("nDoc_"+i+"").innerText;
descri = document.docsPagar.document.getElementById("descri_"+i).innerText;
valorDoc = document.docsPagar.document.getElementById("valorDoc_"+i).innerText;
saldoc = document.docsPagar.document.getElementById("saldoc_"+i).innerText;
//checkBox = document.docsPagar.document.getElementById("checkBox_"+i).checked;
valorPagar = document.docsPagar.document.getElementById("valorPagar_"+i).value;

// all ok
alert(""+i+"\n data: "+data+"\n tDoc: "+tDoc+"\n nDoc: "+nDoc+"\n descri: "+descri+"\n valorDoc: "+valorDoc+"\n saldoc: "+saldoc+"\n checkBox: "+checkBox+"\n valorPagar: "+valorPagar);

hiddenInputData.setAttribute("type", "hidden");
hiddenInputData.setAttribute("id", "data_"+newindex);
hiddenInputData.setAttribute("name", "data_"+newindex);
hiddenInputData.setAttribute("value", data);
if(!document.getElementById("data_"+newindex)) // the ids and names are defferent
formObj.appendChild(hiddenInputData);
else
formObj.replaceChild(hiddenInputData, document.getElementById("data_"+newindex))

hiddenInputTdoc.setAttribute("type", "hidden");
hiddenInputTdoc.setAttribute("id", "tDoc_"+newindex);
hiddenInputTdoc.setAttribute("name", "tDoc_"+newindex);
hiddenInputTdoc.setAttribute("value", tDoc);
if(!document.getElementById("tDoc_"+newindex))
formObj.appendChild(hiddenInputTdoc);
else
formObj.replaceChild(hiddenInputTdoc, document.getElementById("tDoc_"+newindex))

hiddenInputNdoc.setAttribute("type", "hidden");
hiddenInputNdoc.setAttribute("id", "nDoc_"+newindex);
hiddenInputNdoc.setAttribute("name", "nDoc_"+newindex);
hiddenInputNdoc.setAttribute("value", nDoc);
if(!document.getElementById("nDoc_"+newindex))
formObj.appendChild(hiddenInputNdoc);
else
formObj.replaceChild(hiddenInputNdoc, document.getElementById("nDoc_"+newindex))

hiddenInputDescri.setAttribute("type", "hidden");
hiddenInputDescri.setAttribute("id", "descri_"+newindex);
hiddenInputDescri.setAttribute("name", "descri_"+newindex);
hiddenInputDescri.setAttribute("value", descri);
if(!document.getElementById("descri_"+newindex))
formObj.appendChild(hiddenInputDescri);
else
formObj.replaceChild(hiddenInputDescri, document.getElementById("descri_"+newindex))

hiddenInputValorDoc.setAttribute("type", "hidden");
hiddenInputValorDoc.setAttribute("id", "valorDoc_"+newindex);
hiddenInputValorDoc.setAttribute("name", "valorDoc_"+newindex);
hiddenInputValorDoc.setAttribute("value", valorDoc);
if(!document.getElementById("valorDoc_"+newindex))
formObj.appendChild(hiddenInputValorDoc);
else
formObj.replaceChild(hiddenInputValorDoc, document.getElementById("valorDoc_"+newindex))

hiddenInputSaldoc.setAttribute("type", "hidden");
hiddenInputSaldoc.setAttribute("id", "saldoc_"+newindex);
hiddenInputSaldoc.setAttribute("name", "saldoc_"+newindex);
hiddenInputSaldoc.setAttribute("value", saldoc);
if(!document.getElementById("saldoc_"+newindex))
formObj.appendChild(hiddenInputSaldoc);
else
formObj.replaceChild(hiddenInputSaldoc, document.getElementById("saldoc_"+newindex))

hiddenInputValorPagar.setAttribute("type", "hidden");
hiddenInputValorPagar.setAttribute("id", "valorPagar_"+newindex);
hiddenInputValorPagar.setAttribute("name", "valorPagar_"+newindex);
hiddenInputValorPagar.setAttribute("value", valorPagar);
if(!document.getElementById("valorPagar_"+newindex))
formObj.appendChild(hiddenInputValorPagar);
else
formObj.replaceChild(hiddenInputValorPagar, document.getElementById("valorPagar_"+newindex))
var str = "";
for(var j=0; j<newindex; j++) // the test -> only the last one is there and there is only one set of hidden inputs
{
data = document.getElementById("data_"+j).value;
tDoc = document.getElementById("tDoc_"+j).value;
nDoc = document.getElementById("nDoc_"+j).value;
descri = document.getElementById("descri_"+j).value;
valorDoc = document.getElementById("valorDoc_"+j).value;
saldoc = document.getElementById("saldoc_"+j).value;
//checkBox = document.getElementById("checkBox_"+j).value;
valorPagar = document.getElementById("valorPagar_"+j).value;
str += "\n newindex "+j+" - data: "+data+" - tDoc: "+tDoc+" - nDoc: "+nDoc+" - descri: "+descri+" - valorDoc: "+valorDoc+" - saldoc: "+saldoc+" - checkBox: "+checkBox+" - fvalorPagar: "+valorPagar
//alert(""+j+"\n data: "+data+"\n tDoc: "+tDoc+"\n nDoc: "+nDoc+"\n descri: "+descri+"\n valorDoc: "+valorDoc+"\n saldoc: "+saldoc+"\n checkBox: "+checkBox+"\n fvalorPagar: "+valorPagar);
}
alert(str);
newindex++
}
}

hiddenInputindex.setAttribute("type", "hidden");
hiddenInputindex.setAttribute("id", "index");
hiddenInputindex.setAttribute("name", "index");
hiddenInputindex.setAttribute("value", newindex);
if(!document.getElementById("index"))
formObj.appendChild(hiddenInputindex);
else
formObj.replaceChild(hiddenInputindex, document.getElementById("index"))

return true;

}

atferraz
09-11-2004, 01:14 PM
Itís solved. Thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum