...

View Full Version : Limit and Edit Character Input



computerfan
01-05-2011, 06:25 PM
I want to limit a textarea to 500 characters. So somebody can't type in more than 500 characters or paste anything with more then 500 characters in the text box.

However, if somebody were to enter something into the fields favoritedrink OR to favortefood, then I want the limit to change to 100 characters for the textarea. How can I do that using Javascript?

I am using the form code below as an example.



<form action="">
<input type="text" name="firstname"><br />
<input type="text" name="lastname">
<textarea rows="2" cols="20" name="description"></textarea>
<input type="text" name="favoritefood">
<input type="text" name="favoritedrink">
</form>



I need some help for my site and would so much appreciate if somebody can help me with my problem. Thanks so much for any help.

Philip M
01-05-2011, 07:41 PM
However, if somebody were to enter something into the fields favoritedrink OR to favortefood, then I want the limit to change to 100 characters for the textarea. How can I do that using Javascript?


What does that mean? What if the users enters just a space or a ? What if the users types 499 characters into the textarea and then enters something in the textbox?


To limit the number of characters typed or pasted into a textaraea:-


<script type="text/javascript">

var maxchars = 500;
function updatelen(event){
var xlen = 0;
var text = document.getElementById('text_box').value;
var txt1 = text;

var remaining = maxchars - text.length - xlen;
if (remaining < 0) {remaining = 0}
document.getElementById('tbm').innerHTML = "Characters remaining: " + remaining;
if (remaining == 0) {
text = text.substr(0, (maxchars - xlen));
document.getElementById("text_box").value = text;
alert ("You have now used the maximum number of characters allowed! ");
}
}
</script>
</head>

<body>

<p id="tbm">Characters remaining: 500</p>
<textarea id="text_box" cols="60" rows="4" onkeyup="updatelen(event);" onblur = "updatelen(event)"></textarea>


You can change the value of maxchars depending on what is typed into your textboxes.


A single parent would only be able to claim benefits for two years, and after those two years they would be literally pushed over the cliff. - Labour MP

computerfan
01-05-2011, 08:30 PM
However, if somebody were to enter something into the fields favoritedrink OR to favortefood, then I want the limit to change to 100 characters for the textarea. How can I do that using Javascript?

What does that mean? What if the users enters just a space or a ? What if the users types 499 characters into the textarea and then enters something in the textbox?


Thank you for the reply.

If somebody enters a space or a ? in the favoritedrink OR to the favortefood input fields, then everything in the textarea after character 100 gets deleted. So if there are 499 characters, characters 101-499 would be deleted and the textarea will only have 100 characters.

That's what I would like to know how to do.


Thank you

Philip M
01-05-2011, 08:59 PM
If you say so. Sounds likely to annoy your users.


<html>
<head>

<script type="text/javascript">

var maxchars = 500;

function init() {
document.getElementById('tbm').innerHTML = "Characters remaining: " + maxchars;
}

function updatelen(event){
var xlen = 0;
var text = document.getElementById('text_box').value;
var txt1 = text;
if ((document.getElementById("favoritefood").value !="") || (document.getElementById("favoritedrink").value !="")) {
maxchars = 100;
}
else {maxchars = 500}

var remaining = maxchars - text.length - xlen;
if (remaining < 0) {remaining = 0}
document.getElementById('tbm').innerHTML = "Characters remaining: " + remaining;
if (remaining == 0) {
text = text.substr(0, (maxchars - xlen));
document.getElementById("text_box").value = text;
alert ("You have now used the maximum number of characters allowed! ");
}
}
</script>
</head>

<body onload = "init()">

<p id="tbm"></p>
<textarea id="text_box" cols="60" rows="4" onkeyup="updatelen(event);" onblur = "updatelen(event)"></textarea>

<form action="">
FN<input type="text" name="firstname"><br />
LN <input type="text" name="lastname">
<textarea rows="2" cols="20" name="description"></textarea>
Food <input type="text" id = "favoritefood" name="favoritefood" onblur = "updatelen(event)">
Drink <input type="text" id = "favoritedrink" name="favoritedrink" onblur= "updatelen(event)" >
</form>
</body>
</html>

computerfan
01-05-2011, 09:42 PM
That is exactly what I wanted!!! THANK YOU!

All hail supreme master coder Philip M!

Logic Ali
01-05-2011, 09:50 PM
If somebody enters a space or a ? in the favoritedrink OR to the favortefood input fields, then everything in the textarea after character 100 gets deleted. So if there are 499 characters, characters 101-499 would be deleted and the textarea will only have 100 characters.

That's what I would like to know how to do. I wouldn't advise that as you could destroy someone's work without warning. Be aware that Internet Explorer includes newline characters in the length of a textarea's content, so will appear to apply a different limit if not handled properly. A recent thread here (http://www.webdeveloper.com/forum/showthread.php?t=240517) addresses the issue.

computerfan
01-05-2011, 10:02 PM
oh, that is interesting point Logic Ali.

To Mr. Philip M: what if instead of deleting everything, when somebody enters something into favoritedrink OR favoritefood, and a presses the submit button on the form


<input type="submit">

the person gets an error message that they need to adjust their textarea contents so that there are only 100 characters.


Also, is it possible to make it so if they enter favoritedrink, they can't enter in favoritefood and if they enter in favoritefood they can't enter in favoritedrink, all while handling the above.

----------------

So, in otherwords, if I were to fill in the form, and I fill out the textarea with 500 characters, but also enter favoritefood OR favoritedrink and then click submit, the form won't let me submit. The stuff in the text area must be 100 characters or less if there is something in favoritefood OR favoritedrink.

And I can only enter one of the following favoritefood OR favoritedrink. So if I enter favoritefood AND favoritedrink, on submit I also get an error that says I can only enter one otherwise the form won't submit.


I hope this makes sense. Your such a big help and I really appreciate it!

Philip M
01-06-2011, 09:15 AM
This seems to be developing into one of these threads where the question morphs into something else as we go along. The more I look at this the more I suspect that it is astudent assigment of some kind.

I cannot really imagine any sensible reason why a user should be permitted to type 500 characters unless he types something - even a space) into a text box, but only 100 characters if the textbox is filled. As I say, that is guaranteed to annoy your visitors. Explain, please.

