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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Stuck On Limiting Input

    Hi There,
    I've had this computing project and I'm stuck on how to limit the length using javascript code where I need to limit the Examination Number entry to 4 numbers here is my code:
    Code:
    <html>
    <head>
    <title>Exam entry</title>
    <script language="javascript" type="text/javascript">
    function validateForm() {
    var result = true;
    var msg="";
    if (document.ExamEntry.name.value=="") {
    msg+="You must enter your name \n";
    document.ExamEntry.name.focus();
    document.getElementById('name').style.color="red";
    result = false;
    }
    if (document.ExamEntry.subject.value=="") {
    msg+="You must enter the subject \n";
    document.ExamEntry.subject.focus();
    document.getElementById('subject').style.color="red";
    result = false;
    }
    if (document.ExamEntry.examnum.value=="") {
    msg+="You must enter an examination number \n";
    document.ExamEntry.examnum.focus();
    document.getElementById('examnum').style.color="red";
    result = false;
    }
    if(msg==""){
    return result;
    }
    {
    alert(msg)
    return result;
    }
    }
    </mnlen>  
    </script>
    </head>
    <body>
    <h1>Exam Entry Form</h1>
    <form name="ExamEntry" method="post" action="success.html">
    <table width="50%" border="0">
    <tr>
    <td id="name">Name</td>
    <td><input type="text" name="name" /></td>
    </tr>
    <tr>
    <td id="subject">Subject</td>
    <td><input type="text" name="subject" /></td>
    </tr>
    <tr>
    <td id="examnum">Examination Number</td>
    <td><input type="text" name="examnum" /></td>
    </tr>
    <tr>
    <td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();") /></td>
    <td><input type="reset" name="Reset" value="Reset" /></td>
    </tr>
    </table>
    </form>
    </body>
    </html>
    Thanks if you reply, I've just been researching and for some reason every way I try it does not seem to work.
    Last edited by VIPStephan; 06-03-2013 at 10:24 AM. Reason: added code BB tags

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    I removed </mnlen> at the end of the JS section. Changed type to number in Examination Number input. [this does not work in firefox, did not check any other browser - it's supposed to limit input here to numbers only HTML5] So I'll leave that up to you.

    Why do you have ID's for the names of your inputs? Don't think this is right. Had to add one to the one in qestion.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Exam entry</title>
    <script language="javascript" type="text/javascript">
    function validateForm() {
    	var result = true;
    	var msg="";
    	if (document.ExamEntry.name.value=="") {
    		msg+="You must enter your name \n";
    		document.ExamEntry.name.focus();
    		document.getElementById('name').style.color="red";
    		result = false;
    	}
    	if (document.ExamEntry.subject.value=="") {
    		msg+="You must enter the subject \n";
    		document.ExamEntry.subject.focus();
    		document.getElementById('subject').style.color="red";
    		result = false;
    	}
    	if (document.ExamEntry.examnum.value=="") {
    		msg+="You must enter an examination number \n";
    		document.ExamEntry.examnum.focus();
    		document.getElementById('examnum').style.color="red";
    		result = false;
    	}
    	if(msg==""){
    		return result;
    	}
    	{
    		alert(msg)
    		return result;
    	}
    }
    
    function numLimit(numb){
    	var limitnumb = numb.substring(0, 4);
    	needed.value = limitnumb;
    }
    </script>
    </head>
    
    <body>
    <h1>Exam Entry Form</h1>
    <form name="ExamEntry" id="ExamEntry" method="post" action="success.html" onsubmit="return validateForm();">
    <table width="50%" border="0">
    <tr>
    <td id="name">Name</td>
    <td><input type="text" name="name" /></td>
    </tr>
    <tr>
    <td id="subject">Subject</td>
    <td><input type="text" name="subject" /></td>
    </tr>
    <tr>
    <td id="examnum">Examination Number</td>
    <td><input type="number" id="needed" name="examnum" onkeyup="numLimit(this.value);"></td>
    </tr>
    <tr>
    <td><input type="submit" name="Submit" value="Submit") /></td>
    <td><input type="reset" name="Reset" value="Reset" /></td>
    </tr>
    </table>
    </form>
    </body>
    Evolution - The non-random survival of random variants.

  • Users who have thanked sunfighter for this post:

    NathanBlaise (06-03-2013)

  • #3
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you very much will try this out in other browsers.

  • #4
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    And sorry I'm new to HTML and JavaScript so I never realised the importance of the ID's on the inputs, but thank you.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,472
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Giving a form a name is a really antiquated way of doing things that went out of use with Netscape 4. If the individual form fields have ids then simply reference them directly instead or since your form has an id then use that to reference the form instead of the name.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Also, language="javascript" is long obsolete.

    In other words:
    Code:
    <form id="ExamEntry" method="post" action="success.html" onsubmit="return validateForm(this);">
    ...
    </form>
    <script type="text/javascript">
    // more modern: put the script *after* the form
    function validateForm(form) {
    	var result = true;
    	var msg="";
    	if (form.name.value=="") {
    		msg+="You must enter your name \n";
    		form.name.focus();
    		document.getElementById('name').style.color="red";
    		result = false;
    	}
            ... etc ...
    Or, even better, let JS assign the onsubmit event to the <form>:
    Code:
    <form id="ExamEntry" method="post" action="success.html">
    ...
    </form>
    <script type="text/javascript">
    document.getElementById("ExamEntry").onsubmit =
        function( )
        {
    	var result = true;
    	var msg="";
    	if (this.name.value=="") {
    		msg+="You must enter your name \n";
    		this.name.focus();
    		document.getElementById('name').style.color="red";
    		result = false;
    	}
            ... etc ...
    And then, finally, I have to ask about this:
    Code:
    <form id="ExamEntry" method="post" action="success.html">
    You can't normally use method="post" when submitting a <form> to another HTML page. The only way I know to do this would be to have URL rewriting in place that would actually send "success.html" to some server-side code, instead (e.g., reroute the submission to "success.php" or "success.asp" or similar).
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Okay, one more.

    It seems really silly to have both the result and msg variables.

    Kill all use of result and, at then end of the validation, simply do:
    Code:
    	if(msg==""){ return true; }
    	alert(msg);
            return false;
    But also be aware that alert( ) is itself obsolescent. Many browsers now allow the user to turn off alerts.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,472
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Quote Originally Posted by Old Pedant View Post
    But also be aware that alert( ) is itself obsolescent. Many browsers now allow the user to turn off alerts.
    or to use an alert to turn off JavaScript for that web page.

    alert('check the box below to turn off JavaScript');

    In Opera this produces:



    all other alerts do the same except for the text they display in the middle of the box.
    Last edited by felgall; 06-03-2013 at 11:30 PM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    And another overall problem with that page: If you detect a validation error. you set one of your <td>s style.color to red. Fine. But then if the user corrects that error, you have nothing to change the color back to normal.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

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