как отправить форму по нажатию кнопки

Question

У меня есть форма, в которой у меня есть две кнопки, одна из которых save, а другая - save as draft, поэтому при сохранении я отправляю форму другому 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, но когда я нажимаю на save as draft, она отправляется, но данные не доходят до конца

Как request.getparameter в сервлете

Вот мой сервлет

    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.