Display Image based on field value but only when submit button clicked

Hi,

I havea really heavyweight form. It asks loads of questions & does a load of calculations culminating in the display of a complex wiring diagram. It's on the edge of acceptable performance so I'm trying to improve it's usability. 

One thing I'm considering is using a submit button to display the final diagram - I know that'll take a moment of three to display but it will probably be a better UX. However, I'm really a novice with Acrobat and I'm struggling to display an image based on a given field, when the submit button is clicked.

In my test, I have 1 dropdown list field: Batteries (Options are 1, 2 or 3)

I have 3 images: Batt1, Batt2 & Batt3

I have 1 button: Show Images 

I have added the Trigger/Action to the button (Mouse Up & Run A Javascript). The javascript is as follows:

(function ()

{

// Get No. of Batteries

var BatteryQty = getField("Batteries");

// Get references to the image

var f1 = getField("Batt1");

var f2 = getField("Batt2");

var f3 = getField("Batt3");

// Hide all of the images

f1.display = display.hidden;

f2.display = display.hidden;

f3.display = display.hidden;

// Show an image based on the No. of Batteries

if (BatteryQty == "1" ) { f1.display = display.visible;}

else if (BatteryQty == "2" ) { f2.display = display.visible;}

else if (BatteryQty == "3" ) { f3.display = display.visible;}

}

)();

I think the most it's doing is hiding the images. Can anyone offer any insights into this please?