And asking the user to enter his favourite food/drink screams "amateur". What possible valuable use does that information have?

My answer is "Learn Javascript" - you have been given the basis of the required code.

computerfan
01-12-2011, 04:27 PM
I apologize for the late reply.

The favorite food and favorite drink names are just made up to simplify my problem.

Anyways, I am going to be storing information in a database, but I can only store one - favorite food or favorite drink. That's why I need a javascript solution so if somebody on my site enters one, they can't enter the other. And the 500 characters to 100 characters thing helps decide which feed to go to. It's tough to explain, but I think JavaScript would be the simplist way to solve the problem.


I also apologize for the extra things in post 7 (http://www.codingforums.com/showpost.php?p=1035920&postcount=7). Logic Ali's post gave me additional ideas, it's just I don't know how to implement them. You are right learning javascript is the best way, but writing code this skilled is something that takes lots of experience or a high level of intelligence. I've tried to modify your code to suit my needs, however, I am unsuccessful.

Please see my attempt:

<html>
<head>

<script type="text/javascript">

var maxchars = 500;

function init() {
document.getElementById('tbm').innerHTML = "Characters remaining: " + maxchars;
}

function updatelen(event){
var xlen = 0;
var text = document.getElementById('text_box').value;
var txt1 = text;
if ((document.getElementById("favoritefood").value !="") || (document.getElementById("favoritedrink").value !="")) {
maxchars = 100;
}
else {maxchars = 500}

var remaining = maxchars - text.length - xlen;
if (remaining < 0) {remaining = 0}
document.getElementById('tbm').innerHTML = "Characters remaining: " + remaining;
if (remaining == 0) {
text = text.substr(0, (maxchars - xlen));
document.getElementById("text_box").value = text;
alert ("You have now used the maximum number of characters allowed! ");
}
}
function init() {
document.getElementById('tbm').innerHTML = "Characters remaining: " + maxchars;
}

function updatelen(event){
var xlen = 0;
var text = document.getElementById('favoritedrink').value;
var txt1 = text;
if ((document.getElementById("favoritefood").value !="")) {
maxchars = 100;
}
else {maxchars = 0}

var remaining = maxchars - text.length - xlen;
if (remaining < 0) {remaining = 0}
document.getElementById('tbm').innerHTML = "Characters remaining: " + remaining;
if (remaining == 0) {
text = text.substr(0, (maxchars - xlen));
document.getElementById("favoritedrink").value = text;
alert ("You have now used the maximum number of characters allowed! ");
}
}
</script>
</head>

<body onload = "init()">

<p id="tbm"></p>
<textarea id="text_box" cols="60" rows="4" onkeyup="updatelen(event);" onblur = "updatelen(event)"></textarea>

<form action="">
FN<input type="text" name="firstname"><br />
LN <input type="text" name="lastname">
<textarea rows="2" cols="20" name="description"></textarea>
Food <input type="text" id = "favoritefood" name="favoritefood" onblur = "updatelen(event)">
Drink <input type="text" id = "favoritedrink" name="favoritedrink" onblur= "updatelen(event)" >
</form>
</body>
</html>


If you have the time to help me, I would so greatly appreciate it. No more changes, I thought it through. If not, I understand, but still thank you.

Philip M
01-12-2011, 05:36 PM
Far simpler to have one textbox only "Enter your favorite food OR favorite drink".



Food <input type = "text" id = "food" onkeyup = "chk()">
Drink <input type = "text" id = "drink" onkeyup = "chk()">

<script type = "text/javascript">
function chk() {
var f = document.getElementById("food").value.length;
var d = document.getElementById("drink").value.length;
if (f!=0 && d !=0) {
alert ("You may only fill in one of these boxes");
if (d==1) {document.getElementById("drink").value = ""}
if (f==1) {document.getElementById("food").value = ""}
}
}
</script>

computerfan
01-12-2011, 06:42 PM
Thank you, but when I put in a submit button, it still submits.

If one enters in favorite food AND favorite drink, upon clicking submission an error saying only one can be entered should be thrown out and no submission should happen.


<form action="http://www.saiyanisland.com">
Food <input type = "text" id = "food" onkeyup = "chk()">
Drink <input type = "text" id = "drink" onkeyup = "chk()">

<input type = "submit">
</form>
<script type = "text/javascript">
function chk() {
var f = document.getElementById("food").value.length;
var d = document.getElementById("drink").value.length;
if (f!=0 && d !=0) {
alert ("You may only fill in one of these boxes");
if (d==1) {document.getElementById("drink").value = ""}
if (f==1) {document.getElementById("food").value = ""}
}
}
</script>

Thank you again.

Philip M
01-12-2011, 08:34 PM
Well, you need to call the validation function from the form tag

<form action="http://www.saiyanisland.com" onsubmit = "return chk()">

and add return false to block submission if the validation is not passed.


if (f!=0 && d !=0) {
alert ("You may only fill in one of these boxes");
if (d>0) {document.getElementById("drink").value = ""}
return false;
}
}

or better have just one textbox with two radios to select "Food" and "Drink".

computerfan
01-12-2011, 10:44 PM
Thanks it works! You are the best!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum