I am developing an ASP.Net MVC application and I have form containing a file upload HTML element and a submit button. When the user first goes to the view, I have javascript code automatically triggering the click event on the file upload HTML element so the user does not have to press the button themselves. This is for convenience and the way I want it to be, but when I trigger the button click automatically it is causing the following issue: I have to press the Submit button twice in order to submit the form. The first press clears the text in the file upload HTML element and the second press submits the form. Can anyone explain why this is happening and how I can get it not to do this?
Note: The form is explicitly set not to use Ajax because I am uploading an image and from my understanding you cannot upload images via Ajax, so I turn that off with data-ajax = "false" in my form HTML attributes. Having this set to false is related to the issue I am having. If I submit via ajax, I only have to press the submit button once. If I do not use ajax, I need to press twice.
Here is essential code showing issue:
@Using Html.BeginForm("Document", "NewDocument", Model, FormMethod.Post, New With {.enctype = "multipart/form-data", .data_ajax = "false", .id="submitimage-form"})
@<input type="file" id="fileInput" name="fileInput" style="visibility:hidden;" />
@<input type="submit" id="accept2" value="Accept" data-mini="true" data-theme="b" data-icon="check"/>
End Using
<script>
// Do once after DOM is loaded for the page
$(document).bind("pageinit", function () {
$("#fileInput").click();
});
</script>
