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

Jun 4, 2006, 12:35 PM

Andy

Veteran / Moderator (17297 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

IMPORTANT: I've now moved to ultranerds.co.uk, and the .com will no longer work!
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package (plugins total "value" $3,325 & rising, for just $350)| GLinks ULTRA Package PRO (plugins total "value" $5,625 & rising, for just $500)
Support Forum | Links SQL Plugins | DMOZ Dumps | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Compare our different Plugin packages *new* Free CSS Templates

Jun 4, 2006, 5:39 PM

dan

Enthusiast (749 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
Principal

Virtual Solutions

Jun 5, 2006, 12:58 AM

Andy

Veteran / Moderator (17297 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 (749 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
Principal

Virtual Solutions

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 (749 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
Principal

Virtual Solutions