连接两种不同形式的上传和提交按钮

Question

我正在格式化一个表格，其中有一列 ACTION，其中包含 upload、download、deliver、reject 等操作。现在我需要将其分成两列，如 UPLOAD（上传、下载）和 ACTION（交付和拒绝）。现在的问题是上传和交付的功能是一种形式。

<td class="content-writing-action">
    @if($data->status==2 || $data->status==0)
    <form action="{{ route('upload-content') }}" method="post" enctype="multipart/form-data" class="form-sty form-button ">
            {{ csrf_field() }}
            <input type="hidden" name="id" value="{{ $data->id }}">
            <div class="choose_file">
                <a><i class="fa fa-upload"></i></a>
                <input name="attachment" id="attachment" type="file" accept=".doc,.docx,.txt,.pdf" required/>
            </div>
            <button id="submit" class="content-writing-btn"><i class="fa fa-check"></i></button>
        </form>
        
        <form action="{{route('content.reject')}}" id="rejectForm" method="post"
              enctype="multipart/form-data"
              class="form-sty form-button ">
            {{csrf_field()}}
            <input type="hidden" value="{{$data->id}}" name="reject_id">
            {{--  <textarea required placeholder="Enter your reason to reject the order." style="display: none;" class="form-control reject_reason" name="reject_reason_{{$data->id}}" id="reject_reason_{{$data->id}}" rows="2"></textarea>--}}
            <i class="fas fa-times text-danger website_reject reject_reason"
               id="reject_{{$data->id}}"
               ></i>
        </form>
    @endif
</td>

现在，我怎样才能将上传和提交功能变成两种不同的形式？如何将一个表单的上传按钮连接到另一个表单的提交按钮。 谢谢

Answer 1

在纯 html 中，输入标签的值只能传递给它自己的表单。如果你想要一个单一的输入类型文件，你将不得不使用一些 JavaScript 来处理你的按钮，例如：

getFormData = function() {
   const input = document.getElementById('file');
   const file = input.files[0];
   const formData = new FormData();
   formData.append("attachment", file);
   return formData;
}

submitFileToUrl1 = function() {
  const formData = getFormData();
  fetch('/url1', {method: "POST", body: formData});
}

submitFileToUrl2 = function() {
  const formData = getFormData();
  fetch('/url2', {method: "POST", body: formData});
}

<input type="file" id="file">
<button onclick="submitFileToUrl1()">First action</button>
<button onclick="submitFileToUrl2()">Second action</button>