Dfyjkt

Brief of what I am doing : Clicks on Edit form and it loads up, it fetches correct values from mongodb collections and displays in three fields of the Edit page.

Below form is displayed on click of 'Edit' button.

<% include ../partials/header %>

<div class="container">

 <h1 style="text-align:center">Edit <strong><i>"<%= campground.name %>"</i></strong></h1>
 <div style="width:40%; margin:25px auto;">
 <form action="/campgrounds/<%= campground._id %>?_method=PUT" method="POST">
 <p>campground object : <%= campground %></p>
 <div class="form-group row">
 <input type="text" class="form-control" placeholder="<%= campground.name %>" name="updatedCampground[name]">
 </div>
 <div class="form-group row">
 <input type="text" class="form-control" placeholder="<%= campground.image %>" name="updatedCampground[image]">
 </div>
 <div class="form-group row">
 <input type="text" class="form-control" placeholder="<%= campground.description %>" name="updatedCampground[description]">
 </div>
 <div class="form-group row">
 <button class="btn btn-lg btn-info btn-block">Submit!</button>
 </div>
 </form>
 <a href="/campgrounds/<%= campground._id %>">Back</a>
 </div>
</div>
<% include ../partials/footer %>

POST processing of this form is done in below route :

router.put('/:id', function(req, res)
 Campground.findByIdAndUpdate(req.params.id, req.body.updatedCampground, function(error, foundCampground)
 console.log("updatedCampground object from the form is", req.body.updatedCampground);
 if(error)
 console.log("There was some error updating the campground", error);
 res.redirect("/campgrounds");
 
 else
 res.redirect("/campgrounds/" + foundCampground._id);
 
 ); 
);

Issue : Two issues I am facing -

1. The fields that are being populated in the Edit form are NOT editable. To be more specific, I click on the field value and cursor just stays at the start of the value and doesn't move to right when I click on right arrow our use mouse to click on any character of the value displayed in the field. To make edits to the field I wanted to, as a workaround I am selecting a random value from the drop down list(browser saved values) of that field and then once that value gets selected in the field box I am making edits on it and then clicking on 'Submit' button. This works fine for that particular field but there is second issue below.

How Edit page looks when populated

2. For the fields in the 'Edit' form that I don't want to edit, on submission of form these fields values goes as blank in the updatedCampground array specified in the 'name' attribute of the Edit form.

What I have verified : The updatedCampground array specified in the 'name' attribute has blank values after submission of form, for the fields that were NOT edited. When Edit form displays the field values are NOT editable.