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

Question

Question

Signature/Initials boxes in LF Form

asked on April 11, 2022

Hi,

In my form I have a signature box where I want the user to enter their initials and another box where the user needs to put in their signature.  I have the following code:

$(document).ready(function(){  
  $("#sigNav a:eq(1)").hide();
  $("#form-signature-dlg").on("shown.bs.modal", function(){$("#sigNav a:eq(0)").click();
});
  
/*Initial instead of Signature*/  
$(document).ready(function(){ 
    /*Initial button label*/
  $('.myInit').find(".Sign_Sig").val("Initials"); 
   /*Initial modal header*/
  $('#form-signature-dlg > div > div > div.modal-header > div').text('Initial Document'); 
   /*Prompt text in the "Type" field*/
  $('#typeSignature').attr('placeholder','Type your initials here');
});

/*Signature instead of Initial*/  
$(document).ready(function () {
    /*Signature button label*/
  $('.mySign').find(".Sign_Sig").val("Signature"); 
   /*Signature modal header*/
  $('#form-signature-dlg > div > div > div.modal-header > div').text('Sign Document'); 
   /*Prompt text in the "Type" field*/
  $('#typeSignature').attr('placeholder','Sign here');
});
});


As I understand it, the first lines hide the "Draw" option from the Signature/Initial boxes.  the second section ".myInit" changes the dialog box to "Initials", changes the modal box to "Initial Document" and the placeholder to "Type your Initials Here".  the third section does the same for the signature box (using different entries). 

the problem is I can't make it work.  the modal headers don't change and the placeholders are the same for both dialog boxes, so I get this when I click the "Signature" box or the "Initials" box:

as shown above #q17 is the Signature box with the class "mySign" & #q18 is the initial box with the class "myInit" (no quotes)

Any help with making all of this work is greatly appreciated.

0 0

Answer

SELECTED ANSWER
replied on April 13, 2022 Show version history

Hi Donnie,

When you're looking for a way to hide certain elements, you should inspect the page in a browser like Chrome or Edge so you can determine the right CSS selectors to use (right-click the element you want and choose Inspect).

The a[href="#btnStyle"] won't work because that Style button is actually a "button" element not an "a" element, and it doesn't have that href attribute.

Here is a screenshot of the HTML (using right-click > Inspect) for the Draw tab/link versus the Style button

The style button has an id attribute, which is usually your best choice when it comes to CSS selectors because id is more specific and is supposed to be unique within the entire document.

As a result, you could use 

#styleBtn {
    display: none !important;
}

but there's also a parent element with a margin, so if you just hide the button there will be a little bit of extra space to the right of the field where you type your name/initials.

If you don't want that, then you'd need to hide that too or remove the margin.

You could use

#typeTab > div > div:nth-of-type(2) {
  display: none !important;
}

And the way we reach that is by looking at the HTML structure

#typeTab tells the selector to start with the element with id="typeTab"

> means "children of" whatever comes before, so #typeTab > div means div elements that are children of #typeTab

and finally, we have div:nth-of-type(2) which means "second div"

so #typeTab > div > div:nth-of-type(2) basically translates to:

"The 2nd div child of a div which is a child of the element with id=typeTab"

 

Also, note that you can group styling in CSS, so if you have two or more elements using the same styling, you can just separate their selectors with a comma like so rather than repeating the same code over and over.

#sigNav a[href="#drawTab"],
#typeTab > div > div:nth-of-type(2) {
  display: none !important;
}

 

The following page will be very handy for information about CSS selectors 

CSS Selectors Reference (w3schools.com)

0 0

Replies

replied on April 11, 2022 Show version history

First, you don't need multiple document.ready functions. Everything you want to do in response to the document ready event should usually be within a single function.

Second, even if you have multiple signature fields, there is still only one modal used to collect a signature so both of the events you have are targeting the same element. Basically, even if they're working it would change twice on document ready and the last one to fire would stick.

As a result, what you need to do is change it dynamically based on which button is clicked.

A few other notes:

  • You could hide the entire signature nav since you don't need them to make a choice
  • You can hide the Type/Draw options with CSS instead of JavaScript; both are fine, but I usually prefer CSS for that kind of thing
  • The .find() method isn't needed because you can configure the CSS selectors to target those buttons directly without using find

 

CSS options for hiding the modal tabs/nav (only need one)

/* hide entire signature modal nav */
#sigNav {
  display: none !important;
}

/* hide draw nav link only (using attribute selector) */
#sigNav a[href="#drawTab"] {
  display: none !important;
}

/* hide draw nav link only (using index selector) */
#sigNav li:nth-of-type(2)  {
  display: none !important;
}

