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

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

0 голосов
/ 09 ноября 2018

Кратко о том, что я делаю : нажимает на форму редактирования и загружает ее, получает правильные значения из коллекций 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', имеет пустые значения после отправки формы для полей, которые НЕ были отредактированы. Когда отображается форма редактирования, значения полей НЕ доступны для редактирования.

...