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

Question

Question

Hide Pagination & Show All Sections Upon Submission

Forms Empower Laserfiche
Updated March 28, 2016
asked on January 14, 2016

I saw this demonstrated at Empower 2016 and realize that this is a very basic scripting question, however, upon implementation I am unable to figure out what I have wrong.  When the user is taken to the Thank You page for form submission I want the form to show all sections and not retain pagination.  I think i have something wrong in the section "Check if in submission mode".  Any help would be appreciated.  

/* Variables holding navigation section information */  
var section1 = $('.section1 h1:first').text();
var section2 = $('.section2 h1:first').text();
var section3 = $('.section3 h1:first').text();
var section4 = $('.section4 h1:first').text();
var section5 = $('.section5 h1:first').text();
var section6 = $('.section6 h1:first').text();
var section7 = $('.section7 h1:first').text();
  
/* Open up the div's and name them, then insert before a form id */
$('<div class="navbar"><div class="navitem info">' + section1 + '</div><div class="navitem medi">' + section2 + '</div><div class="navitem guard">' + section3 + '</div><div class="navitem emerg">' + section4 + '</div><div class="navitem waive">' + section5 + '</div><div class="navitem upld">' + section6 + '</div><div class="navitem sig">' + section7 + '</div></div>').appendTo('#q150');

/* Creation of navigation bar at the bottom which moves the pages */
$('<input class="navitem medi" value="--> Next: ' + section2 + " -->" + '" type="button">').appendTo('.section1');
$('<input class="navitem info" value="<-- Previous: ' + section1 + " <--" + '" type="button"> <input class="navitem guard" value="--> Next: ' + section3 + " -->" + '" type="button">').appendTo('.section2');
$('<input class="navitem medi" value="<-- Previous: ' + section2 + " <--" + '" type="button"> <input class="navitem emerg" value="--> Next: ' + section4 + " -->" + '" type="button">').appendTo('.section3');
$('<input class="navitem guard" value="<-- Previous: ' + section3 + " <--" + '" type="button"> <input class="navitem waive" value="--> Next: ' + section5 + " -->" + '" type="button">').appendTo('.section4');
$('<input class="navitem emerg" value="<-- Previous: ' + section4 + " <--" + '" type="button"> <input class="navitem upld" value="--> Next: ' + section6 + " -->" + '" type="button">').appendTo('.section5');
$('<input class="navitem waive" value="<-- Previous: ' + section5 + " <--" + '" type="button"> <input class="navitem sig" value="--> Next: ' + section7 + " -->" + '" type="button">').appendTo('.section6');
$('<input class="navitem upld" value="<-- Previous: ' + section6 + " <--" + '" type="button">').appendTo('.section7');  
 
/* Holds the function which links the sections to the nav bar clicks */  
$('.navitem').on('touchstart click', function () {
$('.section1, .section2, .section3, .section4, .section5, .section6, .section7, .Submit').hide();
$('.navbar').find('.navitem').removeClass('selected');

if ($(this).hasClass('info')) {
$('.section1').show();
$('.navbar').find('.info').addClass('selected');
}
else if ($(this).hasClass('medi')) {
$('.section2').show();
$('.navbar').find('.medi').addClass('selected');
}
else if ($(this).hasClass('guard')) {
$('.section3').show();
$('.navbar').find('.guard').addClass('selected');
}
else if ($(this).hasClass('emerg')) {
$(".section4").show();
$('.navbar').find('.emerg').addClass('selected');
}
else if ($(this).hasClass('waive')) {
$('.section5').show();
$('.navbar').find('.waive').addClass('selected');
}
else if ($(this).hasClass('upld')) {
$('.section6').show();
$('.navbar').find('.upld').addClass('selected');
}
else if ($(this).hasClass('sig')) {
$('.section7, .Submit').show();
$('.navbar').find('.sig').addClass('selected');
}
})

/* When user hits submit, the form opens up completely and shows any required fields */

$('.navitem.info').trigger('click');
$('.Submit').click(function(){
	$('.section1, .section2, .section3, .section4, .section5, .section6, .section7').show();
  	$('.navitem').hide();
  
  	

});


// check if in submission mode
if ($('.School input').prop('tagName')!='INPUT') {
  //hide navigation bar, navigation and submission btn
  $('.navigationbar').hide();
  $('.navitem').hide();
  $('.Submit').hide();
  
  //show all sections
  $('.sections').show();
}

 

0 0

Replies

replied on January 15, 2016

Hey Dan:

Based on your code, can you check the following issues that might cause your problem:

1. In the line 70, you select the field "School" by the class name ".School". Please make sure you do add class name "School" to your School field.

2. In line72, the class name "navigationbar" does not exist in your code. I believe the correct class name in your case to select the navigation bar is called "navbar" in line 11.

If the problem still exists after you checking the above two places, can you attach the screenshot of your form preview pane in the right side of "CSS and Javascript" page with the CSS selector displayed. So that I can help you to double check based on your form.

Best :)

 

 

 

0 0
replied on January 20, 2016

Thank you for the response.  I was able to double check based on your suggestions.  I changed the field to a different field and put the class name Age next to the Age Field.  I have attached a screenshot of this field.  The form is about 6 pages, so it would be a lot of pictures to capture it all.  Let me know if this has enough information.  Everything the script is same as above, with exception that I replaced School with Age.  Upon doing these things the pagination still remains after submission.

Thanks again for the help!

CSS Field Form - Age.PNG
CSS Field Form - Age.PNG (4.55 KB)
Download
0 0
replied on January 20, 2016

Hey Dan:

There are two steps when configuring the submission mode: first, hide all navigation items and second, show all sections. 

I copied your code, tested in my business process and found all the navigation items are hidden successfully. Then the problems may happen in the second step. I double checked your code and found there is no class name called "sections" in your code. That means if you want to show all sections you need to list all section class names again. 

Here is the code that you can have a try:

if ($('.Age input').prop('tagName')!='INPUT') {
  //hide navigation bar, navigation and submission btn
  $('.navbar').hide();
  $('.navitem').hide();
  $('.Submit').hide();
  
  //show all sections
  $('.section1, .section2, .section3, .section4, .section5, .section6').show();
}

Please let me know if it works this time wink

0 0
replied on January 21, 2016

Thank you for the quick responses!  I tried what you suggested and still can't get it to expand on submission.  Do you have any other ideas? I will also continue exploring on my end.  Where would I add the class name "sections"? 

0 0
replied on January 22, 2016

Hey Dan:

You can add the class name "sections" to each section field in Layout page:

In Layout page, select one section and click Edit. 

Then under Advanced tab, input "section" within CSS class input. If it already has other class names, separate them with white space.

Based on the code you provided, I cannot find any other possible reasons if you add class names and use them correctly.

If you don't mind, can you download that business process and attach the .xml file with your next reply? So that I can work directly on your business process. Since this is a public question, you can first copy your business process, then remove all the unrelated configuration or design in copied business process except the form, and attach the copied one. 

Good lucklaugh

0 0
replied on March 28, 2016

If you haven't already received an answer for this, I struggled with this same issue and here is what worked for me:  

Cut the portion of your javascript that handles pagination on submission, and paste it back into your javascript BEFORE the }); that appears in your example above on line 66.  Once I moved this activity inside my $(document).ready(function(){ it worked perfectly.

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

Sign in to reply to this post.

Details
Attachments
Related Posts
Loading ...