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

Discussion

Discussion

Forms - Custom row labels

Forms
Updated December 20, 2018
posted on December 17, 2018 • Show version history

I have a form that needs ordinal numbers (IE: 1st 2nd 3rd) and a few other idiosyncrasies for the row labels of a table. So I used javascript to set the row labels like this:

        let parent = document.getElementsByClassName(table);
        let label = parent[0].getElementsByClassName('col0');
     for(i = start; i <= finish; i++){
        label[i-(start-1)].innerHTML = i+Ordinal(i);
        }

Works great until the form is saved, where it reverts back to the standard labels. Still trying to understand what is happening when the form is saved. It is as if though it re-runs all the javascript although I have had trouble proving this.

Even if it is re-running the javascript though, why wouldn't the col0 elements be available to access? If the class or type changed, how do I see what is available to access in that space?

 

Looks like this on the form

Looks like this archived

0 0
replied on December 17, 2018

Using the following JS (table id q4), this worked for me and showed the submitted form with the correct labels:

$(document).ready(function() {
    var parent = document.getElementById('q4');
    var label = parent.getElementsByClassName('col0');
    for(i = 0; i <= label.length; i++){
      label[i].innerHTML = ordinal_suffix_of(i + 1);
    }
})

function ordinal_suffix_of(i) {
    var j = i % 10,
        k = i % 100;
    if (j == 1 && k != 11) {
        return i + "st";
    }
    if (j == 2 && k != 12) {
        return i + "nd";
    }
    if (j == 3 && k != 13) {
        return i + "rd";
    }
    return i + "th";
}

Was there more to your JS that might have affected this? 

0 0
View 1 previous reply
replied on December 17, 2018 • Show version history

I found if you log to the console and add the option to view your submission on the thank you page, it logs info to the console on the thank you page.

This confirms the $(document).ready method is being re-run after submission but before saving the repository image.

So I checked my class name variable "table", and it is indeed emptied in the second run-through.

I have run into this before and I think the reason is that all 

$('.myField input').val() statements return nothing on this re-run of the code.

I don't know how to replace this though, I have in my notes from an old answers post to check if the system is in locked mode and replace with this syntax to get the value of a field. However it never returns the actual value of the field, it returns some duplicated value.

  if ($('[name=IsLocked]').val() == 'True'){
  let table = $('.myField div').first().text();
}else{
let table = $('.myField input').val();

}

Update:

Dev Console access to the form through the thank you page view has just answered so many questions. 

$('.myField div').first().text(); does work for some fields, but not fields within a table.

I was able to use this to get the valid value for the table name and that solved the problem.

1 0
replied on December 17, 2018

$(document).ready is an event that is triggered once whenever a form is finished loading. It isn't really "re-run" because it is never run twice in the same page/context. 

For example, when you

  • load a new form to fill out, $(document).ready is run
  • choose to show the form in the thank you page, the read-only form is loaded, and $(document).ready is run
  • save the form to repository, the form needs to be loaded to print it to pdf, so $(document).ready is run

 

Another couple things to note:

  • In read-only mode, all of the inputs are replaced with divs for display purposes. This is why you see multiple values for $(".myField div"), because divs are a lot more common than inputs in the page. 
  • The .first().text() part grabs the first div you see and extracts the contained text. It works for simple fields, but not for more complex fields like table.
  • The $('[name=IsLocked]').val() == "True" indicates that you are in read-only mode and the inputs have been converted to divs.

 

1 0
replied on December 18, 2018

Thanks this helps explain things a bit. My instinct was that your javascript only runs when the user is filling out the form and when they submit it takes an image of what is currently on the screen.

Sounds like it is starting all over from scratch, with the exception of values entered into the fields by javascript. This explains why so many style changes are stripped in the repository image.

I added a function I can use to more reliably get the values of common fields, without it breaking on the save to repository. Will have to figure out how to handle table fields but now that I can view the read only form with the dev console open it changes everything.

function get(className) {
    if ($('[name=IsLocked]').val() == 'True')
        return $('.' + className + ' div').first().text();
    if ($('.' + className).has('input').length > 0)
        return $('.' + className + ' input').val();
    if ($('.' + className).has('select').length > 0)
        return $('.' + className + ' select').val();
    return null;
}

 

1 0
replied on December 20, 2018

After updating the javascript and using the first().text() with the divs I am now seeing the correct row labels on the thank you page, but when saved to the repository something else happens and the row labels change back.

Some phantom process is modifying the form on the backend.

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

Sign in to reply to this post.

Details
Related Posts
Loading ...