Editing text on a page in node js

Question

I am trying to implement a simple edit feature in my app. In my profile.handlebars file, I have an edit button. When clicked, I'd like the user's information to appear in the text input fields on the form in order to allow the user to edit their existing information.

Right now, they would have to input all of their information over again (and every field in the form would need to be filled out due to validation that I have implemented), click Submit, and their profile can be updated. Is this possible without using a framework (like Angular)? For example, in LinkedIn, a user can hover over a section of their profile causing the edit buttons to highlight, then click a single edit button, and they're instantly in editing mode. That might be too advanced for my purposes right now, but eventually, I'd love to have functionality like that.

I have a post request in my routes file to handle a user posting information to their profile:

router.post('/add', function(req, res) {
  req.checkBody({
    'city': {
      errorMessage: 'Please enter your city'
    },
    'state': {
      errorMessage: 'Please enter your state',
      notEmpty: true
    },
    'zip': {
      errorMessage: 'Please enter your zip code',
      notEmpty: true
    },
    'about': {
      errorMessage: 'Please briefly describe yourself',
      notEmpty: true
    }
  });
  console.log("req.user " + req.user);

  var errors = req.validationErrors();

  if (errors) {
    res.render('profile', {
      errors: errors
    });
  } else {
    var user_info = new User_Info({
      city: req.body.city,
      state: req.body.state,
      zip: req.body.zip,
      about: req.body.about,
      user_name: req.user.username
    });
    user_info.save(function(err, user_info) {
      if (err) throw err;
    });
    res.redirect('profile/' + req.user.username)
  }
})

Then, I have my profile.handlebars file:

{{#if errors}}
Uh oh!  Something went wrong.  Please review the below errors, and try again.<br><br>
<ul>
{{# each errors }}
    <li style="color: red">{{this.msg}}</li>
{{/each}}
</ul>
{{else}}

<h3 align="center">Profile ({{user_name.name}})</h3>

<div class="row">
    <div class="col-md-4 col-md-offset-4">
        <div class="thumbnail" style="border-radius: 12px">
            <div class="caption">
                <p>City: {{# each information }} {{this.city}} {{/each}}</p>
                <p>State: {{# each information }} {{this.state}} {{/each}}</p>
                <p>Zip: {{# each information }} {{this.zip}} {{/each}}</p>
                <p>About: {{# each information }} {{this.about}} {{/each}}</p>
                <div class="btn-group">
                <a href=""><button type="Edit" class="btn btn-danger dropdown-toggle deleteLocation" data-id="{{this.id}}">Edit</button></a>
                </div>
            </div>
        </div>
    </div>
</div>

<br>
<center>
<form method="POST" action="/users/add">
    <input type="text" name="city" placeholder="City" style="text-align: left">
    <br><br>
    <input type="text" name="state" placeholder="State" style="text-align: left">
    <br><br>
    <input type="text" name="zip" placeholder="Zip" style="text-align: left">
    <br><br>
    <textarea name="about" placeholder="About You" style="text-align: left; resize: both;" rows="5" cols="50"></textarea>
    <br><br>
    <div class="btn-group">
        <button type="submit" class="btn btn-success dropdown-toggle" aria-haspopup="true" aria-expanded="false">Submit</button>
    </div>
    <br><br>
</form>
</center>

{{/if}}

Please let me know if you need additional info to help me solve this issue. Thanks!

Shekhar Tyagi · Accepted Answer · 2016-12-13 05:03:28Z

1

you can use this code for node for editing the parameters , city,state,zip and about.   
 router.post('/add', function (req, res) {
        var users = req.Collection;
        var city = req.body.city;
        var state = req.body.state;
        var zip = req.body.zip;
        var about = req.body.about;
        var user_id = req.body.user_id;
        if (city && state && ) {
            users.findOneAndUpdate({_id: user_id}, {$set: {city: city, state: state, zip: zip, about:about}}, function (err, user) {
                if (err) {
                    res.json({status: 0, message: err});
                }
                if (!user) {
                    res.json({status: 0, msg: "not found"});
                } else {
                    res.json({status: 1, city: city, state: state, zip: zip, about:about, message: " edit success"});
                }
            })
        } else {
            res.json({status: 0, msg: "Invalid Fields"});
        }
    });

answered Dec 13, 2016 at 5:03

Shekhar Tyagi

1,68415 silver badges18 bronze badges

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

1 Comment

Farid Over a year ago

Thanks for the help! I started using jQuery, which seemed to do what I was trying to do. But, this reply is definitely helpful.

Collectives™ on Stack Overflow

Editing text on a page in node js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related