There is a page '/order/new' with 2 dropdown menus for customer and their address, along with a button that redirects to choose products to add to the order. The selected products are saved in an array called 'hh' which receives data from an AJAX call. However, when redirected, the selected customer and address information is lost.
I am looking for a way to retrieve the customer and their address after adding the product array.
global.hh = new Array();
module.exports = {
getProduct: (req , res ) => {
var products = req.query.selectedProduct;
var total = req.query.sumTotal;
var btekh = hh.push(products)
}
getOrderProduct: (req , res) => {
let query1 = "SELECT * FROM `product`";
getConnection().query(query1 ,(err , result) => {
if(err) {
return res.status(500).send(err);
}
res.render('productOrder.ejs' , {
products: result
});
});
},
addOrderProduct: (req, res) => {
res.redirect('/order/new')
}
postOrder: (req ,res) => {
var products = req.session.products;
getConnection().query('INSERT INTO `order` ( clientId , addressId,orderStatusId) VALUES (?,?,?)', [req.body.selectUser, req.body.selectAddress,req.body.selectedStatus], (err,result) => {
if (err) {
console.log(err);
}
hh.slice(-1)[0].forEach(function (item) {
let insertedOrder = result.insertId;
let query = "INSERT INTO `orderProduct`( `orderIdProduct`, `productId`, `orderProductName`,`orderProductPrice`, `orderProductQuantity`, `orderProductTotal`) VALUES (?,?,?,?,?,?)";
getConnection().query( query , [insertedOrder,item.check,item.name,item.p,item.q,item.total] , (err , result)=>{
if (err) {
console.log(err);
}
res.end();
})
})
})
}
res.redirect('/')
}
app.get('/order/new' , addOrderPage)
app.use('/postOrder' , postOrder);
app.use('/order/product' , getProduct);
AJAX code:
////////////////add users's address///////////////////////////
$('#user').change(function(){
var item = $('#user').val();
$.ajax({
type:'GET',
data: { selectedId: item },
url:'/users/address',
success: function(data){
$('#address').empty();
$('address').append("<option disabled selected> Select Address..</option>");
$.each(data, function (index, addressObj) {
$('#address').append("<option value = '" + addressObj.addressId + "' > " + addressObj.addressName + " </option > ");
});
}
});
})
;
//////////////get the product to order/////////////
$('#save').click(function () {
var orderProduct = new Array();
$("#table input[type=checkbox]:checked").each(function () {
var row = $(this).closest("tr");
var message0 = row.find('#check').val();
var message1 = row.find('.name').text().trim();
var message3 = row.find('.currency').text().trim();
var message4 = row.find(".foo").val();
const result = {check: message0,name: message1,p: message3,q: message4 ,total: message3 * message4}
var hh = orderProduct.push(result);
});
console.log(orderProduct);
var totalPrice = 0;
orderProduct.forEach(function (item , index) {
totalPrice = totalPrice + item.total
})
$.ajax({
type: 'GET',
data: {selectedProduct: orderProduct , sumTotal: totalPrice},
url: '/order/product',
success: function (data) {
console.log(data);
}
})
})
EJS template for '/new/order':
<header>
<h2>New Order : </h2>
</header>
<form action="/postOrder" method="post" id="newForm" >
<label> User Name:</label>
<select name="selectUser" id="user" >
<option disabled selected> Select User..</option>
<% users.forEach((users) => { %>
<option value="<%= users.id %>" > <%=users.name %> </option>
<% }) %>
</select>
<br>
<label>Address :</label>
<select name="selectAddress" id="address">
<option disabled selected> Select Address..</option>
</select>
<br>
<label>Product</label>
<a href="/orderProduct" id="addProduct"> add product</a>
<br>
<label>Status</label>
<select name="selectedStatus">
<% status.forEach((status) => { %>
<option value="<%= status.statusId %>"> <%= status.statusText %></option>
<% }) %>
</select>
<br>
<input type="submit" value="Save">
</form>