JavaScript to change the values based on which button is clicked

$(document).ready(function(){
  // neither of these are needed if you use the CSS option
  //$('#sigNav').hide(); // hide entire menu
  //$('#sigNav a[href="#drawTab"]').hide(); // hide just the draw option
  
  $('#form-signature-dlg').on('shown.bs.modal', function(){
    $('#sigNav a:eq(0)').click();
  });
  
  /*Initial button label*/
  $('.myInit .Sign_Sig').val('Initials'); // .find() is not needed
  
  /*Update modal on click event for initials*/
  $('.myInit .Sign_Sig').on('click',function(){
    updateSignatureModal('Initial','initials');
  });
  
  /*Signature button label*/
  $('.mySign .Sign_Sig').val('Signature'); // .find() is not needed

  /*Update modal on click event for signature*/
  $('.mySign .Sign_Sig').on('click',function(){
    updateSignatureModal('Sign','name');
  });
});

// reusable function for updating the modal
function updateSignatureModal(type, input){
  var title = type + ' Document';
  var placeholder = 'Type your ' + input + ' here';
  
  $('#sig-dlg-title').text(title); // header
  $('#form-signature-dlg .signature-btn').text(type); // button
  $('#typeSignature').attr('placeholder',placeholder); // placeholder
}

 

Technically, you can update the button value and attach the event handler together by stringing the methods together. I kept them separate for clarity, but you could do the following as well.

$(document).ready(function(){
  $('#form-signature-dlg').on('shown.bs.modal', function(){
    $('#sigNav a:eq(0)').click();
  });
  
  /*Initials button label and set click event to update modal*/
  $('.myInit .Sign_Sig').val('Initials').on('click',function(){
    updateSignatureModal('Initial','initials');
  });

  /*Signature button label and set click event to update modal*/
  $('.mySign .Sign_Sig').val('Signature').on('click',function(){
    updateSignatureModal('Sign','name');
  });
});

// reusable function for updating the modal
function updateSignatureModal(type, input){
  var title = type + ' Document';
  var placeholder = 'Type your ' + input + ' here';
  
  $('#sig-dlg-title').text(title); // header
  $('#form-signature-dlg .signature-btn').text(type); // button
  $('#typeSignature').attr('placeholder',placeholder); // placeholder
}

 

0 0
replied on April 13, 2022

Jason, 

Thanks for the lessons! You gave lots of valuable info.

I appreciate your help!

Donnie

0 0
replied on April 13, 2022

Jason, 

one last ?. Do you know how I can hide the "Style" button in the Signature box?  I tried this

#sigNav a[href="#btnStyle"] {
  display: none !important;
}

but that doesn't work.

Any idea?

Donnie

0 0
SELECTED ANSWER
replied on April 13, 2022 Show version history

Hi Donnie,

When you're looking for a way to hide certain elements, you should inspect the page in a browser like Chrome or Edge so you can determine the right CSS selectors to use (right-click the element you want and choose Inspect).

The a[href="#btnStyle"] won't work because that Style button is actually a "button" element not an "a" element, and it doesn't have that href attribute.

Here is a screenshot of the HTML (using right-click > Inspect) for the Draw tab/link versus the Style button

The style button has an id attribute, which is usually your best choice when it comes to CSS selectors because id is more specific and is supposed to be unique within the entire document.

As a result, you could use 

#styleBtn {
    display: none !important;
}

but there's also a parent element with a margin, so if you just hide the button there will be a little bit of extra space to the right of the field where you type your name/initials.

If you don't want that, then you'd need to hide that too or remove the margin.

You could use

#typeTab > div > div:nth-of-type(2) {
  display: none !important;
}

And the way we reach that is by looking at the HTML structure

#typeTab tells the selector to start with the element with id="typeTab"

> means "children of" whatever comes before, so #typeTab > div means div elements that are children of #typeTab

and finally, we have div:nth-of-type(2) which means "second div"

so #typeTab > div > div:nth-of-type(2) basically translates to:

"The 2nd div child of a div which is a child of the element with id=typeTab"

 

Also, note that you can group styling in CSS, so if you have two or more elements using the same styling, you can just separate their selectors with a comma like so rather than repeating the same code over and over.

#sigNav a[href="#drawTab"],
#typeTab > div > div:nth-of-type(2) {
  display: none !important;
}

 

The following page will be very handy for information about CSS selectors 

CSS Selectors Reference (w3schools.com)

0 0
replied on April 13, 2022

Jason,

Thank you for all of the info and spelling it out for a new(ish) user!

Donnie

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

Sign in to reply to this post.