<html>
<head>
<script>
function onSave()
{
let book = {};
let titleElem = document.getElementById("title");
let authorElem = document.getElementById("author");
let publisherElem = document.getElementById("publisher");
let yearElem = document.getElementById("year");
book.title = titleElem.value; book.author = authorElem.value; book.publisher = publisherElem.value; book.year = yearElem.value;
alert("Title: " + book.title + "\nAuthor: " + book.author + "\nPublisher: " + book.publisher + "\nYear: " + book.year);
}
</script>
</head>
<body>
<form><label>Title <input id="title" type="text"/></label> <label>Author <input id="author" type="text"/></label> <label>Publisher <input id="publisher" type="text"/></label> <label>Year <input id="year" type="text"/></label> <button type="confirm" onClick="onSave()">Save</button></form> </body> </html> (Edited: 2017-04-12)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>In Class Excercise</title>
</head>
<body>
<label for="title">Title</label>
<input id="title" type="text" name="title" />
<label for="author">Author</label>
<input id="author" type="text" name="author" />
<label for="year">Year</label>
<input id="year" type="text" name="year" />
<input type="submit" value="Submit" onclick="showObject()"/>
</body>
<script>
function showObject()
{
var obj = {};
obj.title = document.getElementById("title").value;
obj.author = document.getElementById("author").value;
obj.year = document.getElementById("year").value;
alert("title: " + obj.title + "author: " + obj.author + "year: " + obj.year);
}
</script>
</html>
(Edited: 2017-04-12) <title>In Class Exercise</title></head> <body>
<form>
<input type="text" id="Title" placeholder="Title"/>
<input type="text" id="Author" placeholder="Author"/>
<input type="text" id="Publisher" placeholder="Publisher"/>
<input type="text" id="Year" placeholder="Year"/>
<button onclick="display();">Save</button>
<script type="text/javascript">
function display(){
var title = document.getElementById("Title");
var author = document.getElementById("Author");
var publisher = document.getElementById("Publisher");
var year = document.getElementById("Year");
var book = [title.value, author.value, publisher.value, year.value];
alert("Title: " + book[0] + " | Author: " + book[1] + " | Publisher: " + book[2] + " | Year: " + book[3]);
}
</script>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>JS Books</title>
</head>
<body>
<form>
<label for="title">Title:</label>
<input type="text" name="title" id="titleID" /><br />
<label for="author">Author:</label>
<input type="text" name="author" id="authorID" /><br />
<label for="publisher">Publisher:</label>
<input type="text" name="publisher" id="publisherID"/><br />
<label for="author">Author:</label>
<input type="text" name="year" id="yearID"/><br />
<button onClick="return storeObject();">Save</button>
</form>
<script type="text/javascript" >
var book = new Object();
function storeObject() {
book.title = document.getElementById("titleID").value;
book.author = document.getElementById("authorID").value;
book.publisher = document.getElementById("publisherID").value;
book.year = document.getElementById("yearID").value;
alert( book.title + "\n"
+ book.author + "\n"
+ book.publisher + "\n"
+ book.year);
}
</script>
</body>
</html>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<label>Title: </label><input type="text" id="title" name="Title" placeholder="Enter... "/>
<label>Author: </label><input type="text" id="author" name="Author" placeholder="Enter... "/>
<label>Publisher: </label><input type="text" id="publish" name="Publisher" placeholder="Enter... "/>
<label>Year: </label><input type="text" id="year" name="Year" placeholder="Enter... "/>
<button onclick="displayElements();">Save</button>
<script>
var book = {
Title: ,
Author: ,
Publisher: ,
Year:
};
function displayElements() {
book.Author = document.getElementById("author").value;
book.Title = document.getElementById("title").value;
book.Publisher = document.getElementById("publish").value;
book.Year = document.getElementById("year").value;
alert("Title: " + book.Title + ", Author: " + book.Author + ", Publisher: " + book.Publisher + ", Year: " + book.Year);
}
</script>
</form>
<!DOCTYPE html>
<html>
<header>
<title>title</title>
<script type="text/javascript">
function test() {
var book = new Object();
book["title"] = document.getElementById("title");
book["author"] = document.getElementById("author");
book["publisher"] = document.getElementById("publisher");
book["year"] = document.getElementById("year");
alert("title: " + book.title.value + "author: " + book.author.value + "publisher: " + book.publisher.value + "year: " +
book.year.value);
}
</script>
</header>
<body>
<form>
<label>Title<input type="text" id="title" /></label>
<label>Author<input type="text" id="author" /></label>
<label>Publisher<input type="text" id="publisher" /></label>
<label>Year<input type="number" id="year" /></label>
<input type="button" value="save" onclick="return test();" />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>In Class Exercise 8</title>
</head>
<body>
<form>
<label for="Title">Title</label>
<input id="Title" type="text"/>
<label for="Author">Author</label>
<input id="Author" type="text"/>
<label for="Publisher">Publisher</label>
<input id="Publisher" type="text"/>
<label for="Year">Year</label>
<input id="Year" type="text"/>
<input type="submit" onclick='display();' value="save"/>
</form>
</body>
<script>
function display() {
var book = new Object();
book.title = document.getElementById('Title').value,
book.author = document.getElementById('Author').value,
book.publisher = document.getElementById('Publisher').value,
book.year = document.getElementById('Year').value;
alert("Title: " + book.title + "\n Author: " + book.author + "\n Publisher: " + book.publisher + "\n Year: " + book.year);
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>In-Class Exercise | April 12, 2017</title>
<script>
function save() {
var book = {
title: document.getElementById('title').value,
author: document.getElementById('author').value,
publisher: document.getElementById('publisher').value,
year: document.getElementById('year').value
}
show(book)
}
function show(book) {
alert("Title: " + book.title + "\nAuthor: " + book.author + "\nPublisher: "
+ book.publisher + "\nYear: " + book.year + "\n")
}
</script>
<style>
input {
display: block;
}
</style>
</head>
<body>
<form>
<label for="title">Title:</label>
<input type="text" name="title" id="title">
<label for="author">Author:</label>
<input type="text" name="author" id="author">
<label for="publisher">Publisher:</label>
<input type="text" name="publisher" id="publisher">
<label for="year">Year:</label>
<input type="text" name="year" id="year">
<button onclick="return save()">Save</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Exercise 1</title>
<script type="text/javascript">
function book(){
var book = new Object();
book.title = document.getElementById("titleID").value;
book.author = document.getElementById("authorID").value;
book.publisher = document.getElementById("pubID").value;
book.year = document.getElementById("yearID").value;
alert("Title: " + book["title"] + "\nAuthor: " + book["author"] + "\nPublisher: " + book["publisher"] + "\nYear: " + book["year"]);
}
</script>
</head>
<body>
<form>
Title: <input type="text" name="title" id="titleID" placeholder="Title" maxlength="30">
Author: <input type="text" name="author" id="authorID" placeholder="Author" maxlength="30">
Publisher: <input type="text" name="publisher" id="pubID" placeholder="Publisher" maxlength="30">
Year: <input type="text" name="year" id="yearID" placeholder="Year" maxlength="30">
<input type = "submit" value ="Save" onclick="return book();"/>
</form>
</body>
</html>