Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Aug 2003
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how to accessing iframe page elements

    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

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Code:
    <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
    Code:
    <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.

  • #3
    New Coder
    Join Date
    Aug 2003
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

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

  • #4
    New Coder
    Join Date
    Aug 2003
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    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;
    	
    }

  • #5
    New Coder
    Join Date
    Aug 2003
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Itís solved. Thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •