Skip to content
Snippets Groups Projects
Commit 5c93272b authored by Andrej Rasevic's avatar Andrej Rasevic
Browse files

adding forms and server code examples

parent e391b3cb
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 790 additions and 0 deletions
LectureCodeExamples/Week3/AccessFormDataUsingJSCode/Checkboxes.html 0 → 100755
+ 41
− 0
View file @ 5c93272b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Checkboxes</title>
</head>
<body>
Indicate what kinds of computers you have.<br>
<form>
<input type="checkbox" id="laptop">Laptop<br>
<input type="checkbox" id="desktop" checked>Desktop<br>
<input type="button" id="processDataButton" value="Process" onclick="processData()">
<input type="reset" value="Clear">
</form>
<script>
function processData() {
/* Retrieving the values */
let laptopCheckbox = document.getElementById("laptop");
let desktopCheckbox = document.getElementById("desktop");
let message = "";
if (laptopCheckbox.checked) {
message += "Laptop was selected.\n";
} else {
message += "Laptop was NOT selected.\n";
}
if (desktopCheckbox.checked) {
message += "Desktop was selected.\n";
} else {
message += "Desktop was NOT selected.\n";
}
alert(message);
}
</script>
</body></html>
LectureCodeExamples/Week3/AccessFormDataUsingJSCode/DropDownList.html 0 → 100755
+ 37
− 0
View file @ 5c93272b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drow-Down List</title>
</head>
<body>
<h2>Programming Language Preference</h2>
<form>
<select id="preference">
<option value="JavaScript">JavaScript</option>
<option value="Ruby" selected="selected">Ruby</option>
<option value="Python">Python</option>
</select>
<input type="button" id="processDataButton" value="Process" onclick="processData()">
<input type="reset">
</form>
<script>
function processData() {
let id = "preference";
let answer = getSelection(id);
alert("Option selected: " + answer);
}
function getSelection(id) {
let preference = document.getElementById(id);
let optionSelected = preference[preference.selectedIndex].value;
return optionSelected;
}
</script>
</body></html>
LectureCodeExamples/Week3/AccessFormDataUsingJSCode/NumberRangeTime.html 0 → 100755
+ 43
− 0
View file @ 5c93272b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Number, Range, Time</title>
</head>
<body>
<h2>Form Elements (Number/Range/Time)</h2>
<form>
Enter a number: <input type="number" value="21" min="1" max="120" step="5" id="request">
<input type="button" id="process" value="Process Number" onclick="processNumber()"><br><br>
Enter number in range: <input type="range" id="rangeElem" min="10" max="50">
<input type="button" id="processRange" value="Process Range" onclick="processRange1()"><br><br>
Enter time <input type="time" id="timeElem" >
<input type="button" id="processTime" value="Process Time" onclick="processTime1()"><br><br>
<input type="reset">
</form>
<h3>Display Area</h3>
<div id="display"></div>
<script>
function processNumber() {
var age = document.getElementById("request").value;
document.getElementById("display").innerHTML = "Age is " + age;
}
function processRange1() {
var value = document.getElementById("rangeElem").value;
document.getElementById("display").innerHTML = "Range value is " + value;
}
function processTime1() {
var value = document.getElementById("timeElem").value;
document.getElementById("display").innerHTML = "Time is " + value;
}
</script>
</body></html>
LectureCodeExamples/Week3/AccessFormDataUsingJSCode/RadioButtons.html 0 → 100755
+ 34
− 0
View file @ 5c93272b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Radio Buttons</title>
</head>
<body>
<h2>Radio Buttons</h2>
<form>
<!-- Notice: using same name but different ids -->
<input type="radio" id="radioHS" name="category" value="hs">HS<br>
<input type="radio" id="radioUndergraduate" name="category" value="undergraduate">Undergraduate<br>
<input type="radio" id="radioGraduate" name="category" value="graduate" checked>Graduate<br>
<input type="button" id="processDataButton" value="Process" onclick="processData()">
<input type="reset">
</form>
<script>
function processData() {
let radioButtonsName = "category";
alert(`Selection was: ${ getSelection(radioButtonsName)}`);
}
function getSelection(radioButtonsName) {
for (let entry of document.getElementsByName("category")) {
if (entry.checked) {
return entry.value;
}
}
}
</script>
</body></html>
LectureCodeExamples/Week3/AccessFormDataUsingJSCode/ScrollableList.html 0 → 100755
+ 48
− 0
View file @ 5c93272b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scrollable List</title>
</head>
<body>
<h2>Scrollable List</h2>
<h2>Use CTRL KEY To Select Multiple Entries</h2>
<form>
<select id="preference" multiple size="5">
<option value="JavaScript">JavaScript</option>
<option value="Ruby" selected>Ruby</option> <!-- default selection -->
<option value="PHP">PHP</option>
<option value="C++" selected>C++</option> <!-- default selection -->
<option value="Pascal">Pascal</option>
<option value="Fortran">Fortran</option>
<option value="Basic">Basic</option>
<option value="Assembly">Assembly</option>
<option value="C#">C#</option>
</select>
<br><br>
<input type="button" id="processDataButton" value="Process" onclick="processData()">
<input type="reset">
</form>
<script>
function processData() {
let answer = getSelection();
alert("Selection: " + answer);
}
function getSelection() {
let optionsArray = document.getElementById("preference").options;
let answer = "";
for (let option of optionsArray) {
if (option.selected) {
answer += option.value + "|";
}
}
return answer;
}
</script>
</body></html>
LectureCodeExamples/Week3/AccessFormDataUsingJSCode/Textarea.html 0 → 100755
+ 25
− 0
View file @ 5c93272b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Text Area</title>
</head>
<body>
<h2>Text Area</h2>
<form>
<!-- Notice the default text -->
<textarea id="request" rows="8" cols="50">Please check my last assignment.</textarea>
<br>
<input type="button" id="processDataButton" value="Process" onclick="processData()">
<input type="reset">
</form>
<script>
function processData() {
let information = document.getElementById("request");
alert("The submitted request is: \n" + information.value);
}
</script>
</body></html>
LectureCodeExamples/Week3/FormsCode/FieldSet.html 0 → 100755
+ 42
− 0
View file @ 5c93272b
<!DOCTYPE html>
<html lang="en">
<head>
<title>FieldSet and Legend</title>
<meta charset="utf-8">
</head>
<body>
<form>
<fieldset>
<legend>
<strong>User Information</strong>
</legend>
<label>First Name: <input type="text"></label><br><br>
<label>Last Name: <input type="text"></label><br><br>
How many pairs of shoes do you own?<br>
<label><input type="radio" name="shoes">0 to 5 pairs</label><br>
<label><input type="radio" name="shoes">6 to 10 pairs</label><br>
<label><input type="radio" name="shoes">11 to 30 pairs</label><br>
<label><input type="radio" name="shoes" checked="checked">31 or more pairs</label><br>
</fieldset>
<hr>
<fieldset>
<legend>
<strong>Responses</strong>
</legend>
Please tell us which of our products you own:<br>
<label><input type="checkbox">Shoe Polish</label><br>
<label><input type="checkbox">Shoe Horn</label><br>
<label><input type="checkbox">Closet Shoe Tree</label><br>
<br>
Please tell us why you love our products:<br>
<textarea rows="10" cols="40"></textarea><br>
</fieldset>
</form>
</body>
</html>
LectureCodeExamples/Week3/FormsCode/FormElements.html 0 → 100755
+ 80
− 0
View file @ 5c93272b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Form Elements</title>
<style>
/* NOTE: While validating, make sure you use CSS */
/* level 3 profile by accessing "More Options" */
body {
font-family: Arial, Helvetica, sans-serif;
}
input {
margin: 0.75em;
/* Makes our input elements with round borders (currently DISABLED) */
/* border-radius: 1em; */
/* Some padding to help round borders */
padding: 0.125em;
}
input[type="button"] {
box-shadow: 1em 1em 1em silver;
}
h1 {
text-shadow: silver 0.125em 0.125em 0.125em;
}
</style>
</head>
<body>
<h1>Form Elements</h1>
<hr>
<form>
<label for="userMidtermScore">Range</label>
<input id="userMidtermScore" type="range" min="0" max="50" step="5" value="0">
<br>
<label for="userFinalScore">Number</label>
<input id="userFinalScore" type="number" min="0" max="100" step="10" value="0">
<br>
<label for="date">Date</label>
<input id="date" type="date">
<br>
<label for="time">Time</label>
<input id="time" type="time">
<br>
<label for="datetime-local">Datetime-local</label>
<input id="datetime-local" type="datetime-local">
<br>
<label for="week">Week</label>
<input id="week" type="week">
<br>
<label for="month">Month</label>
<input id="month" type="month">
<br>
<label for="tel">Telephone</label>
<input id="tel" type="tel">
<br>
<label for="color">Color</label>
<input id="color" type="color">
<br>
<label>Button: <input type="button" value="Execute"></label>
<br><br>
<hr>
</form>
</body>
</html>
\ No newline at end of file
LectureCodeExamples/Week3/FormsCode/InputElementAttributes.html 0 → 100755
+ 25
− 0
View file @ 5c93272b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Input Element Attributes</title>
</head>
<body>
<h1>Input Element Attributes</h1>
<form>
Name: <input type="text" value="Mary" size="4" maxlength="8">
<br><br>
School (readonly): <input type="text" value="UMD" size="1" maxlength="3" readonly>
<br><br>
Building (disabled): <input type="text" value="Iribe" size="1" disabled>
<br><br>
<input type="reset">
</form>
</body>
</html>
\ No newline at end of file
LectureCodeExamples/Week3/FormsCode/InputList.html 0 → 100755
+ 25
− 0
View file @ 5c93272b
<!DOCTYPE html>
<html lang="en">
<head>
<title>Input List</title>
<meta charset="utf-8">
</head>
<body>
<h1>Input List</h1>
<form action="inputList.php" method="get">
<strong>Select color</strong><br>
<input list="color-options" name="color-choice">
<datalist id="color-options">
<option value="orange">
<option value="blue">
</datalist>
<br><br>
<input type="submit">
</form>
</body></html>
LectureCodeExamples/Week3/FormsCode/Labels.html 0 → 100755
+ 38
− 0
View file @ 5c93272b
<!DOCTYPE html>
<html lang="en">
<head>
<title>Labels</title>
<meta charset="utf-8">
</head>
<body>
<form>
<h1>User Information</h1>
<!-- Input element is embedded in label -->
<!-- Clicking on "First Name:" text will change focus to this element -->
<label>First Name: <input type="text"></label>
<br><br>
<!-- Relying on id and for to link label and input element -->
<label for="lastname">Last Name: </label><input type="text" id="lastname">
<br><br>
<label for="middlename">Middle Name: </label>
<p>text separating label from text field to show
that label still changes focus to the text field
below (click on Middle Name:)
</p>
<br><br>
<input type="text" id="middlename">
<br><br>
<!-- Clicking on "School:" text will NOT change focus to this element -->
<!-- as we are not using a label -->
School: <input type="text">
<br><br>
<input type="reset">
</form>
</body></html>
LectureCodeExamples/Week3/FormsCode/inputList.php 0 → 100755
+ 17
− 0
View file @ 5c93272b
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Datalist Processing</title>
</head>
<body>
<?php
echo "<h1>Color Choice</h1>";
$choice = $_GET['color-choice'];
echo "<strong>Choice is: $choice</strong>";
?>
</body>
</html>
LectureCodeExamples/Week3/MapsFormValidationClassesCode/Classes/Car.html 0 → 100755
+ 76
− 0
View file @ 5c93272b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Example</title>
</head>
<body>
<script>
class Car {
static dealership = "Terp Cars"; /* static public */
static #instances = 0; /* static private */
passengers = ["Driver"]; /* public */
#tag; /* private */
#mileage; /* private */
constructor(tag, mileage) {
this.#tag = tag;
this.#mileage = mileage;
Car.#instances++;
}
get tag() {
return this.#tag;
}
set tag(newTag) {
if (newTag == null) {
document.writeln("<br><strong>Oops, cannot set tag to null</strong><br>")
} else {
this.#tag = newTag;
}
}
displayInfo() {
document.writeln(this.#tag + ", " + this.#mileage);
}
static getInstances() {
return Car.#instances;
}
[Symbol.toPrimitive]() { /* Java's toString() */
return `${this.#tag} ${this.#mileage} Passengers: ${this.passengers}`;
}
}
let car1 = new Car("abc", 22000);
document.writeln("Initial car info: ");
car1.displayInfo();
document.writeln(`<br>The tag value is ${car1.tag}`);
car1.tag = "newTagABC";
document.writeln(`<br>After assignment to tag, the tag value is ${car1.tag}`);
car1.tag = null; /* Setting tag to null */
document.writeln("After attempt to change tag to null: ");
car1.displayInfo();
let car2 = new Car("core1", 40000);
document.writeln(`<br>Dealership: ${Car.dealership}<br>`);
document.writeln(`Instances: ${Car.getInstances()}<br>`);
document.writeln("<hr>"); /* Using equivalent of Java's toString() */
document.writeln(car1 + "<br>");
document.writeln(car2 + "<br>");
</script>
</body>
</html>
LectureCodeExamples/Week3/MapsFormValidationClassesCode/Classes/ClassDeclaration.html 0 → 100755
+ 71
− 0
View file @ 5c93272b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ES6 Class Example</title>
</head>
<body>
<script>
class StoreBranch {
static #instances = 0; /* static and private */
#name; /* private instance variable */
#location; /* private instance variable */
/* Constructor */
constructor(name = "NONAME", location = "NOLOCATION") {
if (!this.#isValidName(name)) {
console.log("Warning, name too short");
}
this.#name = name;
this.#location = location;
StoreBranch.#instances++;
}
/* Java's toString() */
[Symbol.toPrimitive]() {
return `Name: ${this.#name}, Location: ${this.#location}`;
}
/* Non-static method */
displayInfo() {
document.writeln(
`DisplayInfo: <em>${this.#name}</em> located in <em>${this.#location}</em>`
);
StoreBranch.#printSchool(); /* Calling private static method */
}
/* static method */
static getInstances() {
return StoreBranch.#instances;
}
/* non-static private method */
#isValidName(name) {
return name.length >= 2;
}
/* static private method */
static #printSchool(name) {
document.writeln("<br>School: UMCP<br>");
}
}
let storeBranch1 = new StoreBranch("Nendy's", "Greenbelt");
storeBranch1.displayInfo();
document.writeln("<br>*****<br>");
document.writeln(storeBranch1);
document.writeln("<br>*****<br>");
let storeBranch2 = new StoreBranch("A");
document.writeln(storeBranch2);
document.writeln("<br>*****<br>");
let storeBranch3 = new StoreBranch();
document.writeln(storeBranch3);
document.writeln("<br>*****<br>");
document.writeln(`Number of stores: ${StoreBranch.getInstances()}`);
</script>
</body>
</html>
LectureCodeExamples/Week3/MapsFormValidationClassesCode/Classes/SportsCar.html 0 → 100755
+ 83
− 0
View file @ 5c93272b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Class Example</title>
</head>
<body>
<script>
class Car {
static dealership = "Terp Cars"; /* static public */
static #instances = 0; /* static private */
passengers = ["Rose"]; /* public */
#tag; #mileage; /* private */
constructor(tag, mileage) {
this.#tag = tag;
this.#mileage = mileage;
Car.#instances++;
}
displayInfo() {
document.writeln(`Tag: ${this.#tag}, Mileage: ${this.#mileage}, Passengers: ${this.passengers}`);
}
[Symbol.toPrimitive]() {
/* Java's toString() */
return `Tag: ${this.#tag}, Mileage: ${this.#mileage}, Passengers: ${this.passengers}`;
}
get tag() {
return this.#tag;
}
set tag(newTag) {
this.#tag = newTag;
}
static getInstances() {
return Car.#instances;
}
}
class SportsCar extends Car {
#engine;
constructor(tag, mileage, engine) {
super(tag, mileage);
this.#engine = engine;
}
displayInfo() {
super.displayInfo();
document.writeln(`Engine: ${this.#engine}<br>`);
}
[Symbol.toPrimitive]() {
return `${super[Symbol.toPrimitive]()}, Engine: ${this.#engine}`;
}
get engine() {
return this.#engine;
}
}
const tag = "ABC", mileage = 10000;
const carOne = new Car(tag, mileage);
document.writeln(`Mark #1: Car info:<br>`);
carOne.displayInfo();
document.writeln(`<br>Mark #2: ${carOne}`);
carOne.tag = "CBD"
document.writeln(`<br>Mark #3: New Tag: ${carOne.tag}<br>`);
const carTwo = new SportsCar("X2W-Sports", 22000, "turbo");
document.writeln(`Mark #4: Sports car info:<br>`);
carTwo.displayInfo();
document.writeln(`Mark #5: Engine: ${carTwo.engine}<br>`);
document.writeln(`Mark #6: ${carTwo}<br>`);
document.writeln(`Mark #7: Total Cars: ${Car.getInstances()}`);
</script>
</body>
</html>
LectureCodeExamples/Week3/MapsFormValidationClassesCode/FormValidation/README.txt 0 → 100755
+ 2
− 0
View file @ 5c93272b
For this examples, we have also provided the .php files that
a web server will use to process the requests.
\ No newline at end of file
LectureCodeExamples/Week3/MapsFormValidationClassesCode/FormValidation/formValidation.css 0 → 100755
+ 12
− 0
View file @ 5c93272b
body {
font-family: Arial, Helvetica, sans-serif;
}
fieldset {
border-radius: .75em;
}
input {
border-radius: .75em;
}
LectureCodeExamples/Week3/MapsFormValidationClassesCode/FormValidation/formValidation.html 0 → 100755
+ 48
− 0
View file @ 5c93272b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Form Validation</title>
<link rel="stylesheet" href="formValidation.css">
<script src="formValidation.js"></script>
</head>
<body>
<form id="myForm" action="paymentValidation.php" method="get">
<fieldset>
<legend>
<em>Customer Info</em>
</legend>
<strong>Name:
</strong><input id="name" type="text" name="name" value="Mary">
<strong>Account Number:
</strong><input id="account" type="text" name="account"><br><br>
<strong>Payment:
</strong><input id="payment" type="text" name="payment"><br><br>
<strong>Receive News:
</strong><input type="checkbox" name="news" id="news" checked value="YesReceiveNews"><br><br>
<strong>Payment Plan:</strong>
<input type="radio" name="plan" id="oneYearPlan" value="OneYearPaymentPlan" checked>
<label for="oneYearPlan">One-Year</label>
<input type="radio" name="plan" id="twoYearPlan" value="TwoYearPaymentPlan">
<label for="twoYearPlan">Two-Year</label><br><br>
<strong>Location:</strong>
<select name="location">
<option value="In-State">In-State</option>
<option value="Out-of-State" selected="selected">Out-of-State</option>
</select>
<br><br>
<input type="reset">
<input type="submit" value="Submit Data">
</fieldset>
</form>
</body>
</html>
LectureCodeExamples/Week3/MapsFormValidationClassesCode/FormValidation/formValidation.js 0 → 100755
+ 34
− 0
View file @ 5c93272b
/* IMPORTANT: Setting the function to call when submit is selected */
window.onsubmit = validateForm;
/* This function must return true or false
If true the data will be sent to the server.
If false the data will not be sent to the server */
function validateForm() {
/* Retrieving the values */
let name = document.getElementById("name").value;
let account = document.getElementById("account").value;
let payment = document.getElementById("payment").value;
/* Validating numeric values */
let invalidMessages = "";
if (String(parseInt(account)) !== account) {
invalidMessages += "Invalid account number provided.\n";
}
if (Number(payment) <= 0) {
invalidMessages += "Invalid payment amount provided.";
}
if (invalidMessages !== "") {
alert(invalidMessages);
return false;
} else {
let valuesProvided = "Do you want to submit the following payment?\n";
valuesProvided += "Name: " + name + "\n";
valuesProvided += "Account: " + account + "\n";
valuesProvided += "Payment: " + payment + "\n";
/* We could write the following as return window.confirm(valuesProvided) */
return window.confirm(valuesProvided);
}
}
LectureCodeExamples/Week3/MapsFormValidationClassesCode/FormValidation/paymentValidation.php 0 → 100755
+ 9
− 0
View file @ 5c93272b
<?php
print "<h1>Payment Confirmation for {$_GET['name']}</h1>";
print "<p>";
print "A payment of \${$_GET['payment']} has been received for account {$_GET['account']}";
print "</p>";
print "Receive news: {$_GET['news']} <br />";
print "Payment Plan: {$_GET['plan']} <br />";
print "Location: {$_GET['location']}";
?>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment