HTML source code in ThatIsEz host

From CMEE4K
Jump to navigation Jump to search

simpleForm.html

<!DOCTYPE html>
<html>
<head>
<title>Perl CGI Env</title>
</head>
<body>
<h3>Simple form web page to show: how CGI variables are passed from HTML page to CGI program.<h3>
<form action="/cgi-bin/hello.php">
Using Hello PHP code:<br>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br>
  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password">
  <input type="hidden" value="PHP">
  <input type="submit" Value="Submit">
</form>
<hr>
<form action="/cgi-bin/hello.pl">
Using Hello Perl code:<br>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br>
  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password">
  <input type="hidden" value="Perl">
  <input type="submit" Value="Submit">
</form>
<hr>
<form action="/cgi-bin/hello.py">
Using Hello Python code:<br>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br>
  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password">
  <input type="hidden" value="Python">
  <input type="submit" Value="Submit">
</form>
</table>
</body>
</html>

JavaScriptForm.html

<!DOCTYPE html>
<html>
<head>
<title>Show JavaScript</title>
</head>
<body>
<h3>Use JavaScript to control HTML DOM.</h3>

Hello, I am <u id='myname'>________</u>.    
<u id='enterName' onclick="enterName('myname');">Enter your name</u>
<br><br>

<u onclick="alert('Alert pop up');">Show a pop-up window</u>      
<u onclick="showhide('phpform');">PHP</u>      
<u onclick="showhide('perlform');">Perl</u>      
<u onclick="showhide('pythonform');">Python</u> <br><br>

<!--  Comment: PHP submit form -->
<div id="phpform" style="background-color:lightyellow">
  <form action="/cgi-bin/hello.php" onsubmit="return verifyInput('phpfname','phplname','phppasswd');">
  Using Hello <b>PHP</b> code:<br>

  <label name="fname"  for="fname">First name:</label>  
  <input name="fname"  type="text" id="phpfname" name="fname"><br>

  <label name="lname"  for="lname">Last name:</label>  
  <input name="lname"  type="text" id="phplname" name="lname"><br>

  <label name="passwd" for="password">Password:</label>    
  <input name="passwd" type="password" id="phppasswd"><br>

  <input name="submit" type="submit" Value="Submit">
  <input name="type"   type="hidden" value="PHP">
  </form>
<br><hr>
</div>

<!-- comment: Perl submit form -->
<div id="perlform" style="background-color:#ffccff">
  <form action="/cgi-bin/hello.pl" onsubmit="return verifyInput('perlfname','perllname','perlpasswd');">
  Using Hello <b>Perl</b> code:<br>

  <label name="fname"  for="fname">First name:</label>  
  <input name="fname"  type="text" id="perlfname" name="fname"><br>

  <label name="lname"  for="lname">Last name:</label>  
  <input name="lname"  type="text" id="perllname" name="lname"><br>

  <label name="passwd" for="password">Password:</label>    
  <input name="passwd" type="password" id="perlpasswd"><br>

  <input name="submit" type="submit" Value="Submit">
  <input name="type"   type="hidden" value="Perl">
  </form>
<br><hr>
</div>

<!-- comment: Python submit form -->
<div id="pythonform" style="background-color:lightgreen">
  <form action="/cgi-bin/hello.py" onsubmit="return verifyInput('pythonfname','pythonlname','pythonpasswd');">
  Using Hello <b>Python</b> code:<br>

  <label name="fname"  for="fname">First name:</label>  
  <input name="fname"  type="text" id="pythonfname" name="fname"><br>

  <label name="lname"  for="lname">Last name:</label>  
  <input name="lname"  type="text" id="pythonlname" name="lname"><br>

  <label name="passwd" for="password">Password:</label>    
  <input name="passwd" type="password" id="pythonpasswd"><br>

  <input name="submit" type="submit" Value="Submit">
  <input name="type"   type="hidden" value="Python">
  </form>
<br><hr>
</div>

<br>
Show and hide all the     
 <u onclick="showhideName('fname');">First Name</u>      
 <u onclick="showhideName('lname');">Last Name</u>      
 <u onclick="showhideName('passwd');">Password</u>      
 <u onclick="showhideName('submit');">Submit button</u> <br>

