REQ: New Question Form ( new JavaScript Student )

Discussion in 'Javascript' started by Sue, Dec 10, 2003.

  1. Sue

    Sue Guest

    In this code why is it that when I press the SUBMIT button the focus
    only goes back to the Numeric field. What do I need to do to correct
    this problem?

    Sue




    <html>

    <head>
    <title>JavaScript Project</title>
    <SCRIPT LANGUAGE="JAVASCRIPT">
    <!--Hide from old browsers
    function Validate() {
    var themessage = "You are required to complete the following fields:
    ";

    // validate the Firstname
    if (document.Register.FirstName.value=="") {
    alert("Please enter your Firstname");
    document.Register.FirstName.value="";
    document.Register.FirstName.focus();
    }

    else {
    // validate the Lastname
    if (document.Register.LastName.value=="") {
    alert("Please enter your Lastname");
    document.Register.LastName.value="";
    document.Register.LastName.focus();
    }
    else {

    // validate Age as be numeric
    var YearsOld=document.Register.Age.value;
    var YearsOld=parseInt(YearsOld,10);
    if (isNaN(YearsOld)) {
    alert("Age is not numeric");
    document.Register.Age.value="";
    document.Register.Age.focus();
    }
    else {

    // validate the @ sign and the period as being the fourth
    from the last character in an e-mail address
    var RegeMail=document.Register.email.value;
    var atSign = RegeMail.indexOf("@");

    var Period=document.Register.email.value;
    var PPeriod = Period.indexOf('.');
    var LPeriod = Period.length - 4;

    if (RegeMail == "" || atSign == -1 || LPeriod !=
    PPeriod) {
    alert("Please enter a valid e-mail address");
    document.Register.email.value = "";
    document.Register.email.focus();
    }
    else{

    // validate the Gender in a drop down menu
    var sex=document.forms[0].Gender.selectedIndex;
    if (sex==0) {
    alert("You must select your GENDER from the drop-down
    Menu.");
    document.forms[0].Gender.focus();
    }
    else
    {

    //alert if fields are empty and cancel form submit
    if (themessage == "You are required to complete the following fields:
    ") {
    document.Register.submit();
    }
    else {
    alert(themessage);
    return false;
    }
    }
    }
    }
    }
    }
    }

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

    <body>

    <center>

    <form name=Register method="post" action="">
    <table border="0" width="90%">

    <!-- Begining of the first line of the form for entering data. -->
    <tr>
    <td>Enter Your Firstname :</td><td align="center">
    <Input Type="text" Name="FirstName" value=" "></td>
    <td>&nbspEnter Your Age :</td> <td align="center">
    <Input Type="numeric" Name="Age" value=" "></td>
    <td align="center">Select your : <SELECT NAME="Gender" SIZE=1 >
    <OPTION SELECTED VALUE=""> --- Select Gender ---
    <OPTION VALUE="Male">Male
    <OPTION VALUE="Female">Female
    </SELECT>
    </td>
    </tr>
    <!-- ending of the first line of the form for entering data. -->
    <tr>
    <td></td>
    </tr>

    <!-- Begining of the second line of the form for entering data. -->
    <tr>
    <td align="center">Enter Your Lastname :</td><td align="center">
    <Input Type="text" Name="LastName" value=" "></td>
    <td align="center">Enter Your Email Address :</td> <td
    align="center">
    <Input Type="text" Name="email" value=" "></td>
    <td align="right"><input type=button value="Submit Request"
    onclick="Validate();">
    <Input Type="Reset"></td>
    </tr>
    <!-- ending of the second line of the form for entering data. -->

    </body>
    </html>
     
    Sue, Dec 10, 2003
    #1
    1. Advertising

  2. Sue

    Lee Guest

    Sue said:
    >
    >In this code why is it that when I press the SUBMIT button the focus
    >only goes back to the Numeric field. What do I need to do to correct
    >this problem?


    In the HTML, you set the initial value of the fields to a single space
    character:

    > <Input Type="text" Name="LastName" value=" "></td>


    Your Validate() code checks to see if the fields are empty.
    A single space character is not the same as an empty field.
    Change your HTML value attributes to "".
     
    Lee, Dec 10, 2003
    #2
    1. Advertising

  3. Sue

    Sue Guest

    Re: REQ: New Question From ( new JavaScript Student )

    On 10 Dec 2003 08:16:18 -0800, Lee <> wrote:

    >Sue said:
    >>
    >>In this code why is it that when I press the SUBMIT button the focus
    >>only goes back to the Numeric field. What do I need to do to correct
    >>this problem?

    >
    >In the HTML, you set the initial value of the fields to a single space
    >character:
    >
    >> <Input Type="text" Name="LastName" value=" "></td>

    >
    >Your Validate() code checks to see if the fields are empty.
    >A single space character is not the same as an empty field.
    >Change your HTML value attributes to "".


    Hey Lee,

    Thanks for explaining that to me. Now one last question before I have
    to turn this project in on Friday.

    This is not necessary for my project but I have created a function to
    do more extensive checking for numbers in the Age field. However, I am
    unable to insert this function into the code without it causing
    problems. Is there an easy fool proof way to call this function
    without a lot of difficulty. Thanks

    Sue


    function CheckAge(Age) {
    var valid = "0123456789"
    var Good = "yes";
    var Check;
    for (var i=0; i<Age.value.length; i++) {
    Check = "" + Age.value.substring(i, i+1);
    if (valid.indexOf(Check) == "-1") Good = "no";
    }
    if (Good == "no") {
    alert("An INVALID Character has been entered for your age !");
    document.Register.Age.value="";
    document.Register.Age.focus();
    }
    }
     
    Sue, Dec 11, 2003
    #3
  4. Re: REQ: New Question From ( new JavaScript Student )

    Sue wrote:

    > This is not necessary for my project but I have created a function to
    > do more extensive checking for numbers in the Age field. However, I am
    > unable to insert this function into the code without it causing
    > problems. Is there an easy fool proof way to call this function
    > without a lot of difficulty. Thanks
    > [...]
    > function CheckAge(Age) {


    function checkAge(age)
    {

    (Note that the case changed for good style.)

    > var valid = "0123456789"
    > var Good = "yes";


    Do not use strings for booleans, use booleans.

    var good = true;

    But you will not need that initialization and the `valid'
    variable if you use Regular Expressions and write

    > var Check;


    var check;

    > for (var i=0; i<Age.value.length; i++) {
    > Check = "" + Age.value.substring(i, i+1);


    check = age.charAt(i);

    is, although not required for the RegExp solution, far more simple.
    Even with String.substring(...) the concatenation with "" is not
    required since String.substring(...) already returns a `string' value.

    > if (valid.indexOf(Check) == "-1") Good = "no";
    > }


    var good = /^\d+$/.test(age); // Only one or more decimal digit?

    > if (Good == "no") {


    if (! good)
    {

    > alert("An INVALID Character has been entered for your age !");
    > document.Register.Age.value="";
    > document.Register.Age.focus();


    var oAge = document.forms["Register"].elements["Age"];
    oAge.value = "";
    oAge.focus();
    }

    > }
    > }



    HTH

    PointedEars
     
    Thomas 'PointedEars' Lahn, Dec 11, 2003
    #4
  5. Sue

    Sue Guest

    Re: REQ: New Question From ( new JavaScript Student )

    On Thu, 11 Dec 2003 22:30:03 +0100, Thomas 'PointedEars' Lahn
    <> wrote:

    >Sue wrote:
    >
    >> This is not necessary for my project but I have created a function to
    >> do more extensive checking for numbers in the Age field. However, I am
    >> unable to insert this function into the code without it causing
    >> problems. Is there an easy fool proof way to call this function
    >> without a lot of difficulty. Thanks
    >> [...]
    >> function CheckAge(Age) {

    >



    <snip>

    Thomas,

    I tried to make the changes you suggested but some of this is over my
    head. The charAt(i) has not been in any of the chapters that I have
    had to do and I have done every chapter in the book this quarter. For
    self gratification I would like to be able to plug this code into my
    project but I have been unable to plug it in with out it causing
    problems and my time is up tomorrow (Friday).



    function checkAge(age) {
    var valid = "0123456789"
    var good = true;
    var check;
    for (var i=0; i<Age.value.length; i++) {
    check = age.charAt(i);
    var good = /^\d+$/.test(age); // Only one or more decimal digit?
    }
    if (! good) {
    alert("An INVALID Character has been entered for your age !");
    var oAge = document.forms["Register"].elements["Age"];
    oAge.value = "";
    oAge.focus();
    }
    }
     
    Sue, Dec 12, 2003
    #5
  6. Re: REQ: New Question From ( new JavaScript Student )

    [posted & mailed (the latter accidentally, though)]

    Sue wrote:

    > I tried to make the changes you suggested but some of this is over my
    > head. The charAt(i) has not been in any of the chapters that I have
    > had to do and I have done every chapter in the book this quarter.


    It looks like you have one of the plenty of badly written JavaScript
    books out there (see also the FAQ, there is only *one* which can be
    recommended): charAt(...) is a *basic* method of the String prototype,
    returning the character of the respective String (object) at the index
    `i' (where the index is zero-based). Throw the book away and read the
    specs instead (as you see, you can download the entire Guide/Reference
    to your local hard disk; I have reconfigured my local Web server for
    quick access which I can recommend you, too):

    http://devedge.netscape.com/library/manuals/

    > For self gratification I would like to be able to plug this code into
    > my project but I have been unable to plug it in with out it causing
    > problems and my time is up tomorrow (Friday).


    Search the index of the JavaScript 1.x Core Guide/Reference, it is
    the fastest way to find what you are looking for. Here's the working
    function (only snipped the parts no longer necessary):

    function checkAge(age) {
    var good = /^\d+$/.test(age); // Only one or more decimal digit?
    if (! good)
    {
    alert("An INVALID Character has been entered for your age!");
    var oAge = document.forms["Register"].elements["Age"];
    oAge.value = "";
    oAge.focus();
    }
    }

    A little bit more optimization is possible, removing another unnecessary
    variable:

    function checkAge(age) {
    // Does it contain a character other than a decimal digit?
    if (! /^\d+$/.test(age))
    {
    alert("An INVALID Character has been entered for your age!");
    var oAge = document.forms["Register"].elements["Age"];
    oAge.value = "";
    oAge.focus();
    }
    }

    I guess you need that for form validation, so you would instead write:

    <script type="text/javascript">
    <!--
    function checkAge(oAge) { // pass a reference to the obj. 2b checked
    // Does it contain a character other than a decimal digit?
    if (! /^\d+$/.test(oAge.value))
    {
    alert("An INVALID Character has been entered for your age!");
    oAge.value = "";

    if (typeof oAge.focus == "function"
    || typeof oAge.focus == "object")
    {
    oAge.focus();
    }

    return false;
    }

    return true;
    }
    //-->
    </script>

    <form action="..." onsubmit="return checkAge(this.elements['Age']);">
    ...
    <input name="Age">
    ...
    </form>

    You should always pass references to a form-processing function instead
    of primitive values as they are not that error-catching and you can use
    them also within the function, without retrieving them (via collections)
    again.


    HTH

    PointedEars
    --
    Dr. Weaver: What's with the cat?
    Cop in Morgue: Well, there's a problem with the cat. Sign here.
    Dr. Weaver: [signing] What's the problem with the cat?
    Cop in Morgue: It's your problem.
     
    Thomas 'PointedEars' Lahn, Dec 12, 2003
    #6
  7. Sue

    Sue Guest

    Re: REQ: New Question From ( new JavaScript Student )

    On Fri, 12 Dec 2003 05:35:49 +0100, Thomas 'PointedEars' Lahn
    <> wrote:

    >[posted & mailed (the latter accidentally, though)]
    >
    >Sue wrote:
    >
    >> I tried to make the changes you suggested but some of this is over my
    >> head. The charAt(i) has not been in any of the chapters that I have
    >> had to do and I have done every chapter in the book this quarter.

    >
    >It looks like you have one of the plenty of badly written JavaScript
    >books out there (see also the FAQ, there is only *one* which can be
    >recommended): charAt(...) is a *basic* method of the String prototype,
    >returning the character of the respective String (object) at the index
    >`i' (where the index is zero-based). Throw the book away and read the
    >specs instead (as you see, you can download the entire Guide/Reference
    >to your local hard disk; I have reconfigured my local Web server for
    >quick access which I can recommend you, too):
    >
    >http://devedge.netscape.com/library/manuals/
    >
    >> For self gratification I would like to be able to plug this code into
    >> my project but I have been unable to plug it in with out it causing
    >> problems and my time is up tomorrow (Friday).

    >
    >Search the index of the JavaScript 1.x Core Guide/Reference, it is
    >the fastest way to find what you are looking for. Here's the working
    >function (only snipped the parts no longer necessary):
    >
    > function checkAge(age) {
    > var good = /^\d+$/.test(age); // Only one or more decimal digit?
    > if (! good)
    > {
    > alert("An INVALID Character has been entered for your age!");
    > var oAge = document.forms["Register"].elements["Age"];
    > oAge.value = "";
    > oAge.focus();
    > }
    > }
    >
    >A little bit more optimization is possible, removing another unnecessary
    >variable:
    >
    > function checkAge(age) {
    > // Does it contain a character other than a decimal digit?
    > if (! /^\d+$/.test(age))
    > {
    > alert("An INVALID Character has been entered for your age!");
    > var oAge = document.forms["Register"].elements["Age"];
    > oAge.value = "";
    > oAge.focus();
    > }
    > }
    >
    >I guess you need that for form validation, so you would instead write:
    >
    > <script type="text/javascript">
    > <!--
    > function checkAge(oAge) { // pass a reference to the obj. 2b checked
    > // Does it contain a character other than a decimal digit?
    > if (! /^\d+$/.test(oAge.value))
    > {
    > alert("An INVALID Character has been entered for your age!");
    > oAge.value = "";
    >
    > if (typeof oAge.focus == "function"
    > || typeof oAge.focus == "object")
    > {
    > oAge.focus();
    > }
    >
    > return false;
    > }
    >
    > return true;
    > }
    > //-->
    > </script>
    >
    > <form action="..." onsubmit="return checkAge(this.elements['Age']);">
    > ...
    > <input name="Age">
    > ...
    > </form>
    >
    >You should always pass references to a form-processing function instead
    >of primitive values as they are not that error-catching and you can use
    >them also within the function, without retrieving them (via collections)
    >again.
    >
    >
    >HTH
    >
    >PointedEars



    Thanks Thomas,

    I check out your url and recommend to the instructor that he list is
    as an aid in future class.

    Sue
     
    Sue, Dec 13, 2003
    #7
  8. Re: REQ: New Question From ( new JavaScript Student )

    Sue < > writes:

    > Thanks Thomas,


    Please reduce your quotes. There is no need to include 96 lines of quotes
    to add four lines of answer.

    > I check out your url and recommend to the instructor that he list is
    > as an aid in future class.


    One or two lines of quotes would be sufficient to give the context needed
    to understand your answer.

    /L
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, Dec 13, 2003
    #8
  9. Re: REQ: New Question From ( new JavaScript Student )

    Sue wrote:

    > [...] Thomas 'PointedEars' Lahn [...] wrote:
    >> [...]
    >> Sue wrote:
    >>> I tried to make the changes you suggested but some of this is over my
    >>> head. The charAt(i) has not been in any of the chapters that I have
    >>> had to do and I have done every chapter in the book this quarter.

    >>
    >> It looks like you have one of the plenty of badly written JavaScript
    >> books out there (see also the FAQ, there is only *one* which can be
    >> recommended): charAt(...) is a *basic* method of the String prototype,
    >> returning the character of the respective String (object) at the index
    >> `i' (where the index is zero-based). Throw the book away and read the
    >> specs instead (as you see, you can download the entire Guide/Reference
    >> to your local hard disk; I have reconfigured my local Web server for
    >> quick access which I can recommend you, too):
    >>
    >> http://devedge.netscape.com/library/manuals/
    >> [...]

    >
    > Thanks Thomas,


    You are welcome, but please trim your quotes to the part(s) you are
    actually referring to the next time. Time, bandwidth and disk space
    are precious resources.

    > I check out your url and recommend to the instructor that he list is
    > as an aid in future class.


    Good idea.


    PointedEars
     
    Thomas 'PointedEars' Lahn, Dec 13, 2003
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Joshua
    Replies:
    8
    Views:
    6,090
    Joshua
    Sep 29, 2004
  2. judith
    Replies:
    5
    Views:
    348
    schouery
    Oct 16, 2006
  3. Replies:
    3
    Views:
    596
    Bernd Strieder
    Aug 11, 2006
  4. Sue
    Replies:
    7
    Views:
    164
    Richard Cornford
    Dec 10, 2003
  5. Sue
    Replies:
    5
    Views:
    171
Loading...

Share This Page