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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Location
    Atlanta, ga
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Help calling a function

    THis is part two of my assignment, we are learning to validate forms ... im supposed to have it output a little welcome message I have in the function welcomestudent().. check my code and help me call it out if you can..
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Better Form Validation</title>
    <script>
          function welcomeStudent(){
            txtName = document.getElementById("userFname");
    		   ltxtName = document.getElementById("userLname");
            divOutput = document.getElementById("divOutput");
    
            name = userFname.value;
    		lname = userLname.value;
    		
            divOutput.innerHTML = " Welcome ";
            divOutput.innerHTML += "" + name + " " + lname +  "";
            divOutput.innerHTML += " to CIST 1520.";
          }
    function isEmpty(s) {
       var valid = /\S+/.test(s);
       return !valid;
    }
    
    function validate()
    {
      if (isEmpty(document.myform.userFname.value))
        {
            alert("Error: First Name is required.");
            document.myform.userFname.focus();
            return false;
        }
     if (isEmpty(document.myform.userLname.value))
        {
            alert("Error: Last Name is required.");
            document.myform.userLname.focus();
            return false;
        }
      return true;
    }
    
    window.onload = function(){
        document.getElementById("myform").onsubmit = validate;
    };
    </script>
    </head>
    <body>
    <form name="myform" id="myform" method="get"
          action = "">
    First name: 
    <input type="text" name="userFname" id="userFname" 
           size="30" maxlength="60">
    <br>
    Last name: 
    <input type="text" name="userLname" id="userLname" 
           size="30" maxlength="60">
    <br>
    <input type="submit" value="Submit" onclick = "welcomeStudent()"> 
    </form>
      <div id = "divOutput">
          Your Message Will Appear Here!
        </div>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    We cannot append to innerHTML in this way:

    Code:
    divOutput.innerHTML += "" + name + " " + lname +  "";
    // could use
    divOutput.innerHTML = divOutput.innerHTML + name + " " + lname;
    You will need to be careful when using both onsubmit (for the form) and onclick on the submit button, as they kinda overlap - but it's probably not a concern with your current code.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,930
    Thanks
    56
    Thanked 552 Times in 549 Posts
    Quote Originally Posted by AndrewGSW View Post
    We cannot append to innerHTML in this way:
    wha? why not? the bigger problem you are going to have is naming your variables and IDs the same thing. Better like this:

    Code:
    <div id="thediv"></div>
    <script>
    divOutput = document.getElementById("thediv");
            name = "John";
    		lname = "Smith";
            divOutput.innerHTML = " Welcome ";
            divOutput.innerHTML += "" + name + " " + lname +  "";
            divOutput.innerHTML += " to CIST 1520.";
    </script>

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Mmm

    Code:
    divOutput.innerHTML += "" + name + " " + lname +  "";
    works okay now. I swear it didn't use to(?). Sorry for mis-information.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,930
    Thanks
    56
    Thanked 552 Times in 549 Posts
    but really there's no reason why you wouldn't just do

    Code:
    document.getElementById("divOutput").innerHTML = " Welcome " + name + " " + lname +  " to CIST 1520.";

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    function isEmpty(s) {
    var valid = /\S+/.test(s);
    return !valid;
    }


    This pattern of validation is not really adequate as any non-whitespace character, even a digit or a ? will return false, that is pass the validation. A proper name may only contain letters, hyphen, space and apostrophe. This topic has been covered many times before in this forum.

    As AndrewGSW says, avoid assigning the same name to an HTML elemnt and a Javascript variable.
    Last edited by Philip M; 10-07-2012 at 10:32 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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