...

View Full Version : Show the submit button only when/if count = 200?



student101
07-28-2009, 01:45 PM
Is there a way I can display the submit button only when or if the count = 200?

<script type="text/javascript">
// <![CDATA[
function countChar(){
var tform = document.getElementById("my_form");
tform.count.value = tform.title.value.length*1+tform.message.value.length;
}
// ]]>
</script>
<form id="my_form" onkeyup="countChar();">
<input type="text" name="title" />
<br />
<textarea name="message" cols="75" rows="10"></textarea>
<br />
You've typed <input size="3" type="text" name="count" value="0" /> characters<br />
<!-- Only show me when the count hits 200 -->
<input type="submit" name="button" id="button" value="Submit" />
</form>

Amphiluke
07-28-2009, 01:56 PM
<script type="text/javascript">
// <![CDATA[
function countChar(){
var tform = document.getElementById("my_form");
var _count = tform._title.value.length*1+tform.message.value.length;
tform.count.value = _count.toString();
tform.button.style.visibility = (_count == 200) ? "visible" : "hidden";
}
// ]]>
</script>
<form action="#" id="my_form" onkeyup="countChar();">
<input type="text" name="_title" />
<br />
<textarea name="message" cols="75" rows="10"></textarea>
<br />
You've typed <input size="3" type="text" name="count" value="0" /> characters<br />
<!-- Only show me when the count hits 200 -->
<input type="submit" name="button" id="button" value="Submit" style="visibility:hidden;" />
</form>

student101
07-28-2009, 02:04 PM
Thanks but it doesn't seem to work as expected.

If I turn this around;
"hidden" : "visible";
It shows as soon as I type so not sure where the error is?

MattF
07-28-2009, 02:05 PM
Something along these lines may work:



<script type="text/javascript">
function show_button(id, field)
{
if (field.value.length > 199)
{
document.getElementById(id).style.display = 'inline';
}
}
</script>


Change the textarea to:



<textarea id="message" name="message" onkeyup="show_button('button', this.form[this.id]);" cols="75" rows="10"></textarea>


Set your submit button to hidden via CSS.

Amphiluke
07-28-2009, 02:16 PM
Thanks but it doesn't seem to work as expected.
I have tested in all browsers I have... It works for me: submit button becomes visible only when strictly 200 characters are typed. Maybe I do not understand the thing?

student101
07-28-2009, 02:20 PM
I have tested in all browsers I have... It works for me: submit button becomes visible only when strictly 200 characters are typed. Maybe I do not understand the thing?
Found it!

>=
when it hit 200 then it shows, after or before "200" then it doesn't show.

Now it shows.
Thanks that was very quick of you!

student101
07-28-2009, 02:23 PM
Something along these lines may work
Sorry MattF, I am trying your method a bit lost :confused:

12 Pack Mack
07-28-2009, 02:31 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function countChars(nTxtArea,nForm){

nForm['charCount'].value = nTxtArea.value.length;
nForm['submit'].style.visibility = nTxtArea.value.length >= 200 ? "visible" : "hidden";
}

function init(){

var nForm = document.forms[0];
nForm['submit'].style.visibility = "hidden";
nForm['message'].onkeyup = function()
{
countChars(this,nForm);
}
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
<style type="text/css">

.messageArea {width: 350px; height: 100px; padding-left: 3px; padding top: 5px;
font-size: 11pt; text-align: justify;}
.char_count {text-align: right; font-size: 10pt;}

</style>
</head>
<body>
<form action="" method="post">

<textarea name="message" class="messageArea"></textarea>
<br><br>
<label>You've typed:
<input type="text" size="3" name="charCount" class="char_count" readonly>
Characters </label>
<br><br>
<input type="submit" name="submit" value="Submit">

</form>
</body>
</html>

MattF
07-28-2009, 02:34 PM
Sorry MattF, I am trying your method a bit lost :confused:

You're better off with the one you already have working. :)

student101
07-28-2009, 02:35 PM
Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum