JavaScript Programming-creating forms without explicitly naming lines

Factual Questions
1

About 6 months ago, I was given some great hints on making my JavaScript programs more efficient by having them calculate and print out without explicitly naming each field. Here’s a good example of that:

http://www.1728.com/calendar.htm
The form gets “filled in” by this routine:
while(ct<32){
document.boxes[valname[ct]].value=wd[daynm];
document.boxes[valmon[ct]].value=mname;
document.boxes[valyear[ct]].value=Y;
document.boxes[valday[ct]].value=ct;
document.boxes[valjd[ct]].value=jd;
document.boxes[valmjd[ct]].value=mjd;
document.boxes[valtjd[ct]].value=tjd;
ct=ct+1;daynm=daynm+1; jd=jd+1; mjd=mjd+1;tjd=tjd+1};
ct=0;
The arrays “valname”, “valmon”, etc were defined in lines listed above this routine and the form gets “filled in” by up to 31 iterations of that routine.

Also, in that thread (from 6 months ago - which I cannot find), I was told about creating routines for generating forms in a similar way.

The calendar at the link
http://www.1728.com/calendar.htm
creates the output boxes by explicitly naming each line:
<input type=“number” name =“1a” size=“8” >
<input type=“number” name =“1b” size=“9” >
<input type=“number” name =“1c” size=“4” >
<input type=“number” name =“1d” size=“5” >
<input type=“number” name =“1e” size=“9” >
<input type=“number” name =“1f” size=“6” >
<input type=“number” name =“1g” size=“6” >
<br>
Those are for ONE DAY of a month. There are 30 more groups like this in the calculator.
How can this form be generated by iterations, in the same way that it is filled in?

2

If server-side scripting is an option, you might be able to have a server-side script write your client-side script.

3

I thought it was possible to create the forms on the client side by iteration. (I wish I could find that thread from 6 months ago).

4

You can use the document.write() method to write new HTML into the document. Is that what you’re asking, or am I missing a step here?



document.write("<input type=\"text\" name=\"txtA\" value=\"val\">");

will write a text box to the browser.

5

Armilla
What I am asking is:
My website calendar at this link:
http://www.1728.com/calendar.htm
has an output form that has to be defined by over 200 lines.

FROM <input type=“number” name =“1a” size=“8” >
…THROUGH
<input type=“number” name =“31g” size=“8” >

Is it possible to build this form from a routine that will only consist of 7 lines in a “while loop” consisting of 31 iterations?

6

Something like this?



for (var i=1 ; i < 32 ; i++) {
	document.write("<input type=\"number\" name=\"" + i.toString() + "a\" size=\"8\">");
	document.write("<input type=\"number\" name=\"" + i.toString() + "b\" size=\"9\">");
	document.write("<input type=\"number\" name=\"" + i.toString() + "c\" size=\"4\">");
	document.write("<input type=\"number\" name=\"" + i.toString() + "d\" size=\"5\">");
	document.write("<input type=\"number\" name=\"" + i.toString() + "e\" size=\"9\">");
	document.write("<input type=\"number\" name=\"" + i.toString() + "f\" size=\"6\">");
	document.write("<input type=\"number\" name=\"" + i.toString() + "g\" size=\"6\"><br>");
}
7

You can calso programatically add to the DOM - just locate the ID of a item you want to work with (the id of a form tag or div you add to the page, for example) and then add child nodes to the element. There are lots of articles on the internet about how to do this, I’ll provide one here, but it is not not even close to the final say on this subject…

http://www.howtocreate.co.uk/tutorials/index.php?tut=0&part=25

8

Thanks bcullman and special thanks to you ** Armilla** for writing that routine - that is precisely what I was looking for. I put it into a small template script and uploaded it here:
http://www.1728.com/tempform.htm

Not that either of you have to feel obligated to answer this but how do I fill in the form? Does the input have to be inserted at the time the form is created? I have tried inserting just 1 number into 1 box but with no success.
Anyway, thanks for all the help.

9

You’re welcome wolf_meister.

If you want to populate all of the boxes straight away then you can write it into the value attributes of the input elements by slightly modifying the original routine I posted:



document.write("<input type=\"number\" name=\"" + i.toString() + "a\" size=\"8\" value=\"Value for this input\">");

If you want to populate them later on you can use this kind of structure:



document.getElementById("1a").value = "Value for 1a";