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

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