Jump to content
  • 0

Pass Parameter from iframe to parent page



I have a single record update form deployed on my webpage which contains an iframe inside an html block on the parent page. This iframe collects a signature. I need help getting the signature to pass to the parent page once the iframe has been submitted.

How can I pass a parameter from an iframe to the parent page it is deployed in?

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

What if I am trying to get a value from a caspio Popup datapage to the caspio Parent datapage? 

On my submission form, I have a spot for 'Customer ID' with a button next to it. If you click the button, a Tabular Report pops up where the user can search our customer table to find the ID. 

I am trying to make it so the user can just click on the ID they want - or a button next to it - on the popup tabular report and automatically have that value populate the Customer ID input field on the Parent datapage.

Is something like this possible? I am struggling to find anything to help me start this.

Link to comment
Share on other sites

  • 0

Yes, it is possible! Below is the html for the button I created on the Popup page. First, I was just going to make this button copy the customerID value to the clipboard so that the user can paste the value into the parent page. I am still using this same button for the workflow. This button (and the script) is in an HTML block on the popup results page.

<input id="in[@field:CG_Client_ID]" style="width:1px; opacity:0;">

<div class="tooltip">

<button type="button" id="bt[@field:CG_Client_ID]" class="copyBut">
  <span class="tooltiptext" id="myTooltip[@field:CG_Client_ID]">Copy to clipboard</span>


Then, for the script, the two window.opener.document lines are the ones that copies the value to the parent page. The tooltip is just a nice little message to the user confirming it was copied. I didn't need to add any script to the parent page. 

document.getElementById('bt[@field:CG_Client_ID]').addEventListener("click", function(){

  window.opener.document.querySelector('input[id^="InsertRecordIG_Sheet_Table_Customer_"]').value = "[@field:CG_Client_ID]";
  window.opener.document.querySelector('input[id^="InsertRecordIG_Sheet_Table_Customer_"]').dispatchEvent(new Event('change'));


  var tooltip = document.getElementById("myTooltip[@field:CG_Client_ID]");
  tooltip.innerHTML = "Copied: " + "[@field:Primary_Alias]'s ID";


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...