Question

How to insert a variable to a URL displayed in an iframe from a field value.

Forms

Updated August 11, 2020

asked on August 3, 2020 • Show version history

What i want to do is display a PDF in an iframe, the URL to the PDF location needs to contain a variable of the documents name which relates to the "Position applying for" field.

(The PDF document will have the the same name as the "Position applying for" field.)

A URL populates some of the fields in the form in this case "Position applying for" field.

This shows the URL i have in the iframe and the yellow is where the PDF document name will appear (in this case its inventory controller.pdf)

I've found quite a bit of info on doing this exact process and here is the current code i'm using, as you can tell i'm a novice with JavaScript

Ive updated the iframe slightly to :-

<iframe id="myframe" src="" width="100%" height="1020px"></iframe>

function loadIframe(iframeName, url) {
    var $iframe = $('#' + iframeName);
    if ( $iframe.length ) {
        $iframe.attr('src',url);   
        return false;
    }
    return true;
}

$(document).ready(function () {
  function loadDoc() {
    var base_url ='https://domain.co.nz/Resources/SiteInduction/'
    var base_url2= '.pdf'
    var url = $('#q188 input').val();
    var url = base_url + url + base_url2;
    
  loadIframe('myframe', url);  
 
});

0 0

Answer

SELECTED ANSWER

replied on August 11, 2020

I have modified the JavaScript so that it will change the iFrame both on page load and whenever the Position Applying For field changes.

$( document ).ready(function() {
  
  // Change the iFrame content on page load
  changeIframe();  
    
  // Change the iFrame content when the Position Applying For field changes
  $( "#Field2" ).change(function() {    
    changeIframe();
  });  
    
  // Function for changing the source URL of the iFrame
  function changeIframe(){
    $("#myframe").attr("src","https://domain.co.nz/Resources/SiteInduction/"+ $( "#Field2" ).val() +".pdf");
  }
});

If the Position Applying For field will always be filled, then you should remove the Field Rule.

1 0

Replies

replied on August 10, 2020

1. Add the iFrame as Custom HTML.

<iframe id="myframe" src="" width="100%" height="1020px"></iframe>

2. Add the following JavaScript. In my form, Field2 was the field where the Position Applying For is. Change it as needed to match your form.

$( document ).ready(function() {
    
  // Runs when the Position Applying For changes
  $( "#Field2" ).change(function() {
    
    // Changes source URL of the iFrame
    $("#myframe").attr("src","https://domain.co.nz/Resources/SiteInduction/"+ $( "#Field2" ).val() +".pdf");});
});

3. Use a Field Rule to hide the iFrame when the "Position Applying For" is blank.

0 0

replied on August 10, 2020

Hi Stephen

Thanks for your input, much appreciated, i have a question, does this still work the same if the input field is populated by a database lookup ?

In my testing i can type into the field input and this works OK, but if i populate the field from a lookup the image doesn't appear.

0 0

SELECTED ANSWER

replied on August 11, 2020

I have modified the JavaScript so that it will change the iFrame both on page load and whenever the Position Applying For field changes.

$( document ).ready(function() {
  
  // Change the iFrame content on page load
  changeIframe();  
    
  // Change the iFrame content when the Position Applying For field changes
  $( "#Field2" ).change(function() {    
    changeIframe();
  });  
    
  // Function for changing the source URL of the iFrame
  function changeIframe(){
    $("#myframe").attr("src","https://domain.co.nz/Resources/SiteInduction/"+ $( "#Field2" ).val() +".pdf");
  }
});

If the Position Applying For field will always be filled, then you should remove the Field Rule.

1 0

replied on August 11, 2020

Thanks Stephen, that works perfectly now

0 0

You are not allowed to follow up in this post.

Question

Question

How to insert a variable to a URL displayed in an iframe from a field value.

Answer

Replies

Sign in to reply to this post.