...

View Full Version : [Solved] Retrieve values from iframes, insert into hidden form



Greatheart
01-15-2012, 07:40 PM
Hi there!

I have two iframes, within each iframe are four drop down list boxes.
On my main page I have one text input box and one text area input box.

Aim:
1. Retrieve all the values.
2. Place them into a hidden form.
3. Submit the hidden form data to a Google Docs Spreadsheet.

I need to export: (in this order, all are within form tags)
"List1,2,3,4" (drop down lists) from form "initiatorform" within frame "initiatorframe" which is "initiator.html"
"List5,6,7,8" (drop down lists) from form "finisherform" within frame "finisherframe" which is "finisher.html"
"ComboName" (Text input box) and "Description" (text area input) from form "indexform" within "Index.html"

I've been trying different pieces of code for the last few days with no luck. I've been using an alert to test whether the value has been recorded but it won't even pop up at all.

I've been trying to use this example (http://www.sitepoint.com/forums/printthread.php?t=290878). Is this the correct format for what I'm trying to do?

<script language="JavaScript" type="text/javascript">
<!--
function whatever(iframeid,iframename){
mmspobj=document.getElementById(iframeid);
if (mmspobj.tagName=='IFRAME'){
mmsiobj=window.frames[iframename].document.getElementId('myfield1ID').value;
alert(mmsiobj);
}
alert(mmsiobj);
}
//-->
</script>
I'm just trying to retrieve the value atm, once its working I can set the hidden form data.


I'm sorry if this is something simple but I've been teaching myself over the last week while making Google Apps.

Any help would be greatly appreciated.

Logic Ali
01-16-2012, 01:16 AM
function fieldFromIframe( iframeId, formId, elemName )
{
return document.getElementById( iframeId ).contentWindow.document.getElementById( formId )[ elemName ].value;
}

Before calling the function, ensure that the iframe's content is loaded.

Old Pedant
01-16-2012, 01:19 AM
If the HTML files being displayed in the <iframe>s are *NOT* from the same domain as the HTML page that comprises the main page, then you are out of luck. You can't do cross-domain scripting (in general...there are ways around it if you control both domains).

If they are in the same domain, then you are working too hard. Make up your mind whether you want to use the ID of the iframes or the name of each, and stick with one or the other.

*****

Beaten by three minutes. I really am slowing down. <grin/>

Greatheart
01-16-2012, 09:09 AM
Thank you for the fast replies!

@Old Pedant:
I'm making a Google Chrome App so all the pages will be included with the package, only the Google Docs Spreadsheet will not be within the same domain.

I'll stick with the ID's, thanks for the advice.


@Logic Ali
Thanks for the code snippet!

My updated code is now: (Is this how your code should be used?)

<script language="JavaScript" type="text/javascript">
function FetchData( IDInitiatorFrame, IDInitiatorForm, IDList1 )
{
return document.getElementById( IDInitiatorFrame ).contentWindow.document.getElementById( IDInitiatorForm )[ IDList1 ].value;
}
</script>

<script language="JavaScript" type="text/javascript">
function FormSubmit( IDInitiatorFrame, IDInitiatorFrame, IDList1 )
{
FetchData(); //Ensure Frame Contents are Loaded
alert("Hiya"); //Purely for Testing
mmspobj = document.getElementById( IDInitiatorFrame );
if (mmspobj.tagName=='IFRAME'){
mmsiobj = document.getElementById( IDInitiatorFrame ).contentWindow.document.getElementId( IDInitiatorForm )[ IDList1 ].value;
alert(mmsiobj);
}
alert(mmsiobj);
}
</script>

