express 提交两张表格一张加工文件到数据库

Question

我在一个 form.hbs 页面中有两个表单，但使用相同的 process.js 文件在不同的场合使用两个不同的提交按钮处理这两个表单。

当我点击第一个提交按钮时，它应该在 process.js 文件内部处理并发送到数据库，当我点击同一页面中第二个表单的提交按钮时，它应该是仍在 process.js 文件中处理并发送到数据库。第一个有效，但第二个无效，它一直尝试提交第一个表单的内容。请问我该如何解决这个问题？

提前致谢。

forms.handlebar

    {{!-- FIRST FORM - MATERIAL FORM --}}
  <div id="materials">
    <form action="/forms" method="POST" autocomplete="off">
        <input type="hidden" name="_id" value="{{materials._id}}">
        <div class="form-group">
            <label>Category of Material</label>
            <input type="text" class="form-control" name="matName" value=" 
                  {{materials.matName}}"
                placeholder="Material Title">
            <div class="text-danger">
                {{materials.matNameError}}
            </div>
        </div>

        <div class="form-group">
            <label>Description</label>
            <input type="text" class="form-control" name="desc" value="{{materials.desc}}"
                placeholder="Material Description">
            <div class="text-danger">
                {{materials.descError}}
            </div>
        </div>
         
       <div class="form-group">
         <button type="submit" class="btn btn-info">
          <i class="fa fa-database"></i>Submit</button>
          <a href="/material-list" class="btn btn-danger">
            <i class="fa fa-list-alt"></i>All Material records
          </a>
      </div>
    </form>
   </div>

    
     {{!-- SECOND FORM - EQUIPMENT FORM --}}
   <div id="equipments" style="display:none">
    <form action="/forms" method="POST" autocomplete="off">
        <input type="hidden" name="_id" value="{{equipments._id}}">
        <div class="form-group">
            <label>Title of Equipment</label>
            <input type="text" class="form-control" name="eqName" value=" 
                  {{equipments.eqName}}"
                placeholder="Equipment Title">
            <div class="text-danger">
                {{equipments.eqNameError}}
            </div>
        </div>

        <div class="form-group">
            <label>Quantity</label>
            <input type="desc" class="form-control" name="quantity" value=" 
               {{equipments.quantity}}"
                placeholder="Quantity of Equipment">
            <div class="text-danger">
                {{equipments.quantityError}}
            </div>
        </div>
         
       <div class="form-group">
         <button type="submit" class="btn btn-info">
          <i class="fa fa-database"></i>Submit</button>
          <a href="/equipment-list" class="btn btn-danger">
            <i class="fa fa-list-alt"></i>All Equipment records
          </a>
      </div>
    </form>
   </div>

router.js

        //launching all forms
    router.get('/forms', MaterialController.launchForm);
    
       //posting & updating data to db
   router.post('/forms', MaterialController.createElement)
   router.post('/forms', EquipmentController.createElement);

      //getting list of existing items
   router.get('/material-list', MaterialController.Lists)
   router.get('/equipment-list', EquipmentController.Lists)

      //getting list by ids
   router.get('/:id', MaterialController.ids)
   router.get('/:id', EquipmentController.ids);

     //deleting items from db
   router.get('/delete/:id', MaterialController.delete);
   router.get('/delete/:id', EquipmentController.delete)

我知道有一种方法可以使用 javascript 来选择点击哪个按钮进行提交，但我真的不知道如何实现它。请提供任何帮助将不胜感激谢谢。

Answer 1

可能在表单上设置“提交”操作会更好（因为结果删除标签）

const elemetns = {
    equipmentsForm: document.getElementById('equipments') <== set this id to form,
    materialsForm: document.getElementById('materials') <== set this id to form
}

添加提交到每个表单后

elemetnts.equipmentsForm.submit(e => processForm(e, elemetnts.equipmentsForm, someRoute))
elemetnts.materialsForm.submit(e => processForm(e, elemetnts.materialsForm, someRoute))

在创建“processForm”函数后

  fucntion processForm (e, form, route) {
    e.preventDefault();
    const data = new FormData(form);

$.ajax({ 
    type: "POST",
    url: route,
    data
}).done(() => console.log('success'));
}

这里我用$.ajax。但是您可以使用新的 XMLHttpRequest() 构造函数。了解如何创建 XMLHttpRequest。

所以，我认为，足以解决您的问题。

此致！

express 提交两张表格一张加工文件到数据库

Submitting two forms with one processing file to the database in express

javascript

jquery

node.js

express

handlebars.js