Custom HTML image

SELECTED ANSWER

replied on February 27, 2018 • Show version history

So you have custom Javascript code loading an image into the HTML display of the form - that is triggered by a value in a drop-down. This works in the live form, but when viewing a submitted form or the version archived to laserfiche, if doesn't display the image as you expect. Do I have that right?

Without seeing your code, best guess is simply the part of your Javascript that triggers based on the value in the drop-down. The way values are stored in a live form is not the same way that they are stored in a submitted or archived form.

//For example, to get the value of a drop-down in a live run you would use code like this:
$('.trigger_field select').val()

//But to retrieve that same value in the submitted or archived version of the form you would need to use code like this:
$('.trigger_field .cf-field').text()

Here's an example you can try out.

Create a form with one drop-down field, give it a couple options, but make one of the options the word "Trigger". Add a css class to the field of trigger_field. Then add this Javascript:

$(document).ready(function () {
  
  //Process Live Version of the Form Customization
  if ($('.trigger_field select').val() == 'Trigger') { 
    $('.trigger_field').after('<span style="display: block; width: 100%; text-align: center"><b><i>Live Form - Trigger Was Previously Set.</b></i><hr></span>');
  } //end of if...else statement

  //Process Archive Version of the Form Customization
  else if ($('.trigger_field .cf-field').text() == 'Trigger') { 
    $('.trigger_field').after('<span style="display: block; width: 100%; text-align: center"><b><i>Archival Form - Trigger Was Previously Set.</b></i><hr></span>');
  } //end of if...else statement

  $('.trigger_field select').change(function(){
    
    //Process Live Version of the Form Customization
    if ($('.trigger_field select').val() == 'Trigger') { 
        $('.trigger_field').after('<span style="display: block; width: 100%; text-align: center"><b><i>Live Form - Trigger Has Now Been Set.</b></i><hr></span>');
    } //end of if...else statement

    //Process Archive Version of the Form Customization
    else if ($('.trigger_field .cf-field').text() == 'Trigger') { 
      $('.trigger_field').after('<span style="display: block; width: 100%; text-align: center"><b><i>Archival Form - Trigger Has Now Been Set.</b></i><hr></span>');
    } //end of if...else statement

  }); //end of $('.trigger_field').change(function(){
  
}); //end of $(document).ready(function () {

This is going to run some code at two different times - when the form first opens, and when the value of the drop-down changes.

When the value of the dropdown shows the option of "Trigger" when it is loaded, or when it changes to the option of "Trigger" it will add some HTML text below the field that says one of four things:

"Live Form - Trigger Was Previously Set."
"Archival Form - Trigger Was Previously Set."
"Live Form - Trigger Has Now Been Set."
"Archival Form - Trigger Has Now Been Set." (this one actually shouldn't happen since the drop-down won't be changing in a submitted or archival version of the form).

If you include this form in a process that you can complete and assign back to yourself, you should be able to view all the functionality (the lines of HTML text being added) in the submitted/archived version of the form.

Of course, if I was incorrect in my understanding of your issue - this information probably won't be of much use to you.

0 0

replied on February 28, 2018

My code was similar to yours. My main issue was the selector that I had for line 21. I wasn't aware that it was just a text field and I was attempting to grab the value instead

$('.sample').on('change', 'select', Loadsample);
  var sample;
  

  if($('.sample').text()){
   sample = $('.sample').text();
   sample = sample.replace("sample","");
   Loadsample();
  }
  function Loadsample(){
    if( $('.sample select').val() == "1" || sample == "choice 1") { 
      $('.sampleLogo').attr('src', 'http://localhost/Forms/img/samples/sample_gfx.png'); 
    }
    else if($('.sample select').val() == "2" || sample == "choice 2") { 
      $('.sampleLogo').attr('src', 'http://localhost/Forms/img/samples/other_sample_gfx.png'); 
    }
    else { 
      $('.sampleLogo').attr('src', '');
    }    
  }

I used the string replace in my example since it was grabbing the text from the label. I'm guessing using the .cf-field would only grab the text.

0 0

replied on February 28, 2018

The val() option does work well in the live form, just not in the submitted/archival version. And using .cf-field with text() won't work in the live form. You have to write your code to address either possibility.

You could add additional "OR" options in your IF statement. Example:

//Where you have this:
$('.sample select').val() == "1"

//You could do this to catch either possibility:
$('.sample select').val() == "1" || $('.sample .cf-field').text() == "1"

0 0

Question

Question

Answer

Replies

Sign in to reply to this post.