フォームを特定のページに移動する方法

Question

フォームのチェックボックスを使用して、チェックボックスをオンにしたときに異なるエンディングを持つ特定のページにリンクしています。 現時点ではhttp://localhost:13080/download?filesToDownload=p9mPFauS9VjjBXHFYCxWlg%3D%3D&submit=Download+File

に私を結ぶが、私はそれがhttp://localhost:13080/download/p9mPFauS9VjjBXHFYCxWlg%3D%3D

HTMLに私をリンクする：

<form action="/download" method="get"> 
     <table id="downloadFile" width="100%"> 
      <tr> 
       <td> 
        <table id="downloadFileDetails"> 
         <tr id="dld"> 
          <td id="dld" width="2%"></td> 
          <td id="dld" width="80%">File Name</td> 
          <td id="dld" width="10%">Upload Date</td> 
          <td id="dld" width="8%">Format</td> 
         </tr> 
         {% for file in file_query %} 
         <!--Jinja code that can be easily implemented into html code 
         in this case it's a for loop--> 
         <tr> 
          <td id="dld" style="vertical-align: middle; text-align: center "><input type="checkbox" name="filesToDownload" value="{{file.key1}}">&nbsp </td> 
          <!-- checkbox which is to be used to check the files which user wants to download --> 
          <td id="dld"><a href ="/download/{{file.key1}}">{{file.file1}}</td> 
          <!-- Uses key that was captured in the UploadHandler class to be used as a link and filename is used as text on top of the link so user can know what they're downloading --> 
          <td id="dld">{{file.create1}}</td> 
          <!-- Displays date file was created --> 
          <td id="dld">{{file.type1}}</td> 
          <!-- Shows the file type of the uploaded file --> 
         </tr> 
         {% endfor %} 
        </table> 
       </td> 
      </tr> 
      <tr> 
       <td><input type="submit" value="Download File" name="submit"></td> 
      </tr> 
     </table> 
    </form> 

Answer 1

見てみてください。 フォームにid=downloadFileFormを追加し、小さなpuere javascriptコードを追加しました。

<form id="downloadFileForm" action="/download" method="get"> 
    <table id="downloadFile" width="100%"> 
     <tr> 
      <td> 
       <table id="downloadFileDetails"> 
        <tr id="dld"> 
         <td id="dld" width="2%"></td> 
         <td id="dld" width="80%">File Name</td> 
         <td id="dld" width="10%">Upload Date</td> 
         <td id="dld" width="8%">Format</td> 
        </tr> 
        {% for file in file_query %} 
        <!--Jinja code that can be easily implemented into html code 
        in this case it's a for loop--> 
        <tr> 
         <td id="dld" style="vertical-align: middle; text-align: center"><input type="checkbox" name="filesToDownload" value="{{file.key1}}">&nbsp </td> 
         <!-- checkbox which is to be used to check the files which user wants to download --> 
         <td id="dld"><a href="/download/{{file.key1}}">{{file.file1}}</a></td> 
         <!-- Uses key that was captured in the UploadHandler class to be used as a link and filename is used as text on top of the link so user can know what they're downloading --> 
         <td id="dld">{{file.create1}}</td> 
         <!-- Displays date file was created --> 
         <td id="dld">{{file.type1}}</td> 
         <!-- Shows the file type of the uploaded file --> 
        </tr> 
        {% endfor %} 
       </table> 
      </td> 
     </tr> 
     <tr> 
      <td><input type="submit" value="Download File" name="submit"></td> 
     </tr> 
    </table> 
</form> 

<script type="text/javascript"> 
    (function() { 
     var form = document.getElementById("downloadFileForm"); 

     if (form.addEventListener) { 
      form.addEventListener('submit', send, false); 
     } else if (form.attachEvent) { 
      form.attachEvent('onsubmit', send); 
     } 

     function send(event) { 
      event.preventDefault(); 

      var options = document.getElementsByName("filesToDownload"); 
      var checkedFile = ""; 

      if (options) { 
       for (var i = 0; i < options.length; i++) { 
        if (options[i].checked) { 
         checkedFile = options[i].value; 
        } 
       } 
      } 

      location = "/download/" + checkedFile; 
     } 
    })(); 
</script> 

フォームの送信イベントが、javascriptによって傍受され、目的の場所にリダイレクトされます。

jQueryのようなものを使用すると非常に役立ちますが、まだ軽いです。

希望します。

Answer 2

どちらかあなたは

window.location.assign("YOUR LINK") 

を使用して、あなたのページにリダイレクトするためにJavaScriptを使用するか、あなたには、いくつかまたはサーバー側で他の言語を使用するよう、あなたがリダイレクトを取得するサーバーサイドスクリプトを使用することができます。あなたはそれを使用して行うことができます

header("LOCATION:YOUR LINK HERE");