动态占位符HTML表单(Dynamic placeholder HTML form)

 我想根据选择的表单为我的html表单添加一个占位符。 
 
<fieldset id="productEditPanel">
    <legend>Edit a Product</legend>
    <form method="POST" action="/admin/api/prod/edit" enctype="multipart/form-data">
        <label for="prodEditPId">Product *</label>
        <div>
            <select id="prodEditPId" name="pid" required>
                <option value="">Please select a product</option>
            {{#each prod}}
                <option value="{{pid}}">{{name}}</option>
            {{/each}}
            </select>
        </div>

        <!-- 
            Design the form for editing a product's catid, name, price, description and image   
            - the original values/image should be prefilled in the relevant elements (i.e. <input>, <select>, <textarea>, <img>)
            - prompt for input errors if any, then submit the form
        -->

        <label for="prodEditName">Name *</label>
        <div><input id="prodEditName" type="text" name="name" required pattern="^[\w- ']+$" /></div>

        <label for="prodEditPrice">Price *</label>
        <div><input id="prodEditPrice" type="number" step="0.05" name="price" required pattern="^\d+(?:\.\d{1,2})?$" /></div>

        <label for="prodEditDescription">Description</label>
        <div><textarea id="prodEditDescription" name="description" pattern="^[\w- ',\r\n]+$"></textarea></div>

        <label for="prodEditImage">Image *</label>
        <div><input id="prodEditImage" type="file" name="file" accept="image/*"> required /></div>

        <input type="submit" value="Add" />
    </form>
</fieldset>
 
 我正在使用node.js，我对如何接收特定产品的特定数据感到困惑。 
 
 这是我的backend.js来处理select的开始时的数据检索： 
 
app.get('/', function (req, res) {
// async fetch data from SQL, render page when ready
pool.query('SELECT * FROM categories', function (error, categories) {
    if (error) {
        console.error(error);
        res.status(500).end();
        return;
    }
    pool.query('SELECT * FROM products', function (error, products) {
        if (error) {
            console.error(error);
            res.status(500).end();
            return;
        }
        res.render('admin-panel', {
            layout: 'admin',
                title: 'IERG4210 Shop43 Admin',
                cat: categories.rows,
                prod: products.rows
        });

    });
});
 
 }）; 

I want to add a placeholder to my html form based on a select of that form.
 
<fieldset id="productEditPanel">
    <legend>Edit a Product</legend>
    <form method="POST" action="/admin/api/prod/edit" enctype="multipart/form-data">
        <label for="prodEditPId">Product *</label>
        <div>
            <select id="prodEditPId" name="pid" required>
                <option value="">Please select a product</option>
            {{#each prod}}
                <option value="{{pid}}">{{name}}</option>
            {{/each}}
            </select>
        </div>

        <!-- 
            Design the form for editing a product's catid, name, price, description and image   
            - the original values/image should be prefilled in the relevant elements (i.e. <input>, <select>, <textarea>, <img>)
            - prompt for input errors if any, then submit the form
        -->

        <label for="prodEditName">Name *</label>
        <div><input id="prodEditName" type="text" name="name" required pattern="^[\w- ']+$" /></div>

        <label for="prodEditPrice">Price *</label>
        <div><input id="prodEditPrice" type="number" step="0.05" name="price" required pattern="^\d+(?:\.\d{1,2})?$" /></div>

        <label for="prodEditDescription">Description</label>
        <div><textarea id="prodEditDescription" name="description" pattern="^[\w- ',\r\n]+$"></textarea></div>

        <label for="prodEditImage">Image *</label>
        <div><input id="prodEditImage" type="file" name="file" accept="image/*"> required /></div>

        <input type="submit" value="Add" />
    </form>
</fieldset>
 
I'm using node.js and i'm confused on how to receive the specific data on the specific product.
 
This is my backend.js to handle the data retrieval at the start for the select:
 
app.get('/', function (req, res) {
// async fetch data from SQL, render page when ready
pool.query('SELECT * FROM categories', function (error, categories) {
    if (error) {
        console.error(error);
        res.status(500).end();
        return;
    }
    pool.query('SELECT * FROM products', function (error, products) {
        if (error) {
            console.error(error);
            res.status(500).end();
            return;
        }
        res.render('admin-panel', {
            layout: 'admin',
                title: 'IERG4210 Shop43 Admin',
                cat: categories.rows,
                prod: products.rows
        });

    });
});
 
});

原文：https://stackoverflow.com/questions/28541534