Как использовать onchange для рендеринга ejs через элемент select

Как использовать onchange для рендеринга ejs через элемент select

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

log.ejs

 {amp}lt;%- include('partials/header.ejs') -%{amp}gt; {amp}lt;!--Form begins but has no closing --{amp}gt; {amp}lt;form class="" action="/log" method="post"{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;label for=""{amp}gt;Date{amp}lt;/label{amp}gt; {amp}lt;input type="date" name="workoutDate" class=""{amp}gt; {amp}lt;label for=""{amp}gt;Time{amp}lt;/label{amp}gt; {amp}lt;input type="time" name="timeOfDay" placeholder="Time of day hh:mm"{amp}gt; {amp}lt;select class="" id="workoutSelect" name="workoutType" onchange=""{amp}gt; {amp}lt;option disabled selected value{amp}gt;-- select an option --{amp}lt;/option{amp}gt; {amp}lt;option value="run"{amp}gt;Run{amp}lt;/option{amp}gt; {amp}lt;option value="longRun"{amp}gt;Long run{amp}lt;/option{amp}gt; {amp}lt;option value="shakeout"{amp}gt;Shakeout{amp}lt;/option{amp}gt; {amp}lt;option value="workout"{amp}gt;Workout{amp}lt;/option{amp}gt; {amp}lt;option value="race"{amp}gt;Race{amp}lt;/option{amp}gt; {amp}lt;option value="xTrain"{amp}gt;X-Train{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;!--This is where specific logForm is used to add appropriate fields and close the form --{amp}gt; {amp}lt;%- include('partials/footer.ejs') -%{amp}gt; 

log.js

 const express = require('express'); const router = express.Router(); const mongoose = require('mongoose'); const Data = require('../models/data'); router.get('/', (req, res, next) ={amp}gt; { res.render('log'); }); router.post('/', (req, res, next) ={amp}gt; { const data = new Data ({ date: req.body.workoutDate, timeOfDay: req.body.timeOfDay, type: req.body.workoutType, otherData: req.body.otherData, }); data.save() .then(results ={amp}gt; { console.log(results); res.render('log'); }) .catch(err ={amp}gt; { console.log(err); res.status(500).json({ error: err }); }); }); module.exports = router; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector