Help calling a function

roosnanie · 10-06-2012, 09:54 PM

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>

AndrewGSW · 10-06-2012, 10:55 PM

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.

xelawho · 10-06-2012, 11:27 PM

Quote:

Originally Posted by AndrewGSW

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>

AndrewGSW · 10-06-2012, 11:58 PM

Mmm

Code:

divOutput.innerHTML += "" + name + " " + lname +  "";

works okay now. I swear it didn't use to(?). Sorry for mis-information.

xelawho · 10-07-2012, 12:04 AM

but really there's no reason why you wouldn't just do

Code:

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

Philip M · 10-07-2012, 10:30 AM

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.