ejs onclick add div inside formular

Question

I want to add another input field after clicking a button inside a form tag I use node, express, ejs and mongodb an i tried to define a function with an onclick ref to the button element but if I want to render the html new it just returns nothing.

formular.ejs

<div class="form-group">
    <label for="biography">Biografie</label>
    <textarea class="form-control" name="bio" rows="7"><%= post.bio %></textarea>
</div>

<div class="form-group" id="newTech">
    <label for="technic">Techniken <i>(optional)</i></label>
    <%- include('newTechnic') %>
    <input class="btn btn-outline-success" id="newTechButton" onclick="newTechnic()">
</div>

the include file

<div class="row m-1">
    <input type="text" class="form-control col-7 mr-1" name="technic" placeholder="Öl auf Leinwand..."
        value="<%= post.technic %>">
    <input type="number" class="form-control col-2" name="techPricerangeFrom" placeholder="Preis von"
        value="<%= post.techPricerangeFrom %>">
    <input type=" number" class="form-control col-2" name="techPricerangeTo" placeholder="Preis bis"
        value="<%= post.techPricerangeTo %>">
</div>

js file


    const btn = document.getElementById('newTechButton');
    const techform = document.getElementById('newTech');
    const html = "<%- include('newTechnic') %>";

    function newTechnic () {
        btn.innerHTML = html;
    }

Your server-side JavaScript program which runs inside your EJS template is a **different program** to the one which runs inside ` — Quentin, Mar 05 '20 at 10:17
`const html = "<%- include('newTechnic') %>";` — and of course, since your JS file isn't your EJS file and is fetched with a different HTTP request, you can't use EJS template directives in it. — Quentin, Mar 05 '20 at 10:23

ejs onclick add div inside formular

0 Answers0