current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 0 down vote favorite

I have a upload.ascx in my project. It will be loaded inside Jquery Popup.

The upload.ascx contains File Upload control. The File upload control will uploads .xlsx and .xls files. I have added Java script function to do this validation (To prevent unnecessary files uploaded).

Onchange of FileUpload control and Onclick of Submit button the same Validation function will be called.

The File Upload Validation Function is working for both calling. If the user clicks submit button the same function is getting called and working fine.

My Problem is: In My validation function i have written return false. After displaying the alert Message, the Page is getting redirected to some URL (localhost/Admin/Authorization/AcceptFile.aspx). AcceptFile is my ActionResult name. It should not happen. The Function is returning False. But the Form is getting redirected to Above URL why.?

I have kept debugger in my Action Result that is not getting called if its wrong File(Its correct). If its correct File the Index file will be loaded with Success message(Action result is getting called and working Fine). .

I suspect MVC Form. If wrong file is uploaded the redirection is happening with out calling Action Result this should be stopped.

<% using (Html.BeginForm("AcceptFile", "Authorization", FormMethod.Post, new { enctype = "multipart/form-data" }))
       {%>

My Javascript Function:

function checkfile(sender) {
        var validExts = new Array(".xlsx", ".xls");
        var fileExt = sender.value;
        var strValue = false;
        fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
        if (validExts.indexOf(fileExt) < 0) {
            ShowMessage(-1, "Invalid file selected, valid files are .xlsx and .xls types.");
            strValue = false;
        }
        else {
            strValue = true;
        }
        return strValue;
    }

My upload.ascx Code:

<div>
    <% using (Html.BeginForm("AcceptFile", "Authorization", FormMethod.Post, new { enctype = "multipart/form-data" }))
       {%>

          <input type="file" id="fileAuthorization" name="fileAuthorization" onchange="checkfile(this);" />

          <input type="submit" id="btnSave" name="btnSave" value="Upload" onclick="javascript:return checkfile(document.getElementById('fileAuthorization'))" />

    <%} %>
</div>
share|improve this question

2 Answers 2

up vote 2 down vote accepted

My Self i found the Problem.

Yes My suspect is correct. The Problem is

onsubmit = "javascript:return checkfile(document.getElementById('fileAuthorization'))"

this should be called Like this in Form tag itself:

 <% using (Html.BeginForm("AcceptFile", "Authorization", FormMethod.Post, new { enctype = "multipart/form-data", onsubmit = "javascript:return checkfile(document.getElementById('fileAuthorization'))" }))
       {%>

But Earlier it was called Submit button Onclick

<input type="submit" id="btnSave" name="btnSave" value="Upload" onclick="javascript:return checkfile(document.getElementById('fileAuthorization'))" />

I have corrected and its getting worked(Validations and File Upload For Submit button Onclick and File Upload control onchange).

But My question is why the return false is not working on submit button click? But its working for Fileupload onchange events.

why the redirection was happened.? after changing the same Line to MVC Form its getting worked (redirection is not happening now) why.?

share|improve this answer
    
simply gr8 !! it solved my problem ,,,thanks dude (remove onclick from input type button and add in onsubmit of @Html.BeginForm) –  Kashyap Vyas Nov 17 '14 at 7:32
    
Glad to hear its helped... Its correct i explained that as Its my earlier code. :) Thanks dude., :) –  RJK Nov 17 '14 at 8:32
up vote 0 down vote

Change your submit to this:

<button type="button" id="btnSave" name="btnSave" onclick="checkfile(document.getElementById('fileAuthorization'))" ></button>

And it won't submit the form automatically

When you're ready to submit the form you can do so with javascript in your callback function: 

document.getElementById('form-id').submit();
share|improve this answer
    
yes i have tried this if i change Submit Button to Button Entire Form Submit will not happen. In my Action Result i will get file properties as null.Because In MVC My action result i'm using like this HttpPostedFileBase file = Request.Files["fileAuthorization"]; The MVC Form Submition is necessary for this Upload get it work. –  RJK May 21 '13 at 14:28
    
Why do you have javascript: in the onclick attribute? And it's probably better/easier to handle the form's submit event instead of just the button's. And it's probably better to handle events with JavaScript instead of inline HTML. –  Ian May 21 '13 at 14:28
    
@lan Please see my above comment –  RJK May 21 '13 at 14:31
    
@RJK You can just do the submit from within your js function if the validation is true. See my updated answer. Ian, I was just copying and pasting what he had. Obviously its better to bind it with js to begin with rather than sticking it in markup, but I was focused on his specific question. –  Ben McCormick May 21 '13 at 14:40
    
@ben336 if i use Jquery Submit. HttpPostedFileBase will not get the file from the front end (Web Page). It needs the MVC Form Submition. Then only the posted file will be uploaded through the HttpPostedFileBase. –  RJK May 21 '13 at 14:46

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.