lundi 9 mars 2020

EJS/Express/Node app - checkbox and edits

I am trying to create a bus planning app. Once the data is entered on the "create/new" page (or revised in the edit stage), the plan will display the entered data on the "show" page. One of the inputs is a checkbox. If checked, I'd like the entry to show up on the plan results/edit page. When edited, I'd like to have the box checked if it has previously been checked, then be able to either uncheck that box or check another and have that info reflected on the plan page. As it is now, once checked, the object will not revise to show that the box has been unchecked, and will continue to show on the plan outcome page and will remain checked if you uncheck, leave the edit page, and return.

Relevant code: plans.js page:

router.post("/", middleware.isLoggedIn, function(req, res) {
    var openHouses =  req.body.openHouses;
}
var newPlan = {openHouses: openHouses}

and the update route:

router.put("/:id", middleware.checkPlanOwnership, function(req, res) {
    Plan.findByIdAndUpdate(req.params.id, req.body.plan, {new: true}, function(err, updatedPlan) {
        if (err) {
            res.redirect("/plans");
        } else {
            res.redirect("/plans/" + req.params.id);
        }
    });
});

On new.ejs: relevant part of the form:

   <div class="form-group">
                            <input class="form-check-input" type="checkbox" value="Open Houses" ? "checked" : "" name="openHouses" id="openHouses">
                            <label class="form-check-label" for="openHouses">
                              Open House
                            </label>
                          </div>  

On the relevant part of the show.ejs page:

<div class="col-md-6">
            <h3 id="activities">Activities</h3> 
            <p><span><% if(plan.openHouses == "Open Houses"){ %>
               Open Houses</span></p> 
                <% } else { %>
                <p>  </p>
                <% } %>
                <p><span><% if(plan.seminar == "Home Buyers Seminar"){ %>
                    Home Buyers Seminars</span></p> 
                     <% } else { %>
                     <p>  </p>
                     <% } %>
                     <% if(currentUser && plan.author.id.equals(currentUser._id)){ %>
                        <a class="btn btn-warning btn-sm" href="/plans/<%= plan._id %>/edit">Edit</a>
                    <form class="delete-form" action="/plans/<%= plan._id %>?_method=DELETE" method="post">
                        <button class="btn btn-danger btn-sm">Delete</button>
                    </form>
                    <% } %>
        </div>  

Relevant part of the schema:

  var planSchema = new mongoose.Schema({
        openHouses: String,
        description: String,
        comments: [{
            type: mongoose.Schema.Types.ObjectId,
            ref: "Comment"
        }]
    });

I have on the app page: mongoose.set('useFindAndModify', false);

I've read a bunch of the checkbox and mongoose entries here, but can't find anything that gets at this directly.

Any help very much appreciated.

enter image description here

enter image description here




Aucun commentaire:

Enregistrer un commentaire