Auto Populating HTML

[GOMLP]

Morning Ally,

I hope you had a fantastic weekend and were able to find some time to relax… I’m sure you had a glass of wine knowing I would send you a message to welcome you to Monday morning…lol

How does one go about creating a JavaScript code to dynamically fill multiple HTM elements based off a select?

Basically I have a select menu that contains my “substrates” and I want to create a description below of the substrate, due to the limitations of QuForm with the amount of elements and Logics I would like to hard code this which initially would be faster.

Attached is a pic of my page 3.

On this page you will see three (3) selects, the first select has it’s data set through it’s attribute panel in the QuForm plugin, thus then sets the second select dynamically through JavaScript, and lastly the third select is also set dynamically based off select 1 and 2.

Select 3 “Substrates” contains unique codes for each selection’s value. As the customer selects each one I want to change the description below.

The description below the third (3rd) select is a group panel that contains 4 HTML elements that I want to populate via JavaScript based off of the selection of Select 3 (Substrates). These HTML panels have the Unique ID’s of:

Substrate Name: ID 14_862
Substrate Description: ID 14_868
Adhesive Description: ID 14_874
Application Temperature: ID 14_878
Servicing Temperature: ID 14_880

Ideally I would like to create a conditional dynamic code based off the third select that would fill these four HTML elements with the data I need in realtime.

Feel free to log-in and have a look to see what I am trying to achieve.

Attachments:

You must be logged in to view attached files.

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

• This reply was modified 3 years ago by Ally.

[GOMLP]

Hi Ally,

Not 100% sure what you mean by “You’d need to add the substrates data to the substrates object at the top”.

I’ve tried a few things in which I thought you were referring to, however I keep breaking the code. Any further insight onto what you mean by the above would be so helpful.

[GOMLP]

And definitely it would be easier to do this through JavaScript to populate the various HTML elements. I’ve attached a picture of my layout of this information so you can see how it is built. Your log-in information is still valid and always will be for providing assistance.

If I had to generate this group of elements for every substrate it would be painstakingly slow. It would be a lot easier to export the code in the correct format from Excel and then past it into the above code snippet you provided, I’m just not sure what you mean about “add the substrates data to the substrates object at the top”.

Attachments:

You must be logged in to view attached files.

[GOMLP]

Totally never mind! I’m dealing with Pneumonia and on strong antibiotics and my brain isn’t myself…. I shouldn’t even be working on this right now, but I hate not doing stuff. And for your laugh of the day I was actually trying to call a supplier and was using my calculator on my iPhone and tired several times before I realized I was using the calculator….. I think it is time to relax!

A BIG Thank you.

Boy do I feel stupid right now 🙁

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[GOMLP]

Hi Ally,

I’m wondering if there is a way to write these results to a hidden field and then make that value global so I can then recall the results using HTML elements, very similar to how I’ve used the header descriptions.

My situation is that if I use the current code the results of the label dimensions are being written directly to an HTML element and with the floating CSS code I can’t duplicate the HTML element with the same Unique ID and these HTML elements need to be positioned differently according to the shape selected.

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[Author]

Posts