Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    17
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Limit and Edit Character Input

    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.

    Code:
    <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.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by computerfan View Post
    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:-

    Code:
    <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
    Last edited by Philip M; 01-05-2011 at 06:46 PM.

  • Users who have thanked Philip M for this post:

    computerfan (01-05-2011)

  • #3
    New Coder
    Join Date
    Jan 2011
    Posts
    17
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by computerfan View Post
    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?
    Quote Originally Posted by Philip M View Post
    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

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    If you say so. Sounds likely to annoy your users.

    Code:
    <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>
    Last edited by Philip M; 01-05-2011 at 08:03 PM.

  • Users who have thanked Philip M for this post:

    computerfan (01-05-2011)

  • #5
    New Coder
    Join Date
    Jan 2011
    Posts
    17
    Thanks
    9
    Thanked 0 Times in 0 Posts
    That is exactly what I wanted!!! THANK YOU!

    All hail supreme master coder Philip M!

  • #6
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by computerfan View Post

    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 addresses the issue.

  • #7
    New Coder
    Join Date
    Jan 2011
    Posts
    17
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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

    Code:
    <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!
    Last edited by computerfan; 01-05-2011 at 09:13 PM.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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.

  • #9
    New Coder
    Join Date
    Jan 2011
    Posts
    17
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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. 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:
    Code:
    <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.
    Last edited by computerfan; 01-12-2011 at 03:31 PM.

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Far simpler to have one textbox only "Enter your favorite food OR favorite drink".

    Code:
    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>

  • Users who have thanked Philip M for this post:

    computerfan (01-12-2011)

  • #11
    New Coder
    Join Date
    Jan 2011
    Posts
    17
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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.

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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.

    Code:
    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".
    Last edited by Philip M; 01-12-2011 at 07:54 PM.

  • Users who have thanked Philip M for this post:

    computerfan (01-12-2011)

  • #13
    New Coder
    Join Date
    Jan 2011
    Posts
    17
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Thanks it works! You are the best!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •