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..
<!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:

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

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:

<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

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

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.