При отправке формы редактирования, поля не редактируются вообще, значения имени этих полей отправляются как пустые значения

Question

Кратко о том, что я делаю: нажимает на форму редактирования, и она загружается, она выбирает правильные значения из коллекций mongodb и отображает в трех полях страницы редактирования.

Ниже форма отображается при нажатии кнопки "Редактировать".

<% 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 обработка этой формы выполняется по следующему маршруту:

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);
        }
    });    
});

Проблема: две проблемы, с которыми я сталкиваюсь -

1. Поля, которые заполняются в форме редактирования, НЕ доступны для редактирования. Чтобы быть более точным, я нажимаю на значение поля, и курсор просто остается в начале значения и не перемещается вправо, когда я нажимаю на стрелку вправо, используя нашу мышь, чтобы щелкнуть любой символ значения, отображаемого в поле. Чтобы внести изменения в поле, которое я хотел, в качестве обходного пути я выбираю случайное значение из выпадающего списка (сохраненные в браузере значения) этого поля, а затем, как только это значение выбирается в поле поля, я вносю в него изменения и затем нажмите кнопку "Отправить". Это прекрасно работает для этой конкретной области, но есть вторая проблема ниже.

Как выглядит страница редактирования при заполнении

2. Для полей в форме "Редактировать", которые я не хочу редактировать, при отправке формы значения этих полей остаются пустыми в массиве updatedCampground, указанном в атрибуте "имя" формы Редактировать.

Что я проверил: Массив updatedCampground, указанный в атрибуте 'name', имеет пустые значения после отправки формы для полей, которые НЕ были отредактированы. При отображении формы редактирования значения полей НЕ редактируются.