What's wrong with my javascript?
September 18, 2004 6:38 AM   Subscribe

I'm having trouble using javascript in XHTML 1.1 to calculate character count in an input box and a textarea. I have a script that works with XHTML 1.0 transistional and IE only, I can't seem to get it to work with Firefox, and if I drop the name attribute from the form tag to comply with XHTML 1.1, it won't even work with IE. Please help me make it work. [code inside]

The script
<script type="text/javascript">
<!--
function updateCharCount() {
if(document.msg.from.value.length) {
document.msg.counter.value = 140 - (document.msg.message.value.length + document.msg.from.value.length);
}
else {
document.msg.counter.value = 140 - (document.msg.message.value.length);

}
}
function cursorfocus(){document.msg.from.focus();}
// -->
</script>

The form
<form method="post" action="/" name="msg" id="msg">
<fieldset>
<label for="from">From:</label><br />
<input type="text" name="from" id="from" size="16" maxlength="25" value="" onkeyup="Javascript:updateCharCount();" onchange="Javascript:updateCharCount();" tabindex="1" class="text" /><br />
<label for="message">Message:</label><br />
<textarea name="message" id="message" cols="28" rows="5" onkeyup="Javascript:updateCharCount();" onchange="Javascript:updateCharCount();" tabindex="2" class="text"></textarea><br />
Characters remaining: <input type="text" size="3" maxlength="3" name="counter" id="counter" value="140" readonly="readonly" />            <input type="submit" name="Send" value="Send Message" tabindex="3" />
</fieldset>
</form>
posted by riffola to Computers & Internet (7 answers total)
 
Best answer: Try getting a handle on the form elements with a more friendly method: document.getElementById

For instance,
document.msg.from.value.length
should be,
document.getElementById("from").value.length

That might help - seems to work in my test.
posted by kokogiak at 8:14 AM on September 18, 2004


Response by poster: Thanks for that tip, I used it and now the page is valid XHTML 1.1 and it works in IE, but Firefox still refuses to play nicely.
posted by riffola at 10:12 AM on September 18, 2004


First,I don't know if it's related, but you don't need the the Javascript: prefix in "event handlers atrributes". In other words this

onkeyup="Javascript:updateCharCount();"

can, and should, be this

onkeyup="updateCharCount();"

Firefox may be tripping up on the Javascript: bit, which is only required when placing javascript in the href (ex. href = "javascript:alert('foo');return false")*.

Second, if would behoove you to check out the javascript console and debugger built into FireFox, which make tracking down problems like these a lot easier. (all said in a friendly, non-snarky way)

*(and even the href="javascript:" is frowned upon. One really ought to place some meaningful link in the href, and then make their onclick handler look something like onclick = "alert('foo');return false;")

(of course, if we're going to get really pedantic, one ought not to be using the inline event handler attributes at all, but declaring proper event handlers)

posted by alana at 10:51 AM on September 18, 2004


Best answer: I don't know if FF support calling forms in this way

document.msg.from.value.length

anymore. I usually start JS functions like this by saying,

oForm = document.forms["msg"]

and then refer to the form that way throughout (e.g., oForm.elements["from"]). This makes it easier if you need to call the form in different ways for different browsers. It also makes it easier to abstract the script a little so you could pass the form and element names in as parameters and reuse the script in other places. The following is completely untested and fell apart a bit at the end when it occured to me adding parameters makes it hard to attach events, so there's a stupid wrapper function here too.


TOTAL_CHARACTERS = 140;
oForm = document.forms[sFormName];
oCounter = oForm.elements[sCounterName];
oFrom = oForm.elements[sFromName];

function updateCharCount(sFormName, sTextareaName, sCounterName, sFromName)
{
var iMessageLength = oForm.elements[sTextareaName].value.length;
var iFromLength = 0;

if (oFrom.value.length > 0) {
iFromLength = oFrom.value.length;
}
oCounter.value = TOTAL_CHARACTERS - oMessage.value.length;
}

function handleCharCount()
{
updateCharCount("msg", "message", "counter", "from");
}

oFrom.onchange = handleCharCount;
oFrom.onkeyup = handleCharCount;

posted by yerfatma at 11:17 AM on September 18, 2004


Best answer: yerfatma, you could include parameters to event handlers thusly:

oFrom.onchange = function() { updateCharCount("msg", "message", "counter", "from"); };
oFrom.onkeyup = function() { updateCharCount("msg", "message", "counter", "from"); };

posted by Khalad at 10:45 AM on September 19, 2004


Cool. I never considered an anonymous function. Thanks.
posted by yerfatma at 4:09 AM on September 20, 2004


Response by poster: I tried yerfatma's script with Khalad's change, and it doesn't work, it keeps saying sForm is not defined. I am actually pretty clueless when it comes to javascript. Any advice?
posted by riffola at 4:12 PM on September 21, 2004


« Older Bullet the Blue Sky   |   Soundcard and stereo receiver "hum" ? Newer »
This thread is closed to new comments.