Gossamer Forum: General: Internet Technologies: Writing HTML, without document.write in JS :/

Jun 4, 2006, 12:35 PM

Andy

Veteran / Moderator (18441 posts)

Jun 4, 2006, 12:35 PM

Post #1 of 6

Shortcut

Writing HTML, without document.write in JS :/

Hi guys,

Not sure if anyone can help me :/

Basically - I have this code;

Code:
<html> 
<head> 
    <title>New Page 6</title> 
</head> 

<body> 

    <script type="text/javascript"> 
        function makeFormsFields(numberoffields) { 
            alert('number of fields to make: ' + numberoffields); 
            for (var i=0; i<numberoffields; i++) { 
                var newInput = document.createElement('input'); 
                newInput.type = 'text'; 
                newInput.name = 'input' + (i+1); 
                newInput.size = '20'; 
                newInput.value = 'New input ' + (i+1); 
                document.forms[0].appendChild(newInput); 
            } 
        } 
    </script> 

    <form method="POST" action="#"> 
        <p> 
            <select size="1" name="NumberOfFiles" onchange="makeFormsFields(this.value);"> 
                <option value="1">1</option> 
                <option value="2">2</option> 
                <option value="3">3</option> 
                <option value="4">4</option> 
                <option value="5">5</option> 
                <option value="6">6</option> 
            </select> 
        </p> 
    </form> 
</body> 
</html>

This gives a dropdown box, with a text box incrimenting, each "printing" (i.e text1, text2, etc).

My problem comes with this - I need to output a much more advanced set of content :/

i.e (for each one);

Code:
<table border="1" style="border-collapse: collapse" width="47%" id="table1"> 
    <tr> 
        <td width="153"><b>Document XX</b></td> 
        <td>&nbsp;</td> 
    </tr> 
    <tr> 
        <td width="153">Level of Document:</td> 
        <td><select size="1" name="LevelXX"> 
        <option>GCSE</option> 
        <option>A-Level</option> 
        <option>I.B</option> 
        <option>University</option> 
        </select></td> 
    </tr> 
    <tr> 
        <td width="153">Number of Words:</td> 
        <td><input type="text" name="NumberOfWordsXX" size="20"></td> 
    </tr> 
    <tr> 
        <td width="153">File:</td> 
        <td><input type="file" name="FileNameXX" size="20"></td> 
    </tr> 
</table>

I tried document.write, but apparantly that "overwrites" existing content, if run AFTER the page has loaded.

