title: Dynamic placeholder HTML form
body: <p>I want to add a placeholder to my html form based on a select of that form.</p>
  
  <pre><code>&lt;fieldset id="productEditPanel"&gt;
      &lt;legend&gt;Edit a Product&lt;/legend&gt;
      &lt;form method="POST" action="/admin/api/prod/edit" enctype="multipart/form-data"&gt;
          &lt;label for="prodEditPId"&gt;Product *&lt;/label&gt;
          &lt;div&gt;
              &lt;select id="prodEditPId" name="pid" required&gt;
                  &lt;option value=""&gt;Please select a product&lt;/option&gt;
              {{#each prod}}
                  &lt;option value="{{pid}}"&gt;{{name}}&lt;/option&gt;
              {{/each}}
              &lt;/select&gt;
          &lt;/div&gt;
  
          &lt;!-- 
              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. &lt;input&gt;, &lt;select&gt;, &lt;textarea&gt;, &lt;img&gt;)
              - prompt for input errors if any, then submit the form
          --&gt;
  
          &lt;label for="prodEditName"&gt;Name *&lt;/label&gt;
          &lt;div&gt;&lt;input id="prodEditName" type="text" name="name" required pattern="^[\w- ']+$" /&gt;&lt;/div&gt;
  
          &lt;label for="prodEditPrice"&gt;Price *&lt;/label&gt;
          &lt;div&gt;&lt;input id="prodEditPrice" type="number" step="0.05" name="price" required pattern="^\d+(?:\.\d{1,2})?$" /&gt;&lt;/div&gt;
  
          &lt;label for="prodEditDescription"&gt;Description&lt;/label&gt;
          &lt;div&gt;&lt;textarea id="prodEditDescription" name="description" pattern="^[\w- ',\r\n]+$"&gt;&lt;/textarea&gt;&lt;/div&gt;
  
          &lt;label for="prodEditImage"&gt;Image *&lt;/label&gt;
          &lt;div&gt;&lt;input id="prodEditImage" type="file" name="file" accept="image/*"&gt; required /&gt;&lt;/div&gt;
  
          &lt;input type="submit" value="Add" /&gt;
      &lt;/form&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>I'm using node.js and i'm confused on how to receive the specific data on the specific product.</p>
  
  <p>This is my backend.js to handle the data retrieval at the start for the select:</p>
  
  <pre><code>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
          });
  
      });
  });
  </code></pre>
  
  <p>});</p>