www.webdeveloper.com
Results 1 to 12 of 12

Thread: Text Box Delete Letters After Character Limit Reached

  1. #1
    Join Date
    May 2009
    Posts
    7

    Text Box Delete Letters After Character Limit Reached

    Hi,

    Can any one help me, on an order page we have text boxes where you can put say 19 characters. If you use 18 characters you can still delete any characters if you have made a spelling mistake. However if you use all characters up and you get to the end, it will then not let you delete any characters if you have made a mistake. can any one help me with this. The code for the boxes is

    <input type="text" size="60" onKeyPress="return taLimit('familyname')" onKeyUp="return taCount('familynamelimit', 'familyname')"
    id="familyname" name="familyname" rows=1 wrap=physical cols=28 maxLength="19">
    </input type="text">
    <br>
    <span class="style93"><span class="style54">You have </span><B><SPAN id=familynamelimit name=familynamelimit>19</SPAN></B> characters remaining <span class="style54">for your Surname...</span></span></font> <span class="style94">
    </input type="text">

    I look forward to any advice.

    All the best
    Chris

  2. #2
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    first of, the code you showed is incomplete. we still need to see the function code. and second, i don't see the purpose why you would use javascript to limit the chars length when the maxlength attribute serve for that purpose.
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  3. #3
    Join Date
    May 2009
    Posts
    7
    Hi,

    Is this the rest of the code below which is at the top of the web page?
    I'm not a programmer just a designer, so I apologise if my question sounds dumb, I'm just trying to fix a problem. So I do appreciate any advice.




    <script language = "Javascript">
    function taLimit(frmObj) {
    if (frmObj) {
    var taObj=document.getElementById(frmObj);
    if (taObj.value.length==taObj.maxLength*1) return false;
    }
    }

    function taCount(visCnt, frmObj) {
    if (frmObj) {
    var taObj=document.getElementById(frmObj);
    if (taObj.value.length>taObj.maxLength*1) taObj.value=taObj.value.substring(0,taObj.maxLength*1);
    if (visCnt) {
    document.getElementById(visCnt).childNodes[0].nodeValue=taObj.maxLength-taObj.value.length;
    }
    }
    }
    </script>

    Cheers
    Chris

  4. #4
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    remove this piece from the input element.
    Code:
    onKeyPress="return taLimit('familyname')"
    also, have a clean markup. the following element are invalid, remove all instance
    Code:
    </input type="text">
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  5. #5
    Join Date
    May 2009
    Posts
    7

    Smile

    Hi ZeroKilled,

    Thank you for your help, I really do appreciate it.

    All the best
    Chris

  6. #6
    Join Date
    May 2009
    Posts
    7

    Text box 4 lines down of text instead of one single line

    Hi ZeroKilled,

    Thank you for your help, do you know how to make the text box above into a big square box to show about 4 lines down of text instead of one single line of text.

    Plus do you know of some java to use with a tick box that unless the box is ticked they get a warning to tick the terms and conditions box before they can go onto the next level.

    It would be greatly appreciated if you could help me.

    All the best
    Chris

  7. #7
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    make the input element to a textarea, input element can't have multiple lines.
    Code:
    <textarea rows="4" cols="60" onKeyUp="return taCount('familynamelimit', this)" id="familyname" name="familyname" ></textarea>
    however, you now have to consider that TEXTAREA element don't have maxlength attribute. update the function taCount to:
    Code:
    function taCount(visCnt, frmObj) {
    var limit = 19;
    frmObj.value.length > limit)frmObj.value = frmObj.value.substring(0, limit);
    document.getElementById(visCnt).innerHTML = limit - frmObj.value.length;
    }
    for the box to thick, you have to validate if the box is ticked when the form submit. when it isn't thicked, return false to prevent form submission.

    Code:
    <form ... onsubmit="
    if(!this.accept.checked){
    alert("You have to accept agreement of terms and conditions.");
    return false;
    }
    ">
    <input type='checkbox' name="accept" />
    </form>
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  8. #8
    Join Date
    May 2009
    Posts
    7

    Hi ZeroKilled I tried but failed

    Hi ZeroKilled,

    I tried the two snippets of code one for the Personal Message:text box to make it four levels down also with character limit to 175 and also tried the code for the Please check this box to indicate that you have read and understood the Store Policy to make it flag up to say if someone did not tick the stores policy button that they must tick it. I could not get any to work.

    Could you have a look at the following page and help me with what goes where?


    http://www.webgatorz.com/ordertest.php

    As always I appreciate your help

    All the best
    Chris

  9. #9
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    i assume that formcheck.js file contain the code for checking the form. however, for some reason the browser isn't loading the file formcheck.js, the file is returning me 404 not file found. make sure that the file exists in server.
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  10. #10
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    not sure, but try this:
    Code:
    function formCheck() {
    var i;
    errors='';
    a=formCheck.arguments;
    	for (i=0; i<(a.length-1); i+=2) {
    	test=a[i+1];
    	val=findObject(a[i]);
    		if (val) {
    		n=val.name;
    			if (test == 'r'){
    			if(!val.checked)errors += '- '+n+' is required.\n';
    			} else if ((val=val.value)!="") {
    				if (test.indexOf('isEmail')!=-1) {
    				p=val.indexOf('@');
    				if (p<1 || p==(val.length-1)) errors+='- '+n+' must contain an e-mail address.\n';
    				} else if (test!='n') {
    				num = parseFloat(val);
    				if (isNaN(val)) errors+='- '+n+' must contain a number.\n';
    					if (test.indexOf('inRange') != -1) {
    					p=test.indexOf(':');
    					min=test.substring(8,p); max=test.substring(p+1);
    					if (num<min || max<num) errors+='- '+n+' must contain a number between '+min+' and '+max+'.\n';
    					}
    				}
    			} else if (test.charAt(0) == 'n') errors += '- '+n+' is required.\n';
    		}
    	}
    if (errors) alert('The following error(s) occurred:\n'+errors);
    document.formErrors = (errors == '');
    }
    and in onsubmit change the second argument to 'r'.
    Code:
    onSubmit="formCheck('TsandCs','r','PurchaserEmail','nisEmail','RecipientName','n','RecipientAddress','n','FamilyName','n','NamedFor','n','ExtraCharts','ninRange0:50');return document.formErrors"
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  11. #11
    Join Date
    May 2009
    Posts
    7
    Cheers for that the form check for the store policy box works. Looks like I will have to give up on the text area box with 4 lines deep 175 character limit as it still does not work ?

    Thanks for your help ZeroKilled

  12. #12
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    apart that the box look very small, what is so wrong about the TEXTAREA? if that's your concern, then remove the style height and assign rows attribute with value 4.
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles