Tuesday, December 25, 2012

Simple Verification Html for my Scripting Class

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Better Form Validation</title>
<script>
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="http://www.javascriptref.com">
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">
</form>
</body>
</html>

Scripting 1101 Stuff

Code  from and assignment in my Scripting technologies class
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/xml; charset=utf-8" />
    <title>innerHtml.html</title>
    <script type = "text/javascript">
      //<![CDATA[
      //get names
      
      function welcomeStudent(){
        txtName = document.getElementById("txtName");
     ltxtName = document.getElementById("ltxtName");
        divOutput = document.getElementById("divOutput");

        name = txtName.value;
  lname = ltxtName.value;
  
        divOutput.innerHTML = " Welcome";
        divOutput.innerHTML += "<em>" + name + " " + lname +  "<\/em>";
        divOutput.innerHTML += " to CIST 1520.";
      }
    // change backgroundColors
      
      function changeColor(color){
        document.body.style.backgroundColor = color;
      } // end changeColor
      //]]>
    </script>
  </head>

  <body>
    <h1>Click a button to change the color</h1>
    <form action = "">
      <fieldset>
        <input type = "button"
               value = "blue"
               onclick = "changeColor('blue')"/>
             
        <input type = "button"
               value = "green"
               onclick = "changeColor('green')" />
      
     <input type = "button"
               value = "red"
               onclick = "changeColor('red')" />
      </fieldset>       
             
    </form>
    <h1>Welcome to Cist 1520 Assignment 6</h1>
    <form action = "">
      <fieldset>
        <label>Please type your first name</label>
        <input type = "text"
               id = "txtName" />
       <label>Please type your last name</label>
        <input type = "text"
               id = "ltxtName" />
        <button type = "button"
                onclick = "welcomeStudent()">
          Display Greeting
        </button>
      </fieldset>
    </form>
    
    <div id = "divOutput">
      Your Message Will Appear Here!
    </div>
  </body>
</html>
The Code above helps to understand how innerHTML works..