Две формы на одной странице, можете ли вы предотвратить обновление при отправке одной из двух форм?

Question

В моем приложении Java / Springboot / Thymeleaf есть страница с несколькими формами.Одна форма содержит модальное окно, которое появляется при нажатии кнопки, поэтому вы можете прикреплять файлы.Когда вы нажимаете «Отправить», чтобы прикрепить файл, он сохраняется в файл на сервере, но обновляет исходную форму, и я теряю свои входные данные формы.Есть ли способ предотвратить дефолт, чтобы он не обновлялся, вызывая потерю данных из другой формы (которая еще не была отправлена), и по-прежнему отправлялся для загрузки файла на мой сервер?

HTML:

    <div id="modal" class="modal" data-izimodal-title="Upload a Document">
       <div id="newRequiredDocForm">
           <form enctype="multipart/form-data" th:action="directBind"  method="post" th:object="${document}">
              <div class="row">
                   <div class="col-xs-4 col-sm-3 text-right"><label class="modalLabel">Type:</label></div>
                   <div class="col-xs-4 col-sm-3 text-right">
                   <label class="modalLabel">File:</label>
                 </div>
                 <div class="col-xs-8 col-sm-7">
                    <input type="file" id="file" name="document" multiple="multiple" style="margin-right:-20px;"/>
                 </div>
              </div>
              <br/><br/>
              <div style="text-align: right;"><input type="button" id="attachTheDoc" class="btn btn-docModal" value="Submit"/></div>
            </form>
        </div>
    </div>

Контроллер:

@RequestMapping(value="/directBind_ajax", method=RequestMethod.POST)
public @ResponseBody Document docSend(@ModelAttribute("document") Document document, Model model, @RequestParam("file") MultipartFile file){
        document.setStorage(storageService.store(file));
        model.addAttribute("newDocument", document);
        return document;
    }

Ajax Javascript:

$('#attachTheDoc').click(function(){
  var data = $('#file').val();
  console.log($('#file').val());
  $.ajax({
      type: "POST",
      data: data,
      cache: false,
      url: "/directBind_ajax",
      success: function(data){
          alert("Your files have been saved");
      },
      error: function(){
          alert("Error - File not uploaded");
      }
  });
});