/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Form character counter reset button issue.

Hello all,
My first post here.
I have an issue with this forms reset button.
In FireFox 2/3 the character counter resets to the default 2500 characters remaining. No issues there.
However In IE 6/7/8 beta 2 the counter resets to 2495.
My knowledge of .js is pretty poor.
I can provide a link to the form if required.
Regards.

[code=html]<div class=”row”>
<span class=”formlabel”>your enquiry</span>
<span class=”forminput”><textarea onkeypress=”return taLimit(this);” onkeyup=”return taCount(this,’myCounter’);” name=”message” cols=”18″ rows=”5″></textarea></span>
</div>

<div class=”row”>
<div class=”countertext”>
<script type=”text/javascript”>
/* <![CDATA[ */
document.write(“<p><span id=”myCounter”>2500</span> characters remaining.<Vp>”);
/* ]]> */
</script>
<noscript><p>2500 characters limit.</p></noscript>
</div>
</div>

<div class=”row”>
<span class=”formlabel”></span>
<span class=”forminput”><input type=”submit” value=”Submit” class=”submit” /> <input type=”reset” onmousedown=”return taCount(this, ‘myCounter’);” class=”reset” /></span>
</div>[/code]

[CODE]maxL=2500;
var bName = navigator.appName;
function taLimit(taObj) {
if (taObj.value.length==maxL) return false;
return true;
}

function taCount(taObj,Cnt) {
objCnt=createObject(Cnt);
objVal=taObj.value;
if (objVal.length>maxL) objVal=objVal.substring(0,maxL);
if (objCnt) {
if(bName == “Netscape”){
objCnt.textContent=maxL-objVal.length;}
else{objCnt.innerText=maxL-objVal.length;}
}
return true;
}
function createObject(objId) {
if (document.getElementById) return document.getElementById(objId);
else if (document.layers) return eval(“document.” + objId);
else if (document.all) return eval(“document.all.” + objId);
else return eval(“document.” + objId);
}[/CODE]

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@ZeroKilledNov 04.2008 — i would suggest you to enclose the inputs on form tag so that when you press reset the content get back to original state. also, create another function to reset the counter. taCount is more aimed to track the lenght of textarea elements:
<i>
</i>function counterReset(counter){
document.getElementById(counter).innerHTML = maxL;
}

&lt;input type="reset" onmousedown="counterReset('myCounter');" class="reset" /&gt;
Copy linkTweet thisAlerts:
@vwphillipsNov 04.2008 — [CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var maxL=2500;

function taLimit(taObj) {
if (taObj.value.length==maxL) return false;
return true;
}

function taCount(taObj,Cnt) {
if (taObj.type=='reset') return objCnt.innerHTML=maxL;
objCnt=document.getElementById(Cnt);
objVal=taObj.value;
if (objVal.length>maxL) objVal=objVal.substring(0,maxL);
if (objCnt) {
objCnt.innerHTML=maxL-objVal.length;
}
return true;
}



/*]]>*/
</script></head>

<body>
<form>
<div class="row">
<span class="formlabel">your enquiry</span>
<span class="forminput"><textarea onkeypress="return taLimit(this);" onkeyup="return taCount(this,'myCounter');" name="message" cols="18" rows="5"></textarea></span>
</div>


<div class="row">
<div class="countertext">
<script type="text/javascript">
/* <![CDATA[ */
document.write('<p><span id="myCounter">2500</span> characters remaining.<Vp>');
/* ]]> */
</script>
<noscript><p>2500 characters limit.</p></noscript>
</div>
</div>

<div class="row">
<span class="formlabel"></span>
<span class="forminput"><input type="submit" value="Submit" class="submit" />
<input type="reset" onmousedown="return taCount(this, 'myCounter');" class="reset" /></span>
</div>
</form>
</body>

</html>[/CODE]
Copy linkTweet thisAlerts:
@Bob_Arctor_1Nov 04.2008 — Thank you.

I've had to log in under a different user name. Password problem.

I'll get on to admin on that.

@ZeroKilled that function works.

I tried a few very dumb functions - Just got a bit silly. Could not see the wood from the trees/script.

@vwphillips - That's pretty stripped down. I'll test that out.

Is it best practice to replace references to .innerText with .innerHTML ?


Regards.

You've made a baffled man somewhat less perplexed.
×

Success!

Help @Bob_Arctor spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.15,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...