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

Question

我有一个表单，其中有两个按钮，一个是save ，另一个是save as draft ，因此在保存时，我正在将该表单提交到其他servlet ， save as Draft我想对新的servlet类进行操作

• 我正在做<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 ，但是当我单击“ save as draft它将提交，但没有数据返回到后端

像servlet中的request.getparameter

这是我的servlet

    String outlet = request.getParameter("outlet");
    String CategoryCode= request.getParameter("categoryCode");
   System.out.println("outlet in new file :"+outlet);

在这里它什么也没打印，所以我想在按钮单击时提交表单，并将该数据放回其名称的结尾

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提交。