Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

"hanging" in FireFox :/ 1

Status
Not open for further replies.

youradds

Programmer
Joined
Jun 27, 2001
Messages
817
Location
GB
Hi,

For those of you who have seen my previous posts, you'll know I'm a Javascript novice <G> Due to my job at the moment, I'm taking the plunge to learn at least the basics, so I can do the simpler stuff, rather than having to outsource it to programmers :) I have a Perl/PHP/MySQL programming background, so appologies if my mistake it a silly one =)

Ok, now to the nitty-gritty.

I have this code;

Code:
<html>

<head>
<title>New Page 6</title>
</head>

<body>

<script>
function makeFormsFields(numberoffields) {
  alert("number of fields to make: " + numberoffields );

   	for (i = 0; i < numberoffields; i++) {
//     document.write('test ' + i + '\n');
     document.write('foo ');
   }  
  
}
</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 works fine in IE (although a little weird results - i.e I would have expected the existing HTML etc to remain, using the document.write method?)

But anyway, the major problem is this: In Firefox (latest version), it shows the select box fine - you click a number, and it shows the right value, but then it prints out the first line (foo, in thi case), and then just hangs, and hangs, and hangs :/)

Can anyone point me in the right direction? :)

TIA!

Andy
 
You were close:

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>

Using "document.write" after the page has loaded will cause the entire page (including any scripts) to be overwritten with the new content.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Hi,

You're an absolute star mate! Rating coming your way =)

Now just to try and work out how to do the more intriqute stuff :/ (gotta make a selection of HTML for each of them , i.e they choose 6, then it will make 6 new "tables" of content, with things like "Title", "File1", "Level" etc :().

Ah well, its all a learing process :)

Thanks again!

Andy
 
You can also set "innerHTML" on most elements instead of having to create each element manually:

Code:
someEl.innerHTML = '<b>this has some stuff in it<span>...</span><input type="text" name="wibble" value="Hello mum!">';

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Hi,

Ah, that would make it a lot easier :)

Basically, this is the format I'm going to be taking:

Code:
<table border="1" style="border-collapse: collapse" width="47%" id="table1">
	<tr>
		<td width="153"><b>Document [B]XX[/B]</b></td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td width="153">Level of Document:</td>
		<td><select size="1" name="Level[B]XX[/B]">
		<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="NumberOfWords[B]XX[/B]" size="20"></td>
	</tr>
	<tr>
		<td width="153">File:</td>
		<td><input type="file" name="FileName[B]XX[/B]" size="20"></td>
	</tr>
</table>

(one table, per value selected - with the numbers differing, depending on the value .. i.e form 4 would have FileName4, Title4, NumberOfWords4, etc)

Would you mind showing me how to pass "i" into this equation? Sorry for all my silly questions, I really want to get to grips with it all (most of its like PHP/Perl, but there are some quite subtle differences - i.e "else if", whereas in PHP its "elseif", and Perl, "elsif" :'().

TIA! I really appreciate your help on this one. I guess I should really have started on a smaller project <G>

Cheers

Andy
 
I'm not sure what you mean about the "i" thing... My first example showed the name and value of the box being dynamic (set from "i", in fact).

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Hi,

Haha, sorry, been a long day :(

Ok, I'll try and explain -

From the dropdown, if someone selected "3", it would output the following HTML;

Code:
<table border="1" style="border-collapse: collapse" width="47%" id="table1">
    <tr>
        <td width="153"><b>Document 1</b></td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td width="153">Level of Document:</td>
        <td><select size="1" name="Level1">
        <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="NumberOfWords1" size="20"></td>
    </tr>
    <tr>
        <td width="153">File:</td>
        <td><input type="file" name="FileName1" size="20"></td>
    </tr>
</table>

<table border="1" style="border-collapse: collapse" width="47%" id="table1">
    <tr>
        <td width="153"><b>Document 2</b></td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td width="153">Level of Document:</td>
        <td><select size="1" name="Level2">
        <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="NumberOfWords2" size="20"></td>
    </tr>
    <tr>
        <td width="153">File:</td>
        <td><input type="file" name="FileName2" size="20"></td>
    </tr>
</table>

<table border="1" style="border-collapse: collapse" width="47%" id="table1">
    <tr>
        <td width="153"><b>Document 3</b></td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td width="153">Level of Document:</td>
        <td><select size="1" name="Level3">
        <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="NumberOfWords3" size="20"></td>
    </tr>
    <tr>
        <td width="153">File:</td>
        <td><input type="file" name="FileName3" size="20"></td>
    </tr>
</table>

I'm just a bit confused as to how I should use this method of printing out the HTML;

Code:
someEl.innerHTML = '<b>this has some stuff in it<span>...</span><input type="text" name="wibble" value="Hello mum!">';

TIA!

Andy
 
To insert a variable into that, you would use something like this:

Code:
someEl.innerHTML = '<td><input type="text" name="NumberOfWords' + i + '" size="20"></td>';

So if "i" were 2, you would get:

Code:
someEl.innerHTML = '<td><input type="text" name="NumberOfWords2" size="20"></td>';

Dan




Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Hi,

Thanks, thats perfect :) (I ended up taking a diff approach though, using 2 stages - 1) select the number of documents to submit, and then 2) generate the required JS code, based on the number they specified).

However, the above post will no doubt be very helpful in the near future. Thanks for sharing :)

Cheers
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top