Template Pages Dynamically filled in

[Lonig]

Trying to make a "template" page for our other products, but have it so people who have no coding experience can make the pages.Going to be creating a page that needs to mold to the decisions a user makes. Here is a basic outline of what I need:1) User inputs Name, model, and company2) User selects how many "lights" there are- form changes to reflect that many lights, and has a new text field for each light to give a description- also, under each light is another "select" that you can choose how many "Steps" each light has, which needs to populate more fields based off the number selected under the "lights".3) After all the above, it needs to output "html" code, so they can copy/paste to us and we can quickly verify the coding aspect is correct.Any pointers would be appreciated. Or even just some Javascript commands I can research would be great too.

[jeffman]

The limited approach would be to have a bunch of hidden fields that become visible according to user input. But what if you don't provide enough hidden fields?The robust approach would include modifying the document itself in response to user input. So I suggest researching methods like createElement() and appendChild().See more detail here. Try running the script, and then imagine having the power to build elements like that when a user clicks something.

[Lonig]

Not quite sure I am understanding your advice. The example you gave shows how to generate based on an existing array. However, I'm doing a page that has no information at all going into it. I'm still making my html template, but here is the first form I wrote up.Please note, i generally don't post the actual content, but since this issue is hard to describe, I've included the actual field names.Everything in [ are the fake inputs.

Company Name: [ BOBS DSL ]   <!-- Text field -->Modem Type: [DSL]  <!-- Text field -->Modem Name: [ Brand1 ]  <!-- Text field -->Number of lights? [ 1 ]   <!-- drop down, will change the Light table below to the correct number of lights and rows -->Light1 Name: [ POWER ]   <!-- Text field -->Light1 Color: [ GREEN ]   <!-- Text field -->Light1 action: [ solid ]   <!-- Text field -->Light1 Fixes? [ 1 ]	 	<!-- drop down, changes the number of rows for the Fixes -->Light1 Fix1: [ make sure power cord is plugged in. ]   <!-- Text field, textarea -->[GENERATE PAGE]  <!-- button -->

then at the end, the Generate Page button will be either a popup or a textarea that has the HTML code in it. Hope I am describing this right

[justsomeguy]

Where the data comes from isn't important, it's the techniques that are being illustrated. Even though your data is in the DOM instead of an array, the techniques to add new elements to the page are the same. What HTML code are you trying to generate?

[Lonig]

Trying to generate the entire page for copy/paste.I currently have a template for changing over ~75 old html pages, and they are just horribly coded from several years ago. I've tried to setup a "template" in several different programs, and none seem to make it easier than simply copy/paste in notepad. But that isnt nearly as efficient as if I can get this done, as it will allow me to have others assist in converting them, and also make it easier on me to convert them all.

[justsomeguy]

So the goal of this is to fill out your form and push some buttons to add some new elements to the page, fill those out, etc, and at the end generate a complete HTML document for the entire page? That's probably more work than you're thinking, that's going to involve looping through all of the nodes in the document, excluding what you don't want (like the script nodes that generate the HTML), checking all of the attributes for each node and writing the names and values into each tag, etc. It also needs to be recursive so that you get the closing tags in the right places. Is that the type of thing you're looking for?

[Lonig]

The HTML coding is extremly basic, and I already planned to use them as < and > for the <>. other than that, there really any fancy coding. I must be thinking its easier than it is, so I guess I'll just have to live with doing this for the next month or so. I am not really grasping the createElement or append, so maybe thats a sign I'm looking in the wrong direction. Maybe I can do a asp write and just make it multiple pages in length.

[jeffman]

I am not really grasping the createElement or append, so maybe thats a sign I'm looking in the wrong direction.

Now that you've posted more, I'm not sure I gave you the right advice. I'm not sure it isn't, either . . .

[justsomeguy]

CreateElement and append are actually pretty easy, you use them all the time. When you write this:<div><h1>Hello</h1></div>You've created 3 elements and appended them to each other. First you created a div element, then created an h1 element and appended it to the div element, then a text node was created with the text "Hello" and appended to the h1 element. The browser does all of this internally when it gets the HTML code, it builds the document structure that way. You can do the same thing with Javascript.

var div = document.createElement("div");var h1 = document.createElement("h1");var txt = document.createTextNode("Hello");div.appendChild(h1);h1.appendChild(txt);document.getElementsByTagName("body")[0].appendChild(div);

Now taking that node structure and producing the HTML markup is an entirely different story.

[Lonig]

Wow, that was an excellent explanation justsomeguy. Not sure why I wasn't wrapping my head around it easier. But while I think I get the structure, I am not really seein how it will be "basic" enough to do what I want without taking me longer than its worth. I'm just wanting something I thought was a simple "step by step" type production of html code.Now I am thinking kinda like this:Page 1 asks for number of lights, then user clicks next.Page 2 asks for number of fixes for light 1, click next. (continues asking for each light, but nothing has names yet)Page 3 lets the user fill out all the data and click generate.Page 4 displayed the code in a textarea.So I am thinking ASP or even PHP are able to do this pretty easy. Just have like a while loop or something similar for filling the spaces... Its super easy to pass variables so the page 3 would be pretty simple.That idea sound better/simpler?

[justsomeguy]

It would definately be more straightfoward in PHP, because you would just write the HTML yourself and fill in the blanks basically. The thing that makes it difficult with Javascript is that you need to loop through all the nodes in the document and create whatever HTML represents each node, which could be anything. I'm not even sure if there's a Javascript method to produce the HTML code for a specific node, if there is then it becomes a whole lot easier. If not, then writing the code to do that is the difficult part.