Yes, both in the archive saved to the repository and/or the PDF generated on an email task. All CSS is lost. So when the fields are converted to DIVS, those DIVS do not support the CSS that I had applied? Is there any type of styling I can apply to the field that will be carried over to the DIV?

Without seeing your code, I cannot figure out the scope of $(this). Perhaps, you are not using the correct selector?

    $('.cf-table-block tbody tr').each(function () {
            var start = $(this).find('.myclass input').val(); 
            
            });

(this) was a table in that instance. It was being used in a for each row like above. But even if I was just using $('.myclass input').attr the styled applied still get removed. I think wk2html is what is removing them, but I know it supports styles because I have seen them slip through once in awhile.

Okay so there are input elements with class called .myclass assigned. 

What happens when you put:

$(this).find('.myclass div').css({'background-color':'#12200','border':'none','color':'white'})

Also, since you specifically mentioned "CSS on final archive", I'm assuming your code works when you run it from the console prior to submission?

Yes, it applies a CSS style to the field.

When should I run that line of code you just posted? Do I run this at the same time I run the ('.myclass input').attr line?

Is there a secret DIV that is there all along, that gets carried over to the final image?

After submission, your entire code runs again.

However, unlike pre-submission, all inputs are converted to divs after submission.

You can include the code and run it at the same time as your ('.myclass input').attr line.

The code won't do anything before submission since inputs aren't converted to divs yet, but after submission, it should apply to your Form. 

All my code runs again? I have logic that decides when my code runs. Very little code is just slapped into the Javascript window without conditions. For example, some code runs after the form is ready, some code runs after a lookup completes, some code runs when certain conditions are met (IE: the value of a field is set over a certain amount). If all the code just ran in order, it would be complete chaos.

Is there any way to select which code runs after submission? How do I log to the console with the code that runs after submission?

Okay, you can do something like this if you want your code to only run after submission. The idea is to utilize sessionStorage.  Including something like below will insert a key-value pair in session Storage. 

 $('#form1').submit(function(){

        sessionStorage.setItem('runafunction','runafunction');

 });

Now in your code, have something like this. Because the key will only exist once you submit, the stuff inside the if statement won't run before you submit. 

$(document).ready(function(){

var runfunctiononload = sessionStorage.runafunction;

//If runafunction key exists in sessionStorage

      if(runfunctiononload){

        // do stuff here

        //remove key from sessionStorage after running the function

        sessionStorage.removeItem('runafunction'); 

      };

})

How do I log to the console with the code that runs after submission?

- You can just use the same approach as you normally do. After submission in your Thank You page, just hit F12 and see if your code is working. My guess is that it's your selector ($(this).find('input .myClass')) that's not working after the submission.

We can do a quick remote session later. Reach me at keno@idealogical.com

Awesome, I am going to try this out later on today. Being able to log to the console at the thank you page should hopefully allow me to troubleshoot and verify the functions are running. Feels like I am opening a door to another dimension that happens after submit.

Thanks for all the info!

No problem! Let me know how things go. 

If you need help, we can do a remote session on TeamViewer or something

These are the results of my testing so far. I am using a test form with 1 input field I gave the class name "singleLine.

$(document).ready(function(){
  
  //On the form, this adds a black bar to the right of the field. Wiped away on the final repository image
  $('.singleLine div').css({'background-color':'#12200','border':'none','color':'red'});
  
  //On the form, this colors the field red. Wiped way on the final repository image
  $('.singleLine input').attr('style', 'background-color: #C12200 !important;border: none; color:white;');
  
  //Moved this into the ready function, so that form1 exists
  $('#form1').submit(function(){

  sessionStorage.setItem('runafunction','runafunction');
  console.log('Form Submitted');
    
    //This gets deleted as soon as it is posted to the console, but you get a chance to see it before deletion, 
    //it shows that it is successfully no longer undefined
    var runfunctiononload = sessionStorage.runafunction;
    console.log(runfunctiononload);
    
    //At this point, after submit is clicked, you can still access fields as an input
    $('.singleLine input').val('Hello Out There?');

 });

  //Ok here we go, assuming this is running not just on load in the browser, but somewhere out there in the afterlife
  var runfunctiononload = sessionStorage.runafunction;
  console.log(runfunctiononload);

      //If runafunction key exists in sessionStorage then we should be in the after submission state
      //We know that sessionStorage.runafunction is no longer undefined with the check above that ran after submit
  

      if(runfunctiononload){
        
        //This should return true and do something but
        
        //Does not log, first sign of trouble, not hearing anything back from the other side before we even try to execute anything
        console.log('Hello Out There? I am behind the Submit');
        
        //Does nothing
        $('.singleLine div').text('Am I in the repository now?');

        sessionStorage.removeItem('runafunction');
        
        return;

      }
  
  //I should be able to add code here that I don't want to run after submission

});

Hey Chad,

That's strange I expected the console.log to run on the thank you page. 

One small change: what happens when you change the selector to this:

$('.singleLine div.ro').css({'background-color':'#12200','border':'none','color':'red'});

On the backend, Forms is using PhantomJS to regenerate the image of your Form so I am starting to guess if these styling is not supported in this scripted headless web browser. 

I know it's been awhile but had to tackle some other necessary stuff before coming back to this. This customer is still very interested in having printable forms with color on them though.

I tried the above code without any success, either on the form, or in the resulting PDF. Changing div.ro to input does make it work on the form, but not on the PDF still.

Here is something else I tested. I noticed that if I color a field using the CSS pane, instead of the java pane, it sticks with the final image.

Example

.colorGreen {
    background-color: #3DDD8D;
    color: white;
}

But, how in the world do you write logic statements in CSS? That wasn't what CSS was designed for. So I decided to merge the CSS and Javascript, instead of applying styles with javascript, I would just apply classes, and let the CSS do it's magical thing.

This actually works and sticks with the PDF

$('.myField').addClass('colorGreen');

However, as soon as I add ANY logic to the javascript, my colors are again stripped from the PDF. Some background force is preventing any color changes based on logic.

This does not work.

  $('.myField input').on('change', function() {
    
    if($(this).val() == 'green')
//Just color the whole DIV as a test since I know javascript has issues with referencing the type on save
      $('.myField').addClass('colorGreen');
      
  });

This is what it looks like on the form

Then in PDF format, all the color is gone.

My class was there. (colorGreen)

I added it using addClass.

It should be there forever going forward unless something calls removeClass.

The CSS was there, in the proper CSS area.

Where did my color go? What is conspiring against color when logic is involved?