Как использовать onchange для рендеринга ejs через элемент select - PullRequest
1 голос
/ 17 октября 2019

Я использую Node.js для рендеринга файлов EJS. Я хочу, чтобы пользователь заполнил форму журнала и отправил свои данные в базу данных. Начальная часть формы находится в log.ejs, отображается через log.js и является неполной. Когда пользователь выбирает опцию, я хочу, чтобы остальная часть формы отображалась. Я хочу, чтобы каждая опция отображала немного разные формы (т.е. easyForm, longrunForm и т. Д.) И заполняла исходную форму, все еще используя log.ejs. Я попытался сделать это, добавив <%- include('logForms/easyForm.ejs') -%> после неполной формы в log.ejs, и попытался сделать это несколькими различными способами с атрибутом <select> elements onclick="". Я не придумал функционирующий код, и я не знаю лучшего способа сделать это с форматом EJS. Если я вручную добавлю <%- include('logForms/easyForm.ejs') -%> после неполной формы в log.ejs, то форма загрузится, и я смогу успешно сохранить данные в своей базе данных. Любая помощь будет оценена.

log.ejs

<%- include('partials/header.ejs') -%>

<!--Form begins but has no closing -->
<form class="" action="/log" method="post">
  <div class="form-group">
    <label for="">Date</label>
    <input type="date" name="workoutDate" class="">
    <label for="">Time</label>
    <input type="time" name="timeOfDay" placeholder="Time of day hh:mm">
    <select class="" id="workoutSelect" name="workoutType" onchange="">
      <option disabled selected value>-- select an option --</option>
      <option value="run">Run</option>
      <option value="longRun">Long run</option>
      <option value="shakeout">Shakeout</option>
      <option value="workout">Workout</option>
      <option value="race">Race</option>
      <option value="xTrain">X-Train</option>
    </select>
  </div>

<!--This is where specific logForm is used to add appropriate fields and close the form -->

<%- include('partials/footer.ejs') -%>

log.js

const express = require('express');
const router = express.Router();
const mongoose = require('mongoose');

const Data = require('../models/data');

router.get('/', (req, res, next) => {
  res.render('log');
});

router.post('/', (req, res, next) => {
  const data = new Data ({
      date: req.body.workoutDate,
      timeOfDay: req.body.timeOfDay,
      type: req.body.workoutType,
      otherData: req.body.otherData,
  });

  data.save()
    .then(results => {
      console.log(results);
      res.render('log');
    })
    .catch(err => {
      console.log(err);
      res.status(500).json({
        error: err
      });
    });
});


module.exports = router;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...