Fill Forms field from iframe

asked on September 27, 2019 • Show version history

I have a custom HTML field in the form of a button. When clicked, the button does some processing, at one point producing a variable that I would like to capture in a field on the form so I can save it to the repository.

I've been able to pull a value from the HTML by using "document.getElementById" on an attribute, but it only retrieves the beginning value and not the value after it's properly populated.

I start with:

And a script is run inside the button that ends with calling

document.getElementById("para").innerHTML="different text"

But in the CSS and JavaScript part of my form, when I call

var sometext = document.getElementById('para');
$('#q35 input').val(sometext.innerHTML);

The field gets filled with "a" every time, not "different text."

I feel like I'm very close to the solution, but I'm not experienced with this type of coding. Is there a way I can have the CSS and JavaScript fill the field in with the final value, not the beginning value?

I believe all I really need is to know how to have the CSS and JavaScript part of a form wait for a button inside the iframe to be clicked.

Thanks

0 0

replied on September 27, 2019

Let me try to understand what your button is doing.

When you click on this button, you are trying to update the innerHTML of $('#para') element, correct?

I think the first thing you need to do is check whether your button is actually updating the innerHTML.

After clicking the button, you can console log getElementById("para").innerHTML and see what happens.

Also, when are you populating $('#q35 input')? When is the button being clicked?

It's a little hard to tell the order here. If you can post a step-by-step process and simplified code, we can get a better understanding. I would try something like below;

$('#button').click(function(){

$('#para').innerHTML = 'different text';

console.log($('#para').innerHTML); // see what you get

$('#q35 input').val($('#para').innerHTML) //see if you can populate

})

1 0

View 9 previous replies

replied on September 27, 2019 • Show version history

<div id="receiptFrame">
<p id="para">Some text here</p>
</div>

<script>
document.getElementById("para").innerHTML = "Other text here";
</script>

<input id="submitBtn" type="submit" name="submitBtn" value="Submit Payment" class="btn btn--1 btn--submit">

I've simplified the HTML field to look like this.

The CSS and JS looks like this

$("#submitBtn").click(function(){
    document.getElementById('para').innerHTML = "different text";
    console.log(document.getElementById('para').innerHTML); // see what you get
    var sometext = document.getElementById('para');
    $('#q2 input').val(sometext.innerHTML);
    alert("Submitted");
  });

I had to adjust your code a little bit but when I run it like that it puts "different text" in both the console and the field. This is great for this simple test. I will need to see if it also works with the iframe form.

0 0

replied on September 27, 2019

Update: I did the same thing on the iframe form and that "click" function is not running. I assume it's because it's not finding the button by just referencing the id. In my simpler example the button in question was there from the start and there was no iframe. In this example the button in question only appears once the iframe loads.

0 0

replied on September 27, 2019

You are probably correct in that you need to wait for the iframe to load, if the button is inside it. Although I haven't done any tests, something like below should work:

$('#iframe').on('load',function(){

// click button function

})

You might want to check out posts like below:

https://stackoverflow.com/questions/3142837/capture-iframe-load-complete-event

1 0

replied on September 27, 2019 • Show version history

It appears that the iframe in question does not have an id. It simply has src and style. Would I still be able to reference it? It's inside of a div called payFrame.

I tried using this:

$('#payFrame iframe').on('load',function(){

But that's not working.

0 0

replied on September 27, 2019 • Show version history

I am not sure because I don't know the underlying structure of payFrame, but I would just try first anyway. How is this payFrame inserted in the Form? If it's custom html, can't you just assign it an id? Even if doesn't have an id, I think it will work if you just select the element (iFrame).

0 0

replied on September 27, 2019

The src of the iframe is an external website so I have no control over whether or not it has an ID. Is the fact that it's an external website why $('#payFrame iframe').on('load',function()... does not work?

0 0

replied on September 27, 2019 • Show version history

So it's not a custom html like <iframe id='iframeId' src="URL of Payframe"></iframe>?

If it's like that, $('iframe').on('load',function(){alert('loaded')}) should work.

Afterwards, you might have to grab the document.

var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

0 0

replied on September 27, 2019

It's like that but without the

id='iframeId'

part. The iframe has no id, which is why I was trying to use the div name that holds the iframe, and do:

$('#divname iframe').on('load',function(){alert('loaded')})

But that doesn't work for me.

0 0

replied on September 27, 2019 • Show version history

Can you show me a screenshot of custom html containing the iframe?

0 0

replied on October 10, 2019

Sorry for the delayed response. I wanted to make sure that I wasn't exposing anything proprietary and I'm not sure how helpful this type of screenshot might be. Please let me know if there's anything in particular that you're looking for that I may be able to provide.

Thanks,

2019-10-09 10_26_28-ais-dev - Remote Desktop Connection.png (56.96 KB)

| Download

0 0

replied on October 10, 2019

When you say it doesn't work, are you saying that you are not getting the alert?

Can it be that the iframe loaded before the document is ready?

What if you put this outside the $(document).ready(function(){});

$('#divname iframe').on('load',function(){alert('loaded')});

I guess it doesn't matter as long as the iframe is loaded. Anyways, I think it's more important you do below. Obviously your selector for iframe will be different since it doesn't have an id, but once you get the content, you can do something like innerDoc.getElementById('#id_of_button') and try to attach a click event listener and runs a function that does what you want.

var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

0 0

replied on October 10, 2019

$('#payFrame iframe').on('load',function(){alert('loaded')});

$(document).ready(function(){
  $('#payFrame iframe').on('load',function(){alert('loaded')});
  
var iframe = document.getElementById('#payframe iframe');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
  var buttonVar = innerDoc.getElementById('#payform:submitBtn');
  
  $('#q31').click(function(){
	alert("value changed");
});
  
  $(buttonVar).click(function(){
	alert("value changed2");
});
});

I tried using this as the JS, but no alert shows up when I click the button that loads the iframe (#q31) or the button inside the iframe that serves as the Submit button (#payform:submitBtn)

0 0

replied on January 2, 2020

Hi Kentaro,

Sorry for the delayed response. Things have been very busy here the past few months and I haven't had time to focus on this, but we're trying to get it done before Empower.

When I ran the script you posted above and went through the whole iframe transaction, the only items in the Console are warnings about a cookie being set without the 'SameSite' attribute in Chrome.

Question

Question

Replies

Sign in to reply to this post.