Question

我有一个表单，其中有两个按钮，一个是save，另一个是save as draft，所以在保存时，我正在将该表单提交给其他servlet和{{1} }单击“我要对新的Servlet类执行操作

我正在做save as Draft，但是它不起作用

<button type="submit" id="saveDraft" formaction="InsertAsDraft"">

当我单击“保存”时，表单被提交到<div class="container" id="divHide"> <form action="InsertQuantityIndent" method="post" id="indentForm" autocomplete="on"> <div class="row position-relative"> <div class="col-lg-4 brder"> <h5 id="commonHeader">Outlet Name</h5> <select class="test" id="outlet" name="outlet"> <option>All</option> <option>ol1</option> <option>ol2</option> </select> </div> <div class="col-lg-4"> <h5 id="commonHeader">Category</h5> <select class="test" id="CategoryName" name="categoryCode"> <option>All</option> <option>Cat1</option> <option>Cat2</option> </select> </div> </div> <hr style="border: 1px solid black"> <div> <button type="submit" id="save" class="commonButton"> <i class="fas fa-save"></i> Save </button> <button type="submit" id="saveDraft" formaction="InsertAsDraft" class="commonButton"> <i class="fas fa-save"></i> Save as draft </button> </div> </form> </div>，但是当我单击“ InsertQuantityIndent”时，表单被提交了，但是没有数据返回到后端。

类似于servlet中的save as draft

这是我的servlet

request.getparameter

此处不打印任何内容，因此我想在按钮单击时提交表单，并将该数据重新命名为后端

Answer 1

HTML

<div class="container" id="divHide">
   <form action="InsertQuantityIndent" method="post" id="indentForm" autocomplete="on">
      <div class="row position-relative">
         <div class="col-lg-4  brder">
            <h5 id="commonHeader">Outlet Name</h5>
            <select class="test" id="outlet" name="outlet">
               <option>All</option>
               <option>ol1</option>
               <option>ol2</option>
            </select>
         </div>
         <div class="col-lg-4">
            <h5 id="commonHeader">Category</h5>
            <select class="test" id="CategoryName" name="categoryCode">
               <option>All</option>
               <option>Cat1</option>
               <option>Cat2</option>
            </select>
         </div>
      </div>
      <hr style="border: 1px solid black">
      <div>
         <button id="save" class="commonButton" data-formAction="servlet">
         <i class="fas fa-save"></i> Save
         </button>
         <button id="saveDraft" data-formAction="InsertAsDraft" class="commonButton">
         <i class="fas fa-save"></i> Save as draft
         </button>
      </div>
   </form>
</div>

JavaScript

const formElm = document.getElementById('indentForm');

const saveButton = document.getElementById("save");
saveButton.addEventListener('click', (e) => {
  e.preventDefault();
  let elm = e.target;
  const formAction = elm.dataset.formaction;
  console.log(formAction);

  formElm.action = formAction;

  formElm.submit();
});

const saveDraftButton = document.getElementById("saveDraft");
saveDraftButton.addEventListener('click', (e) => {
  e.preventDefault();
  let elm = e.target;
  const formAction = elm.dataset.formaction;
  console.log(formAction);

  formElm.action = formAction;

  formElm.submit();
});

您可以找到工作示例stackblitz：

https://stackblitz.com/edit/js-qmsnzc

Answer 2

您可以在此处命名按钮并检查按钮的值，然后进行相应处理。

<button type="submit" id="save" name="btn_save" class="commonButton">
   <i class="fas fa-save"></i> Save
 </button>
 <button type="submit" id="saveDraft" name="btn_save_draft" class="commonButton">
   <i class="fas fa-save"></i> Save as draft
 </button>

或者您可以将按钮的类型更改为按钮并处理点击侦听器。在您的听众中更改表单操作，然后使用javascript提交。

如何在单击按钮时提交表单

2 个答案: