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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question [Solved] Retrieve values from iframes, insert into hidden form

    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. Is this the correct format for what I'm trying to do?
    Code:
    <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.
    Last edited by Greatheart; 01-17-2012 at 10:41 AM.

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Code:
    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.

  • Users who have thanked Logic Ali for this post:

    Greatheart (01-16-2012)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    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/>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?)
    Code:
    <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?

  • #5
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by Greatheart View Post

    @Logic Ali
    Thanks for the code snippet!

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

    Code:
    FetchData(); //Ensure Frame Contents are Loaded
    No 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.

  • #6
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Whoops sorry got confused with using just ID's.

    Is this better? ("List1" is the Name of the form element rather than "IDList1")
    Code:
    <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.

    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?)
    Last edited by Greatheart; 01-16-2012 at 12:57 PM.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    You do this:
    Code:
       GetList1( IDInitiatorFrame, IDInitiatorForm, List1 );
    but you don't show where you assign values to any of those three variables.

    Then, too, you do
    Code:
       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
    Code:
    <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>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    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.

    Code:
    <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>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Finally, if you are going to get several values from the same form, then I'd just do this:
    Code:
    <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.)
    Last edited by Old Pedant; 01-16-2012 at 08:38 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Greatheart (01-17-2012)

  • #10
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

    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.


    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:
    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>
    Last edited by Greatheart; 01-18-2012 at 01:50 PM.


  •  

    Posting Permissions

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