Smart questions
Smart answers
Smart people
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Member Login




Remember Me
Forgot Password?
Join Us!

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips now!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

Join Tek-Tips
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Donate Today!

Do you enjoy these
technical forums?
Donate Today! Click Here

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.
Jobs from Indeed

Link To This Forum!

Partner Button
Add Stickiness To Your Site By Linking To This Professionally Managed Technical Forum.
Just copy and paste the
code below into your site.

scripter73 (Programmer)
8 Oct 01 12:23
Hi,

I have some Javascript prompt boxes.  How do I limit the user's input to a specific number of characters?  I don't want the users to go wild with entering this information.

Also, how can I restrict the phone number prompt box to accept only numeric characters?

The prompt boxes are designed in the following code:


function process_report(){
    if (document.form1.reportby.value != "CHARTER POLICYHOLDER"){
        //window.alert('You selected ' + document.form1.reportby.value);
        var username = ' ';
        while (username == '' | username == ' ' | username == 'Name here'
        | username == null) {
            username = window.prompt('Please enter your name' , 'Name here');
            }
        var userphone = '';
        while (userphone == '' | userphone == ' ' | userphone == '(Digits only)'
        | userphone == null) {
            userphone = window.prompt('Please enter your telephone number:',
            '(Digits only)');
            }
        var usermail = window.prompt('Please enter your email address:' ,
        '(Email Address)');
        //document.write("The values selected were:" + username + "," + userphone)
        //Send values back to hidden fields
        document.form1.webusername.value = username;
        document.form1.webuserphone.value = userphone;
        document.form1.webusermail.value = usermail;
    }
}





Thanks in advance for the info.

Meeka Freeman
ToddWW (Programmer)
8 Oct 01 13:31
Use the maxlength property in the input tags to limit the amount of characters that can be typed in the text box.  Like this..

<input type="text" maxlength="20">


I use this code to limit specific input. (Such as numbers only for your phone number field).

function fieldCheck() {
    var strValid = "0123456789"
    var strRef = Reference to Form Element
    var strValue = strRef.value.toUpperCase()
    for (i = 0; i < strValue.length; i++) {
        if (strValid.indexOf(strValue.charAt(i)) < 0) {
            window.alert ("Invalid Character   " + strValue.charAt(i))
        }
    }
}

You need to provide reference to the exact field that you want to examine.  Place the characters that are allowed in the strValid variable and VIOLA, character validation !!  This function will put the invalid character, if any, in the alert window for you.

TW
ToddWW (Programmer)
8 Oct 01 13:36
One more thought.  The maxlength property only works in text input boxes (I think) and is the easiest way to limit the number of characters.  

However, for textarea boxes, you will need JavaScript to validate string length for you.  The length property works on any string so you can use it on text input elements as well.

function checkLength() {
  var strRef = Reference to Form Element
  if (strRef.value.length > 20) {
     window.alert("More than 20 characters not acceptable")
  }
}

Untested, but should work.  

TW
scripter73 (Programmer)
8 Oct 01 15:19
Hi,

Thanks ToddWW for your quick replies.  I considered your suggestion, however, these prompt boxes appear as a result of what a user selects in a select box.  For example,
suppose you have a select box that asks who's reporting the information to the web and your choices are:  1)  Teacher 2)  Student  3)  Teaching Assistant.  Once the user selects an option, these pop-up boxes appear.  

Unfortunately, I can't think of a way to limit the user input or size.  I'd like to incorporate the following to restrict the user to entering only numbers in the phone number section:

onKeypress="if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;"


But I don't know how to handle the triggering of that event in the prompt method.

Thanks for your help,
scripter73
ToddWW (Programmer)
8 Oct 01 15:51
OK.  I think you lost me.  When you say "prompt boxes" are you talking about the "confirm" method where what looks like an alert box comes up but has a field for user input ??

TW
scripter73 (Programmer)
8 Oct 01 16:01
Sorry to confuse you.  I have a form that contains a button.  When the user clicks on that button, a function process_report() is called that prompts the user with 3 javascript prompt boxes.  I want to restrict the user's amount of input in these prompt boxes and in one of the boxes, I want to restrict the user to numbers only.

Here's the code:


<html>
<head>
    <title>Prompts User for Information</title>
    
    <script language="Javascript">
<!--

