How Do I Setup the Image Onload Technique (IOL)?

The name of the IOL field is not significant but you can only have one on the page at a time. This is because there is logic in the field that prevents the module.js script from loading more than one time. If you put two image onload fields on a page the second one will not run its module.js script.

The field name [-] was chosen so that when the field was included in a report it would produce a thin column that would not take up any space because normally there is no content to display for this field.

Sometimes the IOL Technique is used along with other visible elements like buttons, or form controls. In this case that standard IOL field definition is appended with the relevant HTML for the button or form controls:

[iol] & "module.js" & [/iol]
&
"<a class='QBU_Button Vibrant Success' " &
"  data-rid='" & [Record ID#] & "'" &
">Button</a>"

If you want to use the IOL Technique to put multiple buttons or other controls on a form you could do something like this:

[iol] & "module.js" & [/iol]
&
"<a class='QBU_Button1 Vibrant Success' " &
"  data-rid='" & [Record ID#] & "'" &
">Button1</a>"
&
"<a class='QBU_Button2 Vibrant Success' " &
"  data-rid='" & [Record ID#] & "'" &
">Button2</a>"

Thank you, this is very disappointing. 

>very disappointing

I don't understand your comment because if you read my answer carefully you will see there is no substantial limitation on putting multiple buttons on the page.

Apologies, I misread that, I'll carry on with the build.  : ) 

In fact here is a demo that uses multiple buttons using precisely the same style of formula:



How To Dialog? ~ Clients List All
https://haversineconsulting.quickbase.com/db/bnrxb4mma?a=td

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=662

wow! Seriously impressed, I get how this works now.  

And again would like someone to check my code, I can't get the second button responding, I'm learning Java, I kinda just go with what works but introducing a second button has stumped me again. 

I do repeat the name of the first button a few times in the function (which calls fields from another table).

All I have as a function in the second button is an alert of hello world.  I'm sure my code can be compacted considerably.

The bit not working is under UK POSTAGE QUOTES.

---------------------------------------------------------------------------------------------------

(function(){

let dbid = "bneccwxvi";
let dbidEstimates = "bn2pkzhui";
let dbidReference = "bn2piqtei";
let dbidUKPostage = "bn5zj7vzd";
$.ajaxSetup({data: {apptoken: apptoken}});

// ------------ENVELOPE ENCLOSING-------------------------------------------------------------------------------
// Envelope Enclosing Set Up Costs
$("a.QBU_UpdateQuote").on("click", function(event) {
// Envelope Enclosing Set Up Costs

let rid = this.dataset.rid;
let refcode = _fid_49.value ;
_fid_77.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "14"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_77.value = $("set_up_cost", xml).text(); 
})
   
});
   
});

$("a.QBU_UpdateQuote").on("click", function(event) {
// Envelope Enclosing Per Item

let rid = this.dataset.rid;
let refcode = _fid_49.value ;
_fid_56.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "9"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_56.value = $("peritem", xml).text(); 
})
   
});
   
});

$("a.QBU_UpdateQuote").on("click", function(event) {
// Envelope Enclosing Minimum

let rid = this.dataset.rid;
let refcode = _fid_49.value ;
_fid_81.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "10"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_81.value = $("minimumcost", xml).text(); 
})
   
});
  
});

// -----HAND ENCLOSING---------------------------------------------------------------------------------------------

$("a.QBU_UpdateQuote").on("click", function(event) {
// Hand Enclosing Set Up Costs
let rid = this.dataset.rid;
let refcode = _fid_50.value;
_fid_78.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "14"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_78.value = $("set_up_cost", xml).text(); 
})
   
});
  
});

$("a.QBU_UpdateQuote").on("click", function(event) {
// Hand Enclosing Per Item
let rid = this.dataset.rid;
let refcode = _fid_50.value;
_fid_57.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "9"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_57.value = $("peritem", xml).text(); 
})
   
});
  
});

$("a.QBU_UpdateQuote").on("click", function(event) {
// Hand Enclosing Min
let rid = this.dataset.rid;
let refcode = _fid_50.value ;
_fid_82.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "10"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_82.value = $("minimumcost", xml).text(); 
})
   
});
  
});

// ------------INK JET PRINTING------------------------------------------------------------------------------------

$("a.QBU_UpdateQuote").on("click", function(event) {
// Inkjet Printing Set Up Costs

let rid = this.dataset.rid;
let refcode = _fid_51.value ;
_fid_79.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "14"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_79.value = $("set_up_cost", xml).text(); 
})
   
});
  
});

$("a.QBU_UpdateQuote").on("click", function(event) {
// Inkjet Printing Per Item

let rid = this.dataset.rid;
let refcode = _fid_51.value ;
_fid_58.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "9"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_58.value = $("peritem", xml).text(); 
})
   
});
  
});

$("a.QBU_UpdateQuote").on("click", function(event) {
// Inkjet Printing Minimum Value 
let rid = this.dataset.rid;
let refcode = _fid_51.value ;
_fid_83.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "10"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_83.value = $("minimumcost", xml).text(); 
})
   
});
  
});

// ------------POLY WRAPPING------------------------------------------------------------------------------------

$("a.QBU_UpdateQuote").on("click", function(event) {
// Poly Wrapping Set Up Costs

let rid = this.dataset.rid;
let refcode = _fid_52.value ;
_fid_80.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "14"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_80.value = $("set_up_cost", xml).text(); 
})
   
});
  
});

$("a.QBU_UpdateQuote").on("click", function(event) {
// Poly wrapping Per Item

let rid = this.dataset.rid;
let refcode = _fid_52.value ;
_fid_59.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "9"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_59.value = $("peritem", xml).text(); 
})
   
});
  
});

$("a.QBU_UpdateQuote").on("click", function(event) {
// Poly Wrapping Minimum Value 
let rid = this.dataset.rid;
let refcode = _fid_52.value ;
_fid_84.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "10"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_84.value = $("minimumcost", xml).text(); 
})
   
});
  
});

// ------------FINISHING------------------------------------------------------------------------------------

$("a.QBU_UpdateQuote").on("click", function(event) {
// Finishing Set Up Costs
let rid = this.dataset.rid;
let refcode = _fid_184.value ;
_fid_186.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "14"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_186.value = $("set_up_cost", xml).text(); 
})
   
});

});

$("a.QBU_UpdateQuote").on("click", function(event) {
// Finishing Item Costs
let rid = this.dataset.rid;
let refcode = _fid_184.value ;
_fid_187.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "9"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_187.value = $("peritem", xml).text(); 
})
   
});
  
});

$("a.QBU_UpdateQuote").on("click", function(event) {
// Finishing Minimum Value 
let rid = this.dataset.rid;
let refcode = _fid_184.value ;
_fid_189.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "10"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_189.value = $("minimumcost", xml).text(); 
})
   
});

});

// ------------UK POSTAGE QUOTES------------------------------------------------------------------------------------
// This collects item costs from the UK Postage Table

$("a.QBU_UKPost").on("click", function(event) {

let rid = this.dataset.rid;
let refcode = _fid_166.value;
let refcol = _fid_214.value;
let refdesc = _fid_221.value;

let messageone = ' "hello world"';
alert(messageone);

});

})();

And again would like someone to check my code, I can't get the second button responding, I'm learning Java, I kinda just go with what works but introducing a second button has stumped me again. 

I do repeat the name of the first button a few times in the function (which calls fields from another table).

All I have as a function in the second button is an alert of hello world.  I'm sure my code can be compacted considerably.

The bit not working is under UK POSTAGE QUOTES.

---------------------------------------------------------------------------------------------------

(function(){

let dbid = "bneccwxvi";
let dbidEstimates = "bn2pkzhui";
let dbidReference = "bn2piqtei";
let dbidUKPostage = "bn5zj7vzd";
$.ajaxSetup({data: {apptoken: apptoken}});

// ------------ENVELOPE ENCLOSING-------------------------------------------------------------------------------
// Envelope Enclosing Set Up Costs
$("a.QBU_UpdateQuote").on("click", function(event) {
// Envelope Enclosing Set Up Costs

let rid = this.dataset.rid;
let refcode = _fid_49.value ;
_fid_77.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "14"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_77.value = $("set_up_cost", xml).text(); 
})
   
});
   
});

$("a.QBU_UpdateQuote").on("click", function(event) {
// Envelope Enclosing Per Item

let rid = this.dataset.rid;
let refcode = _fid_49.value ;
_fid_56.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "9"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_56.value = $("peritem", xml).text(); 
})
   
});
   
});

$("a.QBU_UpdateQuote").on("click", function(event) {
// Envelope Enclosing Minimum

let rid = this.dataset.rid;
let refcode = _fid_49.value ;
_fid_81.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "10"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_81.value = $("minimumcost", xml).text(); 
})
   
});
  
});

// -----HAND ENCLOSING---------------------------------------------------------------------------------------------

$("a.QBU_UpdateQuote").on("click", function(event) {
// Hand Enclosing Set Up Costs
let rid = this.dataset.rid;
let refcode = _fid_50.value;
_fid_78.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "14"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_78.value = $("set_up_cost", xml).text(); 
})
   
});
  
});