Is what I'm doing even possible? I've hit a bit of a major road block :(

TIA!

Andy (mod)
andy@ultranerds.co.uk

Jun 4, 2006, 5:39 PM

dan

Enthusiast (760 posts)

Jun 4, 2006, 5:39 PM

Post #2 of 6

Shortcut

Re: [Andy] Writing HTML, without document.write in JS :/ In reply to

How about the following:

Code:

<html>
<head>
<title>New Page</title>
</head>
<body>
<script type="text/javascript">
function makeFormsFields(numberoffields) {
alert('number of fields to make: ' + numberoffields);
document.write('<form action="#" method="POST">');
for (var i=0; i < numberoffields; i++) {
document.write('<table border="1" style="border-collapse: collapse" width="47%" id="table1">');
document.write('<tr>');
document.write('<td width="153"><b>Document ' + (i + 1) + '</b></td>');
document.write('<td> </td>');
document.write('</tr>');
document.write('<tr>');
document.write('<td width="153">Level of Document:</td>');
document.write('<td><select size="1" name="Level' + (i + 1) + '">');
document.write('<option>GCSE</option>');
document.write('<option>A-Level</option>');
document.write('<option>I.B</option>');
document.write('<option>University</option>');
document.write('</select></td>');
document.write('</tr>');
document.write('<tr>');
document.write('<td width="153">Number of Words:</td>');
document.write('<td><input type="text" name="NumberOfWords' + (i + 1) + '" size="20"></td>');
document.write('</tr>');
document.write('<tr>');
document.write('<td width="153">File:</td>');
document.write('<td><input type="file" name="FileName' + (i + 1) + '" size="20"></td>');
document.write('</tr>');
document.write('</table>');
}
document.write('<input type="submit" value="submit">');
document.write('</form>');
}
</script>
<form>
<p>
<select size="1" name="NumberOfFiles" onchange="makeFormsFields(this.value);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</p>
</form>
</body>
</html>

----
Cheers,

Dan
Founder and CEO

LionsGate Creative
GoodPassRobot
Magelln

Jun 5, 2006, 12:58 AM

Andy

Veteran / Moderator (18441 posts)

Jun 5, 2006, 12:58 AM

Post #3 of 6

Shortcut

Re: [dan] Writing HTML, without document.write in JS :/ In reply to

Hi,

Thanks for the reply. Unfortunatly, this comes back to the same problem I had before :( Calling document.write *after* the initial page has loaded, will simply clear out any old content.

I was doing this in conjunction with LSQL - so ended up making a cool little bit of template code, and then just used;

Code:
function makeFormsFields(numberoffields) { 
           window.location = "http://www.domain.com/cgi-bin/e/page.cgi?page=filerenew;numfiles=" + numberoffields; 
}

...and then just a "loop" in the template, with;

<%if numfiles%>
show the html tables, via a LOOP
<%else%>
show the select box, which calls the makeFormsFields() function above
<%endif%>

Not the ideal situation, but it defo gives me a bit more flexability in terms of what I can do/advanced error checking the fields etc :)

Thanks again.

Andy (mod)
andy@ultranerds.co.uk

Jun 5, 2006, 8:01 AM

dan

Enthusiast (760 posts)

Jun 5, 2006, 8:01 AM

Post #4 of 6

Shortcut

Re: [Andy] Writing HTML, without document.write in JS :/ In reply to

That would happen. My example was a tad contrived, but based on the HTML you provided in your example - no HTML other than prompt. You can get around this by using <div> tags in such a way that document.write is limited to the division block, thereby not overwriting the other HTML. At any rate, good work on the solution!

----
Cheers,

Dan
Founder and CEO

LionsGate Creative
GoodPassRobot
Magelln

Jun 5, 2006, 9:31 PM

mkp

User (83 posts)

Jun 5, 2006, 9:31 PM

Post #5 of 6

Shortcut

Re: [dan] Writing HTML, without document.write in JS :/ In reply to

document.write and document.writeln imply document.open when the document object is not open. document.open acts like opening a file for read only -- the file is truncated to 0 length first (the document is cleared). document is the only object with 'open', 'write', 'writeln', and 'close' methods, so document.object.write will not work. You can instead modify the object.innerHTML variable.

Example:

Code:
<html> 
<head> 
<script type="text/javascript"> 
function rewrite () { 
	document.getElementById ("foo").innerHTML = "bar"; 
} 
</script> 
</head> 
<body onload="window.setTimeout('rewrite', 5000)"> 
<div id=foo>Can you count to 5?</div> 
</body> 
</html>

After 5 seconds, the text "Can you count to 5?" will change to "bar".

Of course, this is not the preferred method of changing document content. There are other DOM methods to help with that, such as document.createElement, document.createTextNode, document.createRange, document.importNode, element.insertBefore, element.removeChild, element.replaceChild, element.setAttribute, etc. As these are part of DOM, they are not supported on older browsers.

(When I use JS to modify the document's contents) I tend to use element.innerHTML when I'm just changing some simple text within an element (instead of having to deal with text nodes).

Jun 5, 2006, 10:46 PM

dan

Enthusiast (760 posts)

Jun 5, 2006, 10:46 PM

Post #6 of 6

Shortcut

Re: [mkp] Writing HTML, without document.write in JS :/ In reply to

Yep, right you are. I was writing from my experience where I usually use this in dynamically generated popup situations. My bad. So of course yes, no existing static document to be overwritten - but, in Andy's [contrived] example, no existing HTML to overwrite (except the code to setup the JS). But when I do write to an 'open' file, it is usually to embed images (e.g., image previews when image selected from list). Then I use document.getElementById, and IMG (using id) tags.

However as an aside, I usually prefer server-side non-JS methods when I want to introduce such user-interactive dynamic attributes - for example, page1 -> page2 - page3 -> etc. Client-side scripts etc. run the risk that the end-user does not have feature (e.g., JavaScript) enabled.

----
Cheers,

Dan
Founder and CEO

LionsGate Creative
GoodPassRobot
Magelln