Prevent MVC form submit using Javascript Function

Question

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>

Rajeshkumar Kandhasamy · Accepted Answer · 2014-06-26 06:23:29Z

4

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.?

edited Jun 26, 2014 at 6:23

answered May 21, 2013 at 14:36

Rajeshkumar Kandhasamy

6,4997 gold badges61 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kashyap Vyas Over a year ago

simply gr8 !! it solved my problem ,,,thanks dude (remove onclick from input type button and add in onsubmit of @Html.BeginForm)

Rajeshkumar Kandhasamy Over a year ago

Glad to hear its helped... Its correct i explained that as Its my earlier code. :) Thanks dude., :)

Rajeshkumar Kandhasamy Over a year ago

@NimitJoshi You are welcome. Glad this answer helped :)

Ben McCormick · Accepted Answer · 2013-05-21 14:38:35Z

1

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();

edited May 21, 2013 at 14:38

answered May 21, 2013 at 14:23

Ben McCormick

25.8k12 gold badges56 silver badges71 bronze badges

8 Comments

Rajeshkumar Kandhasamy Over a year ago

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.

Ian Over a year ago

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.

Rajeshkumar Kandhasamy Over a year ago

@lan Please see my above comment

Ben McCormick Over a year ago

@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.

Rajeshkumar Kandhasamy Over a year ago

@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.

|

Collectives™ on Stack Overflow

Prevent MVC form submit using Javascript Function

2 Answers 2

3 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related