$("a.QBU_UpdateQuote").on("click", function(event) {
// Hand Enclosing Per Item
let rid = this.dataset.rid;
let refcode = _fid_50.value;
_fid_57.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "9"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_57.value = $("peritem", xml).text(); 
})
   
});
  
});

$("a.QBU_UpdateQuote").on("click", function(event) {
// Hand Enclosing Min
let rid = this.dataset.rid;
let refcode = _fid_50.value ;
_fid_82.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "10"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_82.value = $("minimumcost", xml).text(); 
})
   
});
  
});

// ------------INK JET PRINTING------------------------------------------------------------------------------------

$("a.QBU_UpdateQuote").on("click", function(event) {
// Inkjet Printing Set Up Costs

let rid = this.dataset.rid;
let refcode = _fid_51.value ;
_fid_79.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "14"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_79.value = $("set_up_cost", xml).text(); 
})
   
});
  
});

$("a.QBU_UpdateQuote").on("click", function(event) {
// Inkjet Printing Per Item

let rid = this.dataset.rid;
let refcode = _fid_51.value ;
_fid_58.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "9"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_58.value = $("peritem", xml).text(); 
})
   
});
  
});

$("a.QBU_UpdateQuote").on("click", function(event) {
// Inkjet Printing Minimum Value 
let rid = this.dataset.rid;
let refcode = _fid_51.value ;
_fid_83.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "10"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_83.value = $("minimumcost", xml).text(); 
})
   
});
  
});

// ------------POLY WRAPPING------------------------------------------------------------------------------------

$("a.QBU_UpdateQuote").on("click", function(event) {
// Poly Wrapping Set Up Costs

let rid = this.dataset.rid;
let refcode = _fid_52.value ;
_fid_80.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "14"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_80.value = $("set_up_cost", xml).text(); 
})
   
});
  
});

$("a.QBU_UpdateQuote").on("click", function(event) {
// Poly wrapping Per Item

let rid = this.dataset.rid;
let refcode = _fid_52.value ;
_fid_59.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "9"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_59.value = $("peritem", xml).text(); 
})
   
});
  
});

$("a.QBU_UpdateQuote").on("click", function(event) {
// Poly Wrapping Minimum Value 
let rid = this.dataset.rid;
let refcode = _fid_52.value ;
_fid_84.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "10"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_84.value = $("minimumcost", xml).text(); 
})
   
});
  
});

// ------------FINISHING------------------------------------------------------------------------------------

$("a.QBU_UpdateQuote").on("click", function(event) {
// Finishing Set Up Costs
let rid = this.dataset.rid;
let refcode = _fid_184.value ;
_fid_186.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "14"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_186.value = $("set_up_cost", xml).text(); 
})
   
});

});

$("a.QBU_UpdateQuote").on("click", function(event) {
// Finishing Item Costs
let rid = this.dataset.rid;
let refcode = _fid_184.value ;
_fid_187.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "9"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_187.value = $("peritem", xml).text(); 
})
   
});
  
});

$("a.QBU_UpdateQuote").on("click", function(event) {
// Finishing Minimum Value 
let rid = this.dataset.rid;
let refcode = _fid_184.value ;
_fid_189.value = "0.00"

$.get(dbidReference , {
act: "API_DoQuery",
query: '{8.EX.${refcode}}',
clist: "10"
}).then(function(xml){
        $("record", xml).each(function() {
_fid_189.value = $("minimumcost", xml).text(); 
})
   
});

});

// ------------UK POSTAGE QUOTES------------------------------------------------------------------------------------
// This collects item costs from the UK Postage Table

$("a.QBU_UKPost").on("click", function(event) {

let rid = this.dataset.rid;
let refcode = _fid_166.value;
let refcol = _fid_214.value;
let refdesc = _fid_221.value;

let messageone = ' "hello world"';
alert(messageone);

});

})();

It's these fields 

let refcode = _fid_166.value;
let refcol = _fid_214.value;
let refdesc = _fid_221.value;

as they come from a formula and the field is non readable, meaning the script can't read them either.  These return the search string for query, the column number and column name for the XML parse.  

If those three fields are formula fields there will not be an <input> element on the form as they can't have their value set. With no <input> element there will not be a corresponding  _fid_166, _fid_214 or _fid_221 variable. To get these values you will have to scrape them out of the page or better yet make an API_DoQuery request using the rid value.

Regarding you  other question dealing with the buttons it would be best to post a new question and minimize the amount of code you post to the shortest example that reproduces the same problem.

It is disincentive to answer the question when I have to reformat a long block of code. Use jsbeautifier.org to format you code using 2 space indention and post it into the forum using the <pre> option on the forum's formatting toolbar.