<!-- Embedded JavaScript function -->
<script>
function enterName(id) {
  var name = prompt("Please enter your name", "CMEE4K" );
  if ( name == null || name == "" ) {
     alert("User cancelled the prompt.");
  } else {
     document.getElementById(id).innerHTML=name;
     document.getElementById('enterName').style.display='none';
  }
}
function verifyInput(f,l,p) {
  // alert( "Values: "+f+", "+l+", "+p );
  f = document.getElementById(f);
  l = document.getElementById(l);
  p = document.getElementById(p);
  //alert( "Values: '"+f.value+"', '"+l.value+"', '"+p.value+"'" );
  if ( f.value == "" ) {
     alert("Error: First name has no value");
     return false;
  } else if ( l.value == "" ) {
     alert("Error: Last name has no value");
     return false;
  } else if ( p.value == "" ) {
     alert("Error: Password is not set");
     return false;
  } else {
     return true;
  }
}
function showhideName(name) {
  if ( confirm("Do you want to change "+name+" display style?")) {
     var elems = document.getElementsByName(name);
     for ( var i = 0; i < elems.length; i++ ) {
        elems[i].style.display = (elems[i].style.display=='none'?'':'none');
     }
  } else {
     alert("User cancel the action!");
  }
}
function showhide(id) {
  alert("Show and Hide " + id + " element");
  var elem = document.getElementById(id);
  elem.style.display = (elem.style.display=='none'?'':'none');
}
</script>

<!-- End -->
</body>
</html>

Explanation 1

  • Create an element id=myname
  • Add onClick action to call function enterName(id)
  • In the function, prompt the user to enter a name.
  • Put the user input into myname inner HTML value
  • Hide enterName element.
Hello, I am <u id='myname'>________</u>.    
<u id='enterName' onclick="enterName('myname');">Enter your name</u>
...
function enterName(id) {
  var name = prompt("Please enter your name", "CMEE4K" );
  if ( name == null || name == "" ) {
     alert("User cancelled the prompt.");
  } else {
     document.getElementById(id).innerHTML=name;
     document.getElementById('enterName').style.display='none';
  }
}

Explanation 2

  • When click on these strings, call showhide function with DIV id
  • showhide uses document.getElementById(id) function to find the element in DOM
  • Flipflop that element attribute style.display: show or not show
<u onclick="showhide('phpform');">PHP</u>      
<u onclick="showhide('perlform');">Perl</u>      
<u onclick="showhide('pythonform');">Python</u> <br><br>
...
<div id="phpform" style="...">
</div>
...
function showhide(id) {
  alert("Show and Hide " + id + " element");
  var elem = document.getElementById(id);
  elem.style.display = (elem.style.display=='none'?'':'none');
}

Explanation 3

  • When click on these strings, call showhideName function with an element name
  • showhideName uses document.getElementsByName(name) function to find a set of the elements in DOM
  • For loop to traverse all the elements in the return array (the set)
    • Flipflop that element attribute style.display: show or not show
 <u onclick="showhideName('fname');">First Name</u>      
 <u onclick="showhideName('lname');">Last Name</u>      
 <u onclick="showhideName('passwd');">Password</u>      
 <u onclick="showhideName('submit');">Submit button</u>
...
function showhideName(name) {
  if ( confirm("Do you want to change "+name+" display style?")) {
     var elems = document.getElementsByName(name);
     for ( var i = 0; i < elems.length; i++ ) {
        elems[i].style.display = (elems[i].style.display=='none'?'':'none');
     }
  } else {
     alert("User cancel the action!");
  }
}

Explanation 4

  • When user clicks the Submit button, it will call the onsubmit event handler
  • In this case, it is verifyInput function with input element's ID
  • Inside verifyInput', it find the element by getElementById( the name of the element ID )
  • Test the element value
    • If an element value is empty, display alert window, and return false
    • If all elements have content, return true
  • Back to onsubmit event handler. If return false then no submit action. Otherwise, perform the submit action
<form action="/cgi-bin/hello.php" onsubmit="return verifyInput('XXXfname','XXXlname','XXXpasswd');">
...
function verifyInput(f,l,p) {
  f = document.getElementById(f);
  l = document.getElementById(l);
  p = document.getElementById(p);
  if ( f.value == "" ) {
     alert("Error: First name has no value");
     return false;
  } else if ( l.value == "" ) {
     alert("Error: Last name has no value");
     return false;
  } else if ( p.value == "" ) {
     alert("Error: Password is not set");
     return false;
  } else {
     return true;
  }
}