2015-02-16 14 views
0

Я хочу добавить placeholder в мою html-форму, основанную на выборе этой формы.Динамическая компоновщик 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 для обработки поиска данных в начале для выбора:

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 
     }); 

    }); 
}); 

});

ответ

0

Это как простой Ajax вызов ...

для onchange случая select вы должны вызвать яваскрипт метод с идентификатором продукта.

Из метода вам необходимо сделать запрос ajax на ваш сервер nodejs с предоставленным идентификатором. И на сервере вы должны создать новый маршрут для обслуживания запроса, который вернет значения в json.

Теперь при обратном вызове метода ajax javascript вы должны поместить значения в свои элементы документа.

Надеюсь, это поможет вам.

Спасибо.

Смежные вопросы