0

I am working on a form (which comes from the Laserfiche Forms application) and I am trying to change the text on a button that currently reads "Auto Fill" which is very non-descriptive since I have 5 of those buttons.

A little backstory: My code used to work and then all of a sudden one day it doesn't and creates an error where the user can only see the "Submit" button and the title of the form, but as soon as I comment out the below code the form works again but then I have those non-descriptive buttons again.

Is something wrong with my code?

document.getElementById("lookup1573").innerHTML = "Fill Section";

On button inspection, I see something a little odd: 

<button id="lookup1573" class="autofill" type="button vo="d">Auto fill</button>
Nestalna
  • 29
  • 1
  • 12
  • 1
    Are there errors reported? Is there more than one element with that id? – Pointy Oct 09 '17 at 18:07
  • Check the error console. Most likely there's some other error on the page that prevents your code from working – Cfreak Oct 09 '17 at 18:08
  • Firefox is only showing: "TypeError: document.getElementById(...) is null" on the line 124 – Nestalna Oct 09 '17 at 18:24
  • Chrome is showing: "Uncaught TypeError: Cannot set property 'innerHTML' of null at HTMLDocument. (AdjunctAgreementTRAD:124) at c (jquerymin...) at Object.fireWith [as resolveWith] (jquerymin.... at Function.ready (jquerymin... at Function.holdReady (jquerymin... at formInit (AdjunctAgreementTRAD:96) at Object.success (AdjunctAgreementTRAD:382) at c (jquerymin...) at Object.fireWith [as resolveWith] (jquerymin... at w (jquerymin...)" on the same line – Nestalna Oct 09 '17 at 18:25
  • Are you trying to execute the script before the element actually exists in the DOM? – skyline3000 Oct 09 '17 at 18:34
  • @Skyline3000 I have thought that too but I don't think that is the problem since I tried wrapping it into a window.onload per this article and it still didn't work: https://stackoverflow.com/questions/2632137/why-is-document-getelementbyid-returning-null – Nestalna Oct 09 '17 at 19:28
  • Try `var elem = document.getElementById("lookup1573"); console.log(elem)` -- it looks like it will say it is `null`, which means it doesn't actually exist in the DOM. You'll need to post more code if you want additional help. – skyline3000 Oct 09 '17 at 22:19
  • @skyline3000 you are exactly right. I will contact the application provider as this seems to be an issue with the form not the custom code. Thanks! – Nestalna Oct 12 '17 at 17:41

2 Answers2

0

You had a typo in the html:

type="button vo="d"

This is the correct way:

<button id="lookup1573" class="autofill" type="button">Auto fill</button>

Here is the full example: https://jsfiddle.net/o2er21v0/

Kenji Mukai
  • 599
  • 4
  • 8
0

That is not a typo but a customer parameter of Forms.

So here is the easy way to use these kind of things with forms:

  1. Firstly, give all of your elements classes. Whilst outside of using Forms it is recommended to use ID's to reference your elements, doing that with Forms will give you more work, tenfold.
  2. To note about Autofill buttons: they only appear on lookups that you have enabled them on (unless you are using an old version of Forms) and will appear next to the last element in your lookup (if that makes sense).
  3. To change the name of your autofill buttons you are going to have to do so after the page has loaded.

  4. Below is example code to do just that, assuming that the element that has the Autofill button you have given it a class of "vendorName".

  5. The "vo" is actually very useful as you can use it to easily interact with your field content in conjunction with your classes. In the below example I am changing what is in the field without having to go into the code and work out what the number of the id is. This makes any code you make more portable as you can then implement it in other projects, projects where you ID numbers will be different. This is so flexible that it does not matter if the "vendorName" element is a normal text input, multi-line text area or a drop down menu as that same piece of code will work the same.

4:

$(function() {
    $( ".vendorName .autofill").text( "Fill Section" );
});

5:

$( ".vendorName [vo]").val( "A New Vendor Name" );

Forms already uses the jQuery library so this will work just fine. Remember to give all of your elements a class (I usually name it the same as the variable). You can also give them multiple classes by separating the classes with a space.

PinothyJ
  • 54
  • 3