skip to Main Content

I’m building my first CRUD application (Create, Read, Update, and Delete), but i’m having issues Updating the Data.

On the html page, when you click on a table row that you wish to update, it sends you to an update page with a form where you can change the elements and submit the data with a button ; then it console.log the value of what has been changed.

The problem is that it console.logs "undefined undefined undefined undefined undefined" instead of something like "1 Ricardio [email protected] password1234 18yearsold", and the data isn’t updated to my SQL table (named calipplpush1)

I’m new with node js and mysql, so i will do my best to provide you with a detailed answer if you have questions.
I suspect this might be a problem with the req.body.id, req.body.exercice etc

This is the route for my update page (server.js) :

app.get('/update', function(req, res){  // Table Update page
    var sql = `Select * from calipplpush1 where id =?;`
    var id = req.query.id;
    con.query(sql,[id],function(error,result){
        if (error) console.log(error);
        res.render('update',{ calipplpush1: result});
    })
});

This is the Post to update the data (server.js)


// Post Table Update to the database
app.post('/updateData', function(req, res){
    var id = req.body.id;
    var exercice = req.body.exercice;
    var sets = req.body.sets;
    var repetitions = req.body.repetitions;
    var kilograms = req.body.kilograms;
    console.log(id, exercice, sets, repetitions, kilograms);
    var sql=`update calipplpush1 set exercice=?, sets=?, repetitions=?, kilograms=? where id=?`
    con.query(sql,[id,exercice,sets,repetitions,kilograms], function(error,result){
        if (error) console.log(error);
        console.log("Data Updated");
        res.redirect('/cali-ppl')
    })
})

This line :
console.log(id, exercice, sets, repetitions, kilograms);
–> it sends "undefined undefined undefined undefined undefined", and there is no update on my html or sql database.

This is my update.ejs file with the form to update :


<div class="div_table_update">
    <table class="table">
        <form method="POST" action="/updateData">
            <td>
                <input type="text" name="caliPush1Id"  placeholder="id" class="workout_data_input" value="<%= calipplpush1[0].id %>" readonly/>
            </td>
            <tr>
                <td>
                    <input type="text" name="caliPush1Ex"  placeholder="exercice" class="workout_data_input" value="<%= calipplpush1[0].exercice %>"/>
                </td>
            <tr>
                <td>
                    <input type="text" name="caliPush1Sets" placeholder="sets" class="workout_data_input" value="<%= calipplpush1[0].sets %>"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" name="caliPush1Reps" placeholder="reps" class="workout_data_input" value="<%= calipplpush1[0].repetitions %>"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" name="caliPush1Kgs" placeholder="kgs" class="workout_data_input" value="<%= calipplpush1[0].kilograms %>"/>
                    <input type="submit" name="submit_button" class="workout_data_btn" value="ok" />
                </td>
            </tr>
        </form>
    </table>
</div>

I tried to replace the "ID" primary column to select from the database with the "exercice" column, but it still shows "undefined".

2

Answers


  1. You are getting undefined because req.body is empty object {}. To use req.body, you would have to parse it first. In order to do that, use this middleware:

    var bodyParser = require('body-parser');
    
    app.use(bodyParser.urlencoded({
      extended: true
    }));
    

    or use express’s built-in parser:

    app.use(express.json());
    

    I hope this helps you.

    Login or Signup to reply.
  2. If you do console.log(req.body) you should see that your data is there, but under different field names. The name of each field will be the name you gave the field in the html, in your case:

    • req.body.caliPush1Id
    • req.body.caliPush1Ex
    • req.body.caliPush1Sets
      etc.
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search