Its still not working and I don't know why. None of the alerts are happening and I've triple checked all references. (ID's etc.)

I have one other script that is running a "window.attachEvent", could that be conflicting somehow?

Logic Ali
01-16-2012, 10:08 AM
@Logic Ali
Thanks for the code snippet!

My updated code is now: (Is this how your code should be used?)
No it isn't



FetchData(); //Ensure Frame Contents are LoadedNo it doesn't.

The function I gave you returns the value of a form field contained in an iframe's document when you pass it:

The ID of the iframe, The ID of the form, The name ( not iD ) of the form element.

Greatheart
01-16-2012, 12:52 PM
Whoops sorry got confused with using just ID's.

Is this better? ("List1" is the Name of the form element rather than "IDList1")

<script language="JavaScript" type="text/javascript">
function GetList1( IDInitiatorFrame, IDInitiatorForm, List1 ) {
var List1Get = document.getElementById( IDInitiatorFrame ).contentWindow.document.getElementById( IDInitiatorForm )[ List1 ].value;
return List1Get;
}
</script>

<script language="JavaScript" type="text/javascript">
function FormSubmit() {
GetList1( IDInitiatorFrame, IDInitiatorForm, List1 ); //Call GetList1 function
alert(List1Get); //Display returned value
}
</script>
I still can't get the alert to work. :confused:

I'm just trying to get the value as a variable, then I can set the hidden field to that variable. (Unless theres a way I can return the value straight to the hidden field?)

Old Pedant
01-16-2012, 08:21 PM
You do this:


GetList1( IDInitiatorFrame, IDInitiatorForm, List1 );
but you don't show where you assign values to any of those three variables.

Then, too, you do

alert(List1Get);

but that variable is not defined. Oh, you defined it as a local variable in the function, but when the function returns, that variable disappears.


Shouldn't you have done


<script language="JavaScript" type="text/javascript">
function FormSubmit() {
var IDInitiatorFrame = "Frame1";
var IDInitiatorForm = "myForm";
var List1 = "mySelect";
var gotit = GetList1( IDInitiatorFrame, IDInitiatorForm, List1 ); //Call GetList1 function
alert( gotit ); //Display returned value
}
</script>

Old Pedant
01-16-2012, 08:26 PM
You also seem to be of the impression that you must use the same variable names when calling a function as are used as the argument names *in* the function.



<script language="JavaScript" type="text/javascript">
function FetchData( theframeID, theformID, thefieldName )
{
return document.getElementById( theframeID )
.contentWindow
.document.getElementById( theformID )[ thefieldName ]
.value;
}
</script>

<script language="JavaScript" type="text/javascript">
function FormSubmit() {
var list1Value = FetchData( "myFrame", "myForm", "List1" );
alert(list1Value); //Display returned value
}
</script>

Old Pedant
01-16-2012, 08:31 PM
Finally, if you are going to get several values from the same form, then I'd just do this:


<script language="JavaScript" type="text/javascript">
function FormSubmit() {
var form = document.getElementById("hiddenform"); // the target form with hidden fields...use correct id

// locate the form in the first frame
var frameform = document.getElementById( "initiatorframe" )
.contentWindow
.document.getElementById( "intiatorform" );

form.List1.value = frameform.List1.value;
form.List2.value = frameform.List2.value;
form.List3.value = frameform.List3.value;
form.List4.value = frameform.List4.value;

// locate the other form in the 2nd frame
frameform = document.getElementById( "finisherframe" )
.contentWindow
.document.getElementById( "finisherform" );

form.List5.value = frameform.List5.value;
form.List6.value = frameform.List6.value;
form.List7.value = frameform.List7.value;
form.List8.value = frameform.List8.value;

// finally, the indexform in the main window:
var iform = document.getElementById("indexform");

form.ComboName.value = iform.ComboName.value;
form.Description.value = iform.Description.value;

}
</script>

(That assumes the names of the hidden fields are the same as the names in the other forms, but they don't have to be. Just use the actual names, instead.)

Greatheart
01-17-2012, 10:40 AM
Old Pedant you are a god...

Thank you so much for the code snippet and thanks for explaining where I was going wrong.

The nearest programming language I've done to JS is Delphi (Pascal) so I'm a decade or two behind the times. :D

So:
1. I must declare the variables before using a sub-function that includes variables within the name.
2. Also I can use separate variable names between functions within the same script.


I've tested the code and all the variables are passing fine between the frames and the hidden form, now I just need to get it to send to my Google Spreadsheet. :mad:


Thank you both so much for all the help! I got so bored of trying scripts yesterday I actually started playing games and having fun! Oh the humanity! I can finally get this app working before the Guild Wars 2 release. Yay!


**Edit**
[Solved]If you happen to know how I can get this to send to a Google Docs Spreadsheet I would be greatly appreciative!

By using a hidden iframe and loading the variables directly into a URL I managed to remove my previous hidden form. This also prevents the page from loading a Google Confirmation Page.

My new code:

<script type="text/javascript">
function FormSubmit()
{
var frameform = document.getElementById( "IDInitiatorFrame" )
.contentWindow
.document.getElementById( "IDInitiatorForm" );
HList1 = frameform.List1.value;
HList2 = frameform.List2.value;
HList3 = frameform.List3.value;
HList4 = frameform.List4.value;

frameform = document.getElementById( "IDFinisherFrame" )
.contentWindow
.document.getElementById( "IDFinisherForm" );
HList5 = frameform.List5.value;
HList6 = frameform.List6.value;
HList7 = frameform.List7.value;
HList8 = frameform.List8.value;

var iform = document.getElementById( "IDIndexForm" );
HList9 = iform.ComboName.value;
HList10 = iform.ComboDescription.value;

var url = "https://docs.google.com/spreadsheet/formResponse?formkey=dFlZ6MQ&entry.0.single=" + HList1 + "&entry.1.single=" + HList2 + "&entry.2.single=" + HList3 + "&entry.3.single=" + HList4 + "&entry.4.single=" + HList5 + "&entry.5.single=" + HList6 + "&entry.6.single=" + HList7 + "&entry.7.single=" + HList8 + "&entry.8.single=" + HList9 + "&entry.9.single=" + HList10;
document.getElementById("IDSubmitFrame").src = url;
alert('Combo Submitted! Thank you for your contribution.');
}
</script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum