I am haveing problem with getting input from my website send it so node (server.js) and the value to database. I already have done database connection and it works but value of input was undefined, so i have found out that i dont know how to get the input from the webpage (store.ejs).
So if someone could help.
“I am making eshop for my self”.
store.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Store</title>
<link rel="shortcut icon" type="image/x-icon" href="/images/logo.png" />
<link rel="stylesheet" href="style.css">
<script src="https://checkout.stripe.com/checkout.js" defer></script>
<script>
var stripePublicKey = '<%= stripePublicKey %>'
</script>
<script src="script.js" defer></script>
<!--<script src="../billing.js" defer></script>-->
<link rel="icon" href="/images/logo.png">
</head>
<body>
<!-- <a href="cart.html"><img src="cart-logo.png" id="cart-logo" style="background-color: #eee;border-radius: 50%;"></a> -->
<span id="logo2">
<a href="index.html"><img src="/images/logo.png" style="border-radius: 50%; width: 100px; position: relative; right: 0%; left: 50%;"></a>
</span>
<div id="navigator1">
<nav>
<ul>
<li><a href='store'>Store</a></li>
<li><a href="aboutus.html"> About us</a></li>
<!--<li><a href='tshirtjacket.html'></a></li>-->
<!--<li><a href='other.html'></a></li>-->
<!--<li><a href=''>Other</a></li>-->
<!--<li><a href=''>Other</a></li>-->
<div class="img2">
<li><a href="https://www.instagram.com/bonekicks/"><img src="/images/instagram-logo.png" id="img2"></a></li>
</div>
</ul>
</nav>
<div id="navigator1"></div>
<section class="container content-section">
<h1 style="text-align: center;">Store</h1>
<br>
<div></div>
<div class="shop-items">
<% items.boot.forEach(function(item){ %>
<div class="shop-item" data-item-id="<%= item.id %>">
<span class="shop-item-title"><%= item.name %></span>
<img class="shop-item-image" src="/images/<%= item.imgName %>">
<div class="shop-item-details">
<span class="shop-item-price">$<%= item.price / 100 %></span>
<span class=""><%= item.quantity%> in stock</span>
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
</div>
</div>
<% }) %>
</div>
</div>
</section>
<section class="container content-section">
<h2 class="section-header">CART</h2>
<div class="cart-row">
<span class="cart-item cart-header cart-column">ITEM</span>
<span class="cart-price cart-header cart-column">PRICE</span>
<span class="cart-quantity cart-header cart-column">QUANTITY</span>
</div>
<div class="cart-items">
</div>
<div class="cart-total">
<strong class="cart-total-title">Total</strong>
<span class="cart-total-price">$0</span>
</div>
<form action="../server.js" method="POST" id="billing">
<div class="form-group" id="billing1">
<label for="state"><!--State--></label>
<input type="text" id="state" placeholder="State: " name="state">
</div>
<div class="form-group">
<label for="address"><!--Address--></label>
<input type="text" id="address" placeholder="Address: " name="address">
</div>
<div class="form-group">
<label for="exampleInputEmail1"><!--Zip code--></label>
<input type="text" id="zip" name="zip" placeholder="Zip code: ">
</div>
<button class="btn btn-primary btn-purchase" onclick="clicked()" type="button">PURCHASE</button>
</form>
</section>
</body>
</html>
server.js
require('dotenv').config()
}
const stripeSecretKey = process.env.STRIPE_SECRET_KEY
const stripePublicKey = process.env.STRIPE_PUBLIC_KEY
//console.log(stripeSecretKey, stripePublicKey)
const express = require('express')
const app = express()
const fs = require('fs')
const stripe = require('stripe')(stripeSecretKey)
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var bodyParser = require('body-parser');
var flash = require('express-flash');
var session = require('express-session');
var mysql = require('mysql');
var http = require('http');
app.set('view engine', 'ejs')
app.set('views', path.join(__dirname, 'views'));
app.use(express.json())
app.use(express.static('public'))
app.use(logger('dev'));
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(session({
secret: '123456catr',
resave: false,
saveUninitialized: true,
cookie: { maxAge: 60000 }
}))
app.use(flash());
var con = mysql.createConnection({
host: "localhost",
user: "root",
password: "",
database: "bonekicks"
});
app.get('/store', function(req, res) {
fs.readFile('items.json', function(error, data) {
if (error) {
res.status(500).end()
} else {
res.render('store.ejs', {
stripePublicKey: stripePublicKey,
items: JSON.parse(data)
})
}
})
})
app.post('/purchase', function(req, res) {
fs.readFile('items.json', function(error, data) {
if (error) {
res.status(500).end()
} else {
const itemsJson = JSON.parse(data)
const itemsArray = itemsJson.boot
let total = 0
req.body.items.forEach(function(item){
const itemJson = itemsArray.find(function(a){
return a.id == item.id
})
total = total + itemJson.price * item.quantity
console.log(Date())
console.log("id of product: " + itemJson.id + "; quantity: " + item.quantity + " "+ total)
console.log("//////////////////////////////////////////////////////////////////////////////////")
})
stripe.charges.create({
amount: total,
source: req.body.stripeTokenId,
currency: 'usd',
}).then(function(){
console.log('Charge Succesful')
res.json({message: 'Successfully purchased items ;)'})
var state1 = req.body.state;
var address = req.body.address;
var zip = req.body.zip;
var state;
con.connect(function(err) {
if (err) throw err;
var sql = `INSERT INTO customers (c_state, c_address, c_zip) VALUES ("${state1}", "${address}", "${zip}")`;
con.query(sql, function (err, result) {
if (err) throw err;
console.log("1 record inserted, ID: " + result.insertId);
//console.log(state + " " + address + " " + zip);
});
});
}).catch(function(){
console.log('Charge Fail')
res.status(500).end()
})
}
})
})
app.listen(3000)```
and script.js whitch is used by store.ejs
and script.js whitch is used by store.ejs
if (document.readyState == 'loading') {
document.addEventListener('DOMContentLoaded', ready)
} else {
ready()
}
function ready() {
var removeCartItemButtons = document.getElementsByClassName('btn-danger')
for (var i = 0; i < removeCartItemButtons.length; i++) {
var button = removeCartItemButtons[i]
button.addEventListener('click', removeCartItem)
}
var quantityInputs = document.getElementsByClassName('cart-quantity-input')
for (var i = 0; i < quantityInputs.length; i++) {
var input = quantityInputs[i]
input.addEventListener('change', quantityChanged)
}
var addToCartButtons = document.getElementsByClassName('shop-item-button')
for (var i = 0; i < addToCartButtons.length; i++) {
var button = addToCartButtons[i]
button.addEventListener('click', addToCartClicked)
}
document.getElementsByClassName('btn-purchase')[0].addEventListener('click', purchaseClicked)
}
var stripeHandler = StripeCheckout.configure({
key: stripePublicKey,
locale: 'auto',
token: function(token) {
var items = []
var cartItemContainer = document.getElementsByClassName('cart-items')[0]
var cartRows = cartItemContainer.getElementsByClassName('cart-row')
for (var a = 0; a < cartRows.length; a++) {
var cartRow = cartRows[a]
var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
var quantity = quantityElement.value
var id = cartRow.dataset.itemId
items.push({
id: id,
quantity: quantity
})
}
fetch('/purchase', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify({
stripeTokenId: token.id,
items: items
})
}).then(function(res){
return res.json()
}).then(function(data){
alert(data.message)
var cartItems = document.getElementsByClassName('cart-items')[0]
while (cartItems.hasChildNodes()) {
cartItems.removeChild(cartItems.firstChild)
}
updateCartTotal()
}).catch(function(error){
console.error(error)
})
}
})
function purchaseClicked() {
var priceElement = document.getElementsByClassName('cart-total-price')[0]
var price = parseFloat(priceElement.innerText.replace('$', '')) * 100
stripeHandler.open({
amount: price
})
}
function removeCartItem(event) {
var buttonClicked = event.target
buttonClicked.parentElement.parentElement.remove()
updateCartTotal()
}
function quantityChanged(event) {
var input = event.target
if (isNaN(input.value) || input.value <= 0) {
input.value = 1
}
updateCartTotal()
}
function addToCartClicked(event) {
var button = event.target
var shopItem = button.parentElement.parentElement
var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src
var id = shopItem.dataset.itemId
addItemToCart(title, price, imageSrc, id)
updateCartTotal()
}
function addItemToCart(title, price, imageSrc, id) {
var cartRow = document.createElement('div')
cartRow.classList.add('cart-row')
cartRow.dataset.itemId = id
var cartItems = document.getElementsByClassName('cart-items')[0]
var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
for (var i = 0; i < cartItemNames.length; i++) {
if (cartItemNames[i].innerText == title) {
alert('This item is already added to the cart')
return
}
}
var cartRowContents = `
<div class="cart-item cart-column">
<img class="cart-item-image" src="${imageSrc}" width="100" height="100">
<span class="cart-item-title">${title}</span>
</div>
<span class="cart-price cart-column">${price}</span>
<div class="cart-quantity cart-column">
<input class="cart-quantity-input" type="number" value="1">
<button class="btn btn-danger" type="button">REMOVE</button>
</div>`
cartRow.innerHTML = cartRowContents
cartItems.append(cartRow)
cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
}
function updateCartTotal() {
var cartItemContainer = document.getElementsByClassName('cart-items')[0]
var cartRows = cartItemContainer.getElementsByClassName('cart-row')
var total = 0
for (var i = 0; i < cartRows.length; i++) {
var cartRow = cartRows[i]
var priceElement = cartRow.getElementsByClassName('cart-price')[0]
var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
var price = parseFloat(priceElement.innerText.replace('$', ''))
var quantity = quantityElement.value
total = total + (price * quantity)
}
total = Math.round(total * 100) / 100
document.getElementsByClassName('cart-total-price')[0].innerText = '$' + total
}
Image of directory tree – If needed
