A

<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript form</title>
<style type="text/css">
{
box-sizing: border-box;
}
.input1 { background-color: #cfefe9; color:
#383636; padding: 12px 20px; border: none; border-
radius: 4px; cursor: pointer; float: left;
}
.input1:hover {
background-color: #e2f2e3;
}
.input1, select, textarea { width:
100%; padding: 12px;
border: 1px solid #ccc; border-radius: 4px; resize: vertical;
}
.row{
font-size: 150%;
}
form { border-radius: 5px; background-color: #ffbef5; padding:

20px; font-size: 150%;
.invalid{
font-weight: bold;
}
table{
border-radius: 20px;
background-color: #f4f1f1; padding: 20px;}
.button {
background-color: #555a55; border: none;
color: #f5f5f5; padding: 15px 32px; text-align:
center; text-decoration: none; display: inline-block;
font- size: 16px; margin: 4px 2px; cursor: pointer;
-webkit-transition-duration: 0.4s; transition-duration: 0.4s;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>
</style>
<script>
function validation(form) { let valid =

true; if (!/^[A-Za-z]{3}-
\d{6}$/.test(form["productId"].value)) { alert("Invalid product
id."); valid = false;
}
const length = form["productName"].value.length; if (length <= 0 || length > 50
) {
alert("Invalid product name. Name must be of at most 50 length."); valid =
fals e;
}
const quantity = parseInt(form["quantity"].value); if (!quantity || quantity
> 10) {
alert("Maximum quantity is 10."); valid = false;
}
const price = parseInt(form["prize"].value); if (!price || price < 100 || price
> 9999) {
alert("Prize must be in range of 100 to 9999."); valid = false;
}
const totalValue = parseInt(form["totalValue"].value); if (!totalValue ||
total Value != quantity * price) {
alert("Invalid total value. It must be quantity times price."); valid = false;
}
if (!/^\d{2}\/\d{2}\/\d{4}$/.test(form["date"].value)) { alert("Invalid date.
W rite in pattern DD/MM/YYYY."); valid = false;
}
if (!/^\d{10}$/.test(form["mobile"].value)) {
alert("Invalid Mobile Number. It must be a 10 digit number."); valid = false;
}
if (!/\w+@\w+\.\w+/.test(form["email"].value)) { alert("Invalid email address."
);
valid = false;
}
if (valid) alert("valid"); return valid;
}
</script>
</head>
<body>
<header>
<h1>Online Product Entry</h1>
</header>
<form onsubmit="event.preventDefault();validation(this)" id="form">
<table >
<tr>
<td >
Product's ID: <br><input type="Text" placeholder="A-Z
0- 9" id="productId" class="input1" >
<br>
<span id="productIderror" class="invalid"></span>
</td>
</tr>
<tr>
<td>
Product's Name: <br><input size="80px" type="Text"
placeholder="Name here" maxlength="50" id="productName" class="input1"><br>

<span id="productNameerror" class="invalid"></span>
</td>
</tr>
<tr>
<td>
Quantity: <br><select name="quantity" class="input1" >
<option value="1">1</option>
</select>
<br>
<span id="quantityerror" class="invalid"></span>
</td>
</tr>
<tr>
<td >
Prize :<br><input size="50 px" type="num" min="100"
max="9999" id="prize" placeholder="(100-9999)" class="input1"> <br>

<span id="prizeerror" class="invalid"></span>
</td>
</tr>
<tr>
<td>
Total Value :<br><input size="80px" type="number"
id="totalValue" class="input1">
<br>
<span id="totalValueerror" class="invalid"></span>
</td>
</tr>
<tr>
<td>
Date of Purchase :<br><input size="80px" type="date"
id="date" placeholder="DD/MM/YYYY" class="input1">

<br>
<span id="dateerror" class="invalid"></span>
</tr>
<tr>
</td>
<td>
Mobile No. :<br><input size="80px" type="num" id="mobile"

placeholder="98198822 16" class="input1">
<br>
<span id="mobileerror" class="invalid"></span>
</td>
</tr>
<tr>
<td>
Email address :<br><input
placeholder="[email protected]" size="80px" type="text" id="email"

class="inp ut1">
<br>
<span id="emailerror" class="invalid"></span>
</tr>
<tr>
</td>
<td>
<br>
<input style=" height: 50px;" type="submit" name="submit"
class="button" onclick="form_validate()" >

</td>
</tr>
</fieldset>
<form action="https://www.usaepay.com/interface/epayform/" name="form">
<input type="hidden" name="UMkey" value="SOURCE_KEY_GOES_HERE">
<input type="hidden" name="UMcommand" value="sale">
<input type="hidden" name="UMinvoice" value="">
<input type="hidden" name="UMdescription" value="Thank you for your payment">
<input type="submit" value="Continue to Payment">
</form>
<script language="JavaScript"> var d = new
Date(); function f(n) { return n < 10 ? '0' + n :
n; }
var random_num = Math.floor(Math.random() * (99999999999
- 10000000000)) + 10000000000;
random_num = d.getFullYear() + f(d.getMonth()+1) + f(d.getDate()) +
random_num; document.form.UMinvoice.value = random_num;
</script>
<fieldset>
<legend>Product Checkout</legend>
<button id="myBtn" class="button">checkout</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", function(){ document
.getElementById("demo").innerHTML = "Done";
});
</script>
</fieldset>
</table>
</form>
</body>
</html>
Screenshot:
AJAX
Create a Product Page with Tile of Images and add a JavaScript with XHR to add
description to all images when the user moves the mouse over the images and
add Target page for click event on the image about the description of the
product.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.
js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]
beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-
giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="
anonymous">

<link rel="stylesheet" href="style.css">

<link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon">
<body>
<div class="app-container">
<div class="app-left">
<div class="app-header">
<div class="app-filter-wrapper">
<button class="filter-dropdown-button">
<span>All Categories</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none"
stroke="curre ntColor" stroke-width="2" stroke-linecap="round" stroke-
linejoin="round" class="feather feather-chevron-down" viewBox="0 0 24 24">
<path d="M6 9l6 6 6-6" />
</svg>
</button>
<input class="filter-search-
input" type="text"
placeholder="Search...">
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
fill="n one" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke- linejoin="round" class="feather feather-shopping-bag">
<defs />
<path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-
4zM3 6h18M16 10a4 4 0 01-8 0" />
</svg>
</button>
</div>
<div class="app-left-content">
<div class="app-left-content-header">
<h1 class="content-title">Discover <span>the best</span></h1>
<a href="#" class="content-link">See More</a>
</div>
<div class="app-content-field">
<div class="product-box medium">
<img class="product-box-
image" src="https://images.unsplash.com/photo-1531471689044- dd3ca86632e1?
ixlib=rb- 1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw
%3D&auto=format&fit=crop& w=2250&q=80" alt="Product">
<div class="product-box-details">Decoration <span>55</span></div>
</div>
<div class="product-boxes">
<div class="product-box-wrapper three">
image" src="https://images.unsplash.com/photo-1510877073473-
6d4545e9c2af?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-
1.2.1&auto=format&fit=crop&w=1234&q=80" alt="Product">
<div class="product-box-details">Tables <span>55</span></div>
</div>
image" src="https://images.unsplash.com/photo-1519710164239- da123dc03ef4?
<div class="product-box-details">Lamps <span>45</span></div>
</div>
7b05204a22ef?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-
<div class="product-box-details">Shelves <span>25</span></div>
</div>
</div>
<div class="product-box-wrapper two">
34fa156820ff?ixlib=rb-
1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&
w=1234&q=80" alt="Product">
<div class="product-box-details">Sofa <span>55</span></div>
</div>
image" src="https://images.unsplash.com/photo-1556910585- 09baa3a3998e?
ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-
<div class="product-box-details">Kitchen <span>105</span></div>
</div>
</div>
</div>
</div>
<div class="app-content-field second">
<div class="product-box-wrapper three">
image" src="https://images.unsplash.com/photo-1502920924215- 5646fe685bef?
<div class="product-box-details">Mirrors <span>35</span></div>
</div>
0f2f60b15b5d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-
<div class="product-box-details">Plants <span>25</span></div>
</div>
image" src="https://images.unsplash.com/photo-1604014237256- 11d475e2a2d8?
<div class="product-box-details">Bathroom <span>25</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="app-right">
<button class="app-right-hide">
stroke="currentCo lor" stroke-width="2" stroke-linecap="round" stroke-
linejoin="round" class="feather feather-x" viewBox="0 0 24 24">
<path d="M18 6L6 18M6 6l12 12"/>
</svg>
</button>
<div class="app-right-content">
<ul class="product-list">
<li class="product-list-item fadeIn">
<div class="product-img-wrapper">
<img class="product-
image" src="https://images.unsplash.com/photo-1544030288- e6e6108867f6?
ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTJ8fGZ1cm5pdHVyZXxlbnwwfDF8MHw%3D&ix lib=rb-
1.2.1&auto=format&fit=crop&w=900&q=60" />
</div>
<div class="product-list-itemContent">
<div class="product-info">
<h2 class="product-info-
header"> Monokai
</h2>
<p class="product-info-subheader">
125.00 $ <span class="product-color">Yellow</span>
</p>
</div>
<div class="product-amount-wrapper">
<button class="product-amount-button increase">
stroke= "currentColor" stroke-width="2" stroke-linecap="round" stroke-
linejoin="round" class="feather feather-chevron-up" viewBox="0 0 24
24">
<path d="M18 15l-6-6-6 6" />
</svg>
</button>
<span class="product-amount">2</span>
<button class="product-amount-button decrease">
<path d="M6 9l6 6 6-6" />
</svg>
</button>
</div>
</div>
</li>
b8fc9b596d84?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-
1.2.1&auto=format&fit=crop&w=1234&q=80" alt="product"/>
</div>
header"> Night Owl
</h2>
225.00 $ <span class="product-color">Gray</span>
</p>
</div>
24">
<path d="M18 15l-6-6-6 6" />
</svg>
</button>
<path d="M6 9l6 6 6-6" />
</svg>
</button>
</div>
</div>
</li>
image" src="https://images.unsplash.com/photo-1506377295352- e3154d43ea9e?
%3D&auto=format&fit=crop& w=1234&q=80" />
</div>
header"> Material
</h2>
105.00 $ <span class="product-color">Gray</span>
</p>
</div>
24">
<path d="M18 15l-6-6-6 6" />
</svg>
</button>
<path d="M6 9l6 6 6-6" />
</svg>
</button>
</div>
</div>
</li>
</ul>
<div class="product-details fadeIn">
<div class="product-details-line">
<span class="product-details-text">Sub Total</span>
<span class="product-details-text amount">455.00 $</span>
</div>
<span class="product-details-text">Shipment</span>
<a href="#" class="product-details-link">Check details</a>
</div>
<span class="product-details-text">Discount</span>
<a href="#" class="product-details-link">Remove</a>
<span class="product-details-text amount">-10.00 $</span>
</div>
<div class="product-details-summary">
<span class="product-details-text">Total</span>
</div>
</div>
</div>
<button class="checkout-button">Checkout Payment</button>
</div>
</div>
</body>
</head>
</html>
Sho.js
$("#card-container").ready(async function() {
var cards = await getAllProducts();
for (const index in cards)

{ var card =
cards[index];
$("#card-container").append(card);
}
});
// Alert the user when they "bought" a product

$("#card-container").on("click", "#buy-btn", function() {
alert("Thank you for supporting
https://www.webtutsplus.com");
});
// Handle page changes to add-product.html
$("#add-product").on("click", function() {
window.location.href = "add-product.html";
});
// Handle form submit for add-product.html

$("#product-form").submit(async function(form)
{ form.preventDefault();
const name = $("#productNameInput").val();

const url = $
("#productImageURLInput").val(); const price
= $("#productPriceInput").val();
const description = $("#productDescriptionInput").val();
const product = {
"name": name,
"imageURL":
url, "price":
price,
"description": description
};
var result = await createNewProduct(product);
if (result) {
alert("Product has been added!");
window.location.href =
"index.html";
} else {
alert("Failed to add product, sorry");
}
});
// Fill update-form with values from original product

$("#update-form").ready(async function() {
const id = window.location.href.split("?
id=").pop(); var product = await getProduct(id);
$("#productNameInput").val(product.name);
$("#productImageURLInput").val(product.imageURL);
$("#productPriceInput").val(product.price);
$("#productDescriptionInput").val(product.description);
});
// Handle form submit for update-product.html

$("#update-form").submit(async function(form)
{ form.preventDefault();
const id = window.location.href.split("?
id=").pop(); const name = $
("#productNameInput").val();
const url = $
("#productImageURLInput").val(); const price
= $("#productPriceInput").val();
const description = $("#productDescriptionInput").val();
const product = {
"name": name,
"imageURL":
url,
"price": price, "description": description
};
var result = await updateProduct(id, product); if (result) {
alert("Product has been update!");
window.location.href = "index.html";
} else {
alert("Failed to update product, sorry");
}
});
// Handle the creation of update-product url

$("#card-container").on("click", "#edit-btn", function() {
// Get the id of the product
var productID = $(this).parent().parent().parent().attr("id"); var url = "update-product.html" + "?id=" + productID; window.location.href = url;
});

A

Uploaded by

Document Informationclick to expand document information

Copyright:

Available Formats

A

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

A

Uploaded by

Copyright:

Available Formats

<!

form { border-radius: 5px; background-color: #ffbef5; padding:

function validation(form) { let valid =

Product's Name: <br><input size="80px" type="Text"

placeholder="Name here" maxlength="50" id="productName" class="input1"><br>

Quantity: <br><select name="quantity" class="input1" >

Prize :<br><input size="50 px" type="num" min="100"

max="9999" id="prize" placeholder="(100-9999)" class="input1"> <br>

Total Value :<br><input size="80px" type="number"

id="date" placeholder="DD/MM/YYYY" class="input1">

Mobile No. :<br><input size="80px" type="num" id="mobile"

Email address :<br><input

placeholder="[email protected]" size="80px" type="text" id="email"

class="button" onclick="form_validate()" >

for (const index in cards)

// Alert the user when they "bought" a product

// Handle form submit for add-product.html

const name = $("#productNameInput").val();

var result = await createNewProduct(product);

// Fill update-form with values from original product

// Handle form submit for update-product.html

// Handle the creation of update-product url

You might also like