Help with javascript

[bahua]

I figured this site has some people that know their web programming pretty well, so I thought I'd bounce this off you guys before I resort to paying for help.

I've been working on a new version of my website for some time, and there's no real hurry in getting it working, but one extremely troubling bit is some javascript I'm trying to get working. In the comment interface, I have two forms. The first form is viewable by the user, and has two writable inputs, a text field and a textarea. There's a button at the bottom of that form that makes a preview div appear below, and updates that preview when the user updates the textarea.

It also passes the filled-in values to hidden values for submission.

The whole thing works beautifully in firefox2, but firefox2 is notoriously accomodating of bad code. It just plain doesn't work in the other browsers I've tried (opera9 and ie6/7).

Here's the principal code:

Code: Select all

<script language="javascript" type="text/javascript">
function validate() {
	var ok = 'OK';
	var enc = 'ezf2x6';
	document.comment.human.value = ok;
	document.comment.try.value = enc;
}
function populate() {
	var name = document.draft.name.value;
	var txt = document.draft.txt.value;
	document.comment.name.value = name;
	document.comment.txt.value = txt;
}
function hideshow() {
	var disp = true;
	var upd = "Update";
	document.getElementById("preview").style.display = disp ? "" : "none";
	window.scrollBy(0,500);
	document.draft.prevupd.value = upd;
}
</script>
<div style="margin: 5px;">
<h2>Chime in:</h2>
<form name="draft">
<b>Name:</b><br>
<input class="i" name="name"><br> 
<b>Comment:</b><br>
<textarea class="ti" name="txt" rows="6" wrap="physical"></textarea><br>
<input class="b" type="button" name="prevupd" value="Preview" onclick="javascript:populate();hideshow();">
</form>
</div>
<div id="preview" style="display: none; margin: 5px;">
<h2>Comment Preview:</h2>
<form name="comment" action="/cgi/comment.bdc" method="post" enctype="multipart/form-data">
<input type="hidden" name="name">
<input type="hidden" name="id" value="p/N9hU">
<textarea name="txt" rows="6" wrap="physical" style="font: 14px Verdana; padding: 3px; width: 100%; border: 1px dashed #000; background: #8FA8BF; color: #000;" readonly></textarea><br>
<b>Validation:</b> <input class="b" name="human" type="button" value="Click Here to Prove Your Humanity" onclick="javascript:validate();document.comment.human.disabled = true;"> <b>If you're human, feel feel to</b> 
<input type="hidden" name="try" value="">
<input type="hidden" name="val" value="Hy2qGPTMAFc">
<input class="b" type="submit" value="Submit">
</form>
</div>

The error I get in Opera's error console, which makes no sense as far as I can tell is:

Inline script compilation
Syntax error while loading: line 6 of inline script at http://beta.bahua.com/?a=N9hU :

document.comment.try.value = enc

----------------------^

Any ideas?

[mean]

I'll look at this in greater detail tomorrow, but first impression is that it looks fine. Not sure what the problem is. But it's late, and I have a headache. I'll hit you up on gchat.

[bahua]

I ran this by a friend, and he informed me that "try" is a reserved name. I changed it to "attempt" and the problems cleared up. At least, it cleared up enough to start moving again.

[mean]

Ahh, there you go.

[kcteen]

Bahua,

Best practice is to always run javascript through jslint as either part of a build process or using their web front-end (www.jslint.com).

It is a lifesaver. It enforces writing really good js and would have caught this problem!

[anniewarbucks]

Cool website by the way Bahua. You did a good job.