Update and delete buttons using node.js

Question

I am very new to programming, it might sound stupid but can anyone of you please help me out. I am designing a cart page using node.js which adds each item at once. There are two buttons update and delete, everything is working fine except these buttons. Can anyone help me out to make these buttons working. Thank you

Here is my code.

cart.js

var express = require('express');
var router = express.Router();

router.all('/', function (req, res, next) {
    var cartTgt = [];
if (req.session.cart !== undefined) {
    cartTgt = req.session.cart;
}
res.render('cart', {title: 'Your Cart', cart: cartTgt,message: 'Successfully Added'});
});

module.exports = router;

order.js

var express = require('express');
var router = express.Router();
router.all('/', function (req, res, next) {
var message = '';
if (req.method === 'POST') {
    if (req.session.cart === undefined) {
        req.session.cart = [];
    }
    var item = {};
    item.itemname = req.body.itemname;
    item.quantity = req.body.quantity;
    req.session.cart.push(item);
    console.log(req.session.cart);
}
res.render('order', {title: 'Order Form', message: 'The item has been added to the cart!'});
});

module.exports = router;

cart.jade

html
head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
body
    header
        h1= title
        hr
    section
    form(method='post' action='/cart')
        table
            thead
                tr
                    th Item Name
                    th Quantity
                    th Update
                    th Delete
            tbody
                each item in cart
                    tr
                        td #{item.itemname}
                        td #{item.quantity}
                        td: input(type='submit',value='Update')
                        td: form(method='post' action='/cart')                    
                                input(type='submit',value='Delete')

    br
    p= message

order.jade

html  
head    
    title= title    
    link(rel='stylesheet', href='/stylesheets/style.css')  
body    
    h1= title    
    hr    
    form(method='POST', action='/order')      
        label Item Name:      
        br      
        input(type='text', name='itemname')      
        br      
        label Quantity:      
        br      
        input(type='text', name='quantity')      
        br      
        input(type='submit')
    br
    a(href='/') Home Page
    br
    a(href='/cart') Cart Page
    hr
    p= message

Yes nivesh i am using that. If you want I can show my app.js code. — Abdul Latif Talal
– Abdul Latif Talal, Commented Mar 29, 2016 at 0:38
By update what do you want to achieve, update the item quantity? — Nivesh
– Nivesh, Commented Mar 29, 2016 at 0:41
yeah by update i wanna update quantity and by delete i wanna delete that item. — Abdul Latif Talal
– Abdul Latif Talal, Commented Mar 29, 2016 at 0:46

Nivesh · Accepted Answer · 2016-03-29 01:17:16Z

2

Solution: You are using nested form to update and delete, besides you are not sending which item quantity is to be updated or deleted. Thus, better option is to eliminate the nested forms and use simple anchor tags, in which you can send a GET request with itemname in the query string and on cart.js retrieve the itemname and update the req.session.cart as you need.

Cart.jade

 td: a(href='http://yourwesite/cart/update?item='+item.itemname) Update
 td: a(href='http://yourwesite/cart/delete?item='+item.itemname) Delete

Cart.Js

app.get('/update',function(req,res,next){
 // get the itemname from querystring using req.query.itemname
 // and perform operations in the req.session.cart array
 var temp = req.session.cart.map(function(value,index,array){
   if(value.itemname === req.query.itemname){
    value.quantity +=1;
   }
   return value;
 });

 req.session.cart = temp;

 res.render('cart', {title: 'Your Cart', cart: req.session.cart, message: 'Successfully Added'});

});
app.get('/delete',function(req,res,next){
 // get the itemname from querystring using req.query.itemname
 // and perform operations in the req.session.cart array
 var temp = req.session.cart.filter(function(value,index,array){
   if(value.itemname === req.query.itemname){
    // remove the item from the cart array
    return false; 
   }
    return true;
 });
 req.session.cart = temp;

 res.render('cart', {title: 'Your Cart', cart: req.session.cart, message: 'Successfully Added'});
});

Notes: If you have to use POST request then you have to have two separate forms. But you can achieve it using GET request also thus a tags are favorable for that.

edited Mar 29, 2016 at 1:17

answered Mar 29, 2016 at 1:00

Nivesh

2,6031 gold badge22 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Abdul Latif Talal Over a year ago

Thanks nivesh, i will try doing that.

Nivesh Over a year ago

Note that, here we are just increasing the quantity count by 1, every time use clicks on update, but if you need to change the count manually then you need to have a form for updating quantity as @Berda has written for quanity. And that would be a POST request.

Abdul Latif Talal Over a year ago

nivesh when I click on update, its still showing an error. my website is localhost:3000

Nivesh Over a year ago

href mus be: http://localhost:3000/cart/update You are routing to cart.js in app.js if it has '/cart' right.

Mr Lister · Accepted Answer · 2016-04-03 19:22:57Z

In both cases:

The form should be there for each item, not for the whole table. Considering there are no more problems, only one item would be changed regardless of which "Update" button was pressed.
You're also not sending the item name to the server when submitting the form. When using HTML forms, everything you want to send in the request must be inside an <input> tag (or you use XMLHttpRequest and specify what you want manually). I suggest adding an hidden field to store it like this:

input(type='hidden' name='itemname' value='#{item.itemname}')

Also, you cannot nest HTML forms, so the two used in the table must be separated. And finally, are you sure everything worked as expected? The quantity cannot be edited without using an input tag for it in the cart page.

I suggest you change your code (inside cart.jade) as such:

html
head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
body
    header
        h1= title
        hr
    section
    //form(method='post' action='/cart') -> Moved below
    table
        thead
            tr
                th Item Name
                th Quantity
                // No th Update, explained why below
                th Delete
        tbody
            each item in cart
                tr
                    td #{item.itemname}

                    // The whole form needs to be inside a single <td> tag, so the quantity and update columns are merged together
                    td
                      form(method='post' action='/cart')
                        // Send the item's name
                        input(type='hidden' name='itemname' value='#{item.itemname}')

                        // Expose the quantity as a editable text box (in an input so it gets sent)
                        input(type='number' name='quantity' value='#{item.quantity}')
                        input(type='submit' value='Update')

                    // The delete button form, completely contained in the <td> tag
                    td
                      form(method='post' action='/cart')
                        // Send the item's name
                        input(type='hidden' name='itemname' value='#{item.itemname}')
                        input(type='submit' value='Delete')

    br
    p= message

To avoid the duplicate hidden inputs you could try sending requests without forms: with XMLHttpRequest. I advise against using it directly so try a library like qwest or jQuery.

thanks breda, i really appreciate your answer. I am very new to programming that's why I didn't know much.

Collectives™ on Stack Overflow

Update and delete buttons using node.js

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related