function process_report(){
    
        //window.alert('You selected ' + document.form1_blank.reportby.value);
        var username = ' ';
        while (username == '' | username == ' ' | username == 'Name here'
        | username == null) {
            username = window.prompt('Please enter your name' , 'Name here');
            }
        var userphone = '';
        while (userphone == '' | userphone == ' ' | userphone == '(Digits only)'
        | userphone == null) {
            userphone = window.prompt('Please enter your telephone number:',
            '(Digits only)');
            }
        var usermail = window.prompt('Please enter your email address:' ,
        '(Email Address)');
        //document.write("The values selected were:" + username + "," + userphone)
        //Send values back to hidden fields
        document.form1.webusername.value = username;
        document.form1.webuserphone.value = userphone;
        document.form1.webusermail.value = usermail;
    
}


//-->
</script>
    
</head>

<body>
<form name="form1">
<br>
<input type="button" name="Test Process" value="Test Process" onclick="process_report()">

</form>

</body>
</html>


Thanks in advance.

scripter73



ToddWW (Programmer)
8 Oct 01 16:46
OK.  Now I see.  Sorry for the confusion.  Well, I don't know of any way to prevent a visitor from entering many characters in the prompt box.  However, you can evaluate what they put in that box and examine their entry before your script continues on.  Use the examples I gave you above to do your evaluations.

Another option, which might make the validation and your coding much easier, would be to have your button generate a small pop-up window that asks all three questions in a form.  Then have JavaScript validate the entries and submit the form.  How does that sound ??

TW
scripter73 (Programmer)
8 Oct 01 16:59
Hi ToddWW,

I would have loved to use that option when I first started coding, but I had trouble creating the pop-up window with three text boxes, labels, and a submit button.

I've done it before, I just can't seem to duplicate my efforts.  

Any ideas?

Thanks,
scripter73
ToddWW (Programmer)
8 Oct 01 17:36
Try this as a template.  You may need to add some things and put some fu fu in there to make it look good.

<script>
function validateFunction(form_obj) {
   if (some conditional statement) {
      window.alert("An Error Message")
      return false
   }

   if (some other conditional statement) {
      window.alert("A Different Error Message")
      return false
   }

   return true
}
</script>


<html>
<form name="myform" method="post" action="url_to_post_to" onSubmit="return validateFunction(this);">
  Field 1:<input name="field1" type="text" maxlength="25" length="25" value=""><br>
  Field 2:<input name="field2" type="text" maxlength="25" length="25" value=""><br>
  Field 3:<input name="field3" type="text" maxlength="25" length="25" value=""><br>
  <input type="submit" value="Send It">
</form>
</html>

Take a look at the JavaScript validation function.  The form passes the form reference to the function which can be used by referencing form_obj.  For example, if you want to test field #1 in a conditional statement, you would type something like this.

if (form_obj.field1.value == "")

The form_obj is a reference to the form that those fields are in.  Now, anywhere in your validation function, the command "return false" will stop executing the javascript function and return a false parameter back to the form, which will prevent the form from posting.  I put the "return true" statement at the end of my validation functions just for kicks.  I think the form will submit even if you don't do that.

Take that code, and give it a test.  When I'm testing validation code, I usually have the form post to itself.  That way, your test page keeps coming back up instead of having to fish for it after the form posts to another page.  Once I'm happy with the validation, I have the form post to the cgi.  

You can do other things in the JavaScript function like send focus to a field if it doesn't pass validation like this...

if (form_obj.field1.value == "") {
   window.alert("Please enter a value in Field #1")
   form_obj.field1.focus()
   return false
}

Let me know if we're making progress here.  I would highly recommend that you get this working over your previous solution.  It's so much easier to expand on and if you are having some memory problems with writing forms, textboxes, etc...  This would be a good start.  You'll probably need this training in the future.

I was pretty vague in the JavaScript validation example, so if you need some specific code, try using the examples I've already given you or let me know.  I put the maxlength value in each textbox which, of course, you can change at will.

TW
ToddWW (Programmer)
8 Oct 01 17:40
Oh sorry, I forgot the pop up window function.  The code I gave you above goes in a seperate HTML document that you will call from your original button.  Do it like this.

<script>

function openSub() {
   window.open("url_of_form_page")
}

</script>




<html>
<input type="button" name="Test Process" value="Test Process" onclick="openSub();">
</html>


That opens a new window.  There are other things you can put into that function which can identify the size of the window, scrollbars, menubars, etc....  Let me know if you need some help with that.

TW
scripter73 (Programmer)
8 Oct 01 18:08
Thanks, ToddWW.

I'll try it out right now and let you know how it works.

Thanks again,

scripter73

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Back To Forum

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close