You are viewing limited content. For full access, please sign in.

Question

Question

can href links clicked inside an iframe on a form fill a field on the parent form?

asked on July 12, 2018

Hi,

 

I'm trying to get a link inside an iframe populating a single line field of a form that is displaying the iframe above. As it stands the links inside the iframe have an id corresponding to the date they represent (so 11 July  has an ID of 20180711).

 

I can get the page that is displayed on the frame to alert the ID of the href with onClick but for some reason when trying to get javascript to load the value in to the parent form's field the console indicates;

 

Uncaught TypeError: Cannot set property 'value' of null
    at updateValue (tes.html:100)
    at HTMLAnchorElement.onclick (tes.html:32)

 

Has anyone managed to get this sort of thing working before where a link clicked inside an iFrame on the form populates a field in the form itself?

0 0

Replies

replied on July 12, 2018

It depends on where your event is being executed; within the context of the frame, or within the context of the parent.

Assuming you have everything on the same domain and don't have an issue with cross-site scripting restrictions, you just need to specify the proper context.

For example, if you have a function in your parent form called "fieldUpdate" and you try to call in from the iframe with "fieldUpdate();" you will get an error.

If you call it with the following, it will work (assuming there's no cross-site issues) because you're telling it to execute in the context of the parent.

parent.fieldUpdate();

If you are going the other way around and grabbing an element/value from within the frame, you have to specify the source as follows

$('#myFrame').contents().find('#myObject').val()

I don't know enough about how you have everything set up to give a specific solution, but I have a form that passes info back and form between the parent form and a page in an iframe so I know it can work.

If you're able to edit the javascript for the page in your iframe, I would suggest creating a function in the parent form that can receive a value and update the target field.

Then, in your iframe page call that function using parent.function() and pass in the parameters to let the parent form make the actual changes.

For example, your parent form would have the following

function updateField(field, value){
    $(field).val(value).change();
}

And your iframe page would have code similar to one of the following examples to trigger the change using the parent's function

// target the field with a custom class
parent.updateField('.myField input','test');

// target the field by ID
parent.updateField('#Field10','test');

 

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.