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

Question

Question

Form not displaying correct label for fields

asked on March 16, 2017

Hi there,

When a user enters a date (03/16/2017), I use JQUERY to update the table field labels.

See below.

When the form saves to Laserfiche, it looks like this.

Any suggestions would be great?

0 0

Answer

SELECTED ANSWER
replied on March 16, 2017

All right, I figured it out. There's some difference in how JavaScript is parsed when a page is being generated for a Save to Repository task. In particular, passing a string argument to the Date() constructor doesn't seem to work, at least not in any way I've tried constructable from the set-up provided:

d = new Date("yyyy-mm-ddTHH:MM:SS") // original implementation, does not work
d = new Date("yyyy-mm-dd") // also does not work
d = new Date() // works, but doesn't change
d = new Date(yyyy,mm,dd) // works; note the arguments are numbers, not strings

Note that each of the above work during submission and submission preview, but the Date object is cast as "Invalid Date" and .getMonth() and .getDate() return NaN when saved to the repository. Only the last two work as expected.

So I was able to get this working thus:

$(document).ready(function(){
  
  var d;
  
  $('.payperiod input').on('change',displayDates);
  displayDates();
  
  function displayDates() {
      
      if($('.payperiod input').val() === undefined || $('.payperiod input').val() == ''){
        str = $('.payperiod div[type="text"]').text();
        
      } else { str = $('.payperiod input').val();  }

      if(str !== ''){
        var array = str.split('/');
        month = array[0];
        day = array[1];
        year = array[2];
        
        d = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
        d.setDate(d.getDate() - 13);
        str = '' + addZero(d.getMonth(), 'm') + '/' + addZero(d.getDate(),'d') + '\n' + getDayString(d.getDay()) + '';

         $('#q11 label').text(str);
      }
    }
  
  
  function addZero(num, type){
    if(type === 'm'){
      num = num + 1;
    }
    if(num < 10){
     num = '0' + num; 
    }
    
    return num;
  }
  
  function getDayString(num)
  {
    var day;    //Create a local variable to hold the string
    switch(num)
    {
      case 0:
        day="Sun ";
        break;
      case 1:
        day="Mon ";
        break;
      case 2:
        day="Tues ";
        break;
      case 3:
        day="Wed ";
        break;
      case 4:
        day="Thurs ";
        break;
      case 5:
        day="Fri ";
        break;
      case 6:
        day="Sat ";
        break;
      default:
        day="Invalid day";
    }
    return day;
  }  
});

where the original lines 20-22 are replaced by new line 21. This returned the expected label during form preview, during form submission, when previewing the submission, and when saved to the repository. Hope this helps!

1 0

Replies

replied on March 16, 2017

Without further details, my guess would be that the JavaScript is referencing <input> elements which no longer exist when the saved submission is generated (being replaced with <div> elements). Does this behavior also occur when previewing a submission? If so, you could use the DOM Explorer in Developer Tools pane (F12) to confirm whether this is the case.

0 0
replied on March 16, 2017

I am accounting for <div> elements. The form does display properly after a user submits a form and previews his submission.

0 0
replied on March 16, 2017

Could you provide a sample code snippet of the JavaScript that is in use?

0 0
replied on March 16, 2017
$(document).ready(function(){
  
  var d;
  
  $('.payperiod input').on('change',displayDates);
  displayDates();
  
  function displayDates() {
      
      if($('.payperiod input').val() === undefined || $('.payperiod input').val() == ''){
        str = $('.payperiod div[type="text"]').text();
        
      } else { str = $('.payperiod input').val();  }

      if(str !== ''){
        var array = str.split('/');
        month = array[0];
        day = array[1];
        year = array[2];
        fullDate = year + '-' + month + '-' + day + 'T00:00:00';

        d = new Date(fullDate);
        d.setDate(d.getDate() - 13);
        str = '' + addZero(d.getMonth(), 'm') + '/' + addZero(d.getDate(),'d') + '\n' + getDayString(d.getDay()) + '';

         $('#q11 label').text(str);
      }
    }
  
  
  function addZero(num, type){
    if(type === 'm'){
      num = num + 1;
    }
    if(num < 10){
     num = '0' + num; 
    }
    
    return num;
  }
  
  function getDayString(num)
  {
    var day;    //Create a local variable to hold the string
    switch(num)
    {
      case 0:
        day="Sun ";
        break;
      case 1:
        day="Mon ";
        break;
      case 2:
        day="Tues ";
        break;
      case 3:
        day="Wed ";
        break;
      case 4:
        day="Thurs ";
        break;
      case 5:
        day="Fri ";
        break;
      case 6:
        day="Sat ";
        break;
      default:
        day="Invalid day";
    }
    return day;
  }  
});

 

0 0
SELECTED ANSWER
replied on March 16, 2017

All right, I figured it out. There's some difference in how JavaScript is parsed when a page is being generated for a Save to Repository task. In particular, passing a string argument to the Date() constructor doesn't seem to work, at least not in any way I've tried constructable from the set-up provided:

d = new Date("yyyy-mm-ddTHH:MM:SS") // original implementation, does not work
d = new Date("yyyy-mm-dd") // also does not work
d = new Date() // works, but doesn't change
d = new Date(yyyy,mm,dd) // works; note the arguments are numbers, not strings

Note that each of the above work during submission and submission preview, but the Date object is cast as "Invalid Date" and .getMonth() and .getDate() return NaN when saved to the repository. Only the last two work as expected.

So I was able to get this working thus:

$(document).ready(function(){
  
  var d;
  
  $('.payperiod input').on('change',displayDates);
  displayDates();
  
  function displayDates() {
      
      if($('.payperiod input').val() === undefined || $('.payperiod input').val() == ''){
        str = $('.payperiod div[type="text"]').text();
        
      } else { str = $('.payperiod input').val();  }

      if(str !== ''){
        var array = str.split('/');
        month = array[0];
        day = array[1];
        year = array[2];
        
        d = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
        d.setDate(d.getDate() - 13);
        str = '' + addZero(d.getMonth(), 'm') + '/' + addZero(d.getDate(),'d') + '\n' + getDayString(d.getDay()) + '';

         $('#q11 label').text(str);
      }
    }
  
  
  function addZero(num, type){
    if(type === 'm'){
      num = num + 1;
    }
    if(num < 10){
     num = '0' + num; 
    }
    
    return num;
  }
  
  function getDayString(num)
  {
    var day;    //Create a local variable to hold the string
    switch(num)
    {
      case 0:
        day="Sun ";
        break;
      case 1:
        day="Mon ";
        break;
      case 2:
        day="Tues ";
        break;
      case 3:
        day="Wed ";
        break;
      case 4:
        day="Thurs ";
        break;
      case 5:
        day="Fri ";
        break;
      case 6:
        day="Sat ";
        break;
      default:
        day="Invalid day";
    }
    return day;
  }  
});

where the original lines 20-22 are replaced by new line 21. This returned the expected label during form preview, during form submission, when previewing the submission, and when saved to the repository. Hope this helps!

1 0
replied on March 16, 2017

This is why you are the man! Thank you Justin for helping me out on this. I updated my script and it is working now.

 

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

Sign in to reply to this post.