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.
- <!DOCTYPE html>
- <html>
- <head>
- <script
type="text/javascript" src="jquery.js"></script>
- <meta charset="UTF-8">
- <title>Title
of the document</title>
- </head>
-
-
<body>
-
<form method="post" action="submitted">
-
<table>
-
<tr>
-
<td>
-
<input type="file"
name="inputFile" />
-
<a class="uploadLink"
name="upload" style="cursor: pointer;" onclick="selectInputFile(this)">Upload</a>
-
</td>
-
</tr>
-
<tr>
-
<td>
-
<input type="file"
name="inputFile" />
-
<a class="uploadLink"
name="upload" style="cursor: pointer;" onclick="selectInputFile(this)">Upload</a>
-
</td>
-
</tr>
-
<tr>
-
<td>
-
<input type="file"
name="inputFile" />
-
<a class="uploadLink"
name="upload" style="cursor: pointer;" onclick="selectInputFile(this)">Upload</a>
-
</td>
-
</tr>
-
<tr>
-
<td>
-
<input type="file"
name="inputFile" />
-
<a class="uploadLink"
name="upload" style="cursor: pointer;" onclick="selectInputFile(this)">Upload</a>
-
</td>
-
</tr>
-
<tr>
-
<td>
-
<input type="file"
name="inputFile" />
-
<a class="uploadLink"
name="upload" style="cursor: pointer;" onclick="selectInputFile(this)">Upload</a>
-
</td>
-
</tr>
-
<tr>
-
<td>
-
<input type="submit"
value="Submit" />
-
</td>
-
</tr>
-
</table>
-
</form>
-
</body>
-
-
<script type="text/javascript">
-
function selectInputFile(uploadLink) {
-
$(uploadLink).prev().trigger('click');
-
}
-
-
$(document).ready(function(){
-
$("form").on("submit", function(e){
-
e.stopPropagation();
-
});
-
});
-
</script>
-
-
</html>