Avoid multiple clicks to submit a form in IE...Works well in chrome...

Avoid multiple clicks to submit a form in IE...Works well in chrome...

Please find below file code where multiple file upload functionality is given. On click of upload link it opens input file browser window where we select file and then click on submit.

In chrome, submit button submits the form on first click but In IE, it does not submit the form on first click.

In IE, If we select one file using upload link then submit button submits the form in second click.

If we select two file then it submits the form in 3rd click and accordingly.

Please let me know how to stop this event chain to submit in one click.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script type="text/javascript" src="jquery.js"></script>
  5. <meta charset="UTF-8">
  6. <title>Title of the document</title>
  7. </head>

  9. <body>
  10.     <form method="post" action="submitted">
  11.         <table>
  12.             <tr>
  13.                 <td>
  14.                     <input type="file" name="inputFile" />
  15.                     <a class="uploadLink" name="upload" style="cursor: pointer;" onclick="selectInputFile(this)">Upload</a>
  16.                 </td>
  17.             </tr>
  18.             <tr>
  19.                 <td>
  20.                     <input type="file" name="inputFile" />
  21.                     <a class="uploadLink" name="upload" style="cursor: pointer;" onclick="selectInputFile(this)">Upload</a>
  22.                 </td>
  23.             </tr>
  24.             <tr>
  25.                 <td>
  26.                     <input type="file" name="inputFile" />
  27.                     <a class="uploadLink" name="upload" style="cursor: pointer;" onclick="selectInputFile(this)">Upload</a>
  28.                 </td>
  29.             </tr>
  30.             <tr>
  31.                 <td>
  32.                     <input type="file" name="inputFile" />
  33.                     <a class="uploadLink" name="upload" style="cursor: pointer;" onclick="selectInputFile(this)">Upload</a>
  34.                 </td>
  35.             </tr>
  36.             <tr>
  37.                 <td>
  38.                     <input type="file" name="inputFile" />
  39.                     <a class="uploadLink" name="upload" style="cursor: pointer;" onclick="selectInputFile(this)">Upload</a>
  40.                 </td>
  41.             </tr>
  42.             <tr>
  43.                 <td>
  44.                     <input type="submit" value="Submit" />
  45.                 </td>
  46.             </tr>
  47.         </table>
  48.     </form>
  49. </body>

  51. <script type="text/javascript">
  52.     function selectInputFile(uploadLink) {
  53.         $(uploadLink).prev().trigger('click');
  54.     }

  56.     $(document).ready(function(){
  57.         $("form").on("submit", function(e){
  58.             e.stopPropagation();
  59.         });
  60.     });
  61. </script>

  63. </html>