How to prevent redirect to new page on form submit

Question

I am trying to upload a form containing multiple files to my server, request is going to correct Action and I am also getting some data but all the files are coming with null values.

var file = function(){
this.submitForm = function () {     
  $("#addBrtForm").ajaxSubmit(function (response) {
    if (response === "Barter Uploaded Successfully") {
      alert(response);
      $.mobile.changePage("#p-afterUpload");
      t.somefunction();
    } else {
      alert("Try Again!! Barter Not Uploaded");
    }
});
};
};
hm.files = new file();

//other thing that I tried
 $(function(){
 
  $('#addBrtForm').ajaxForm({
        type: 'POST',
        beforeSubmit: function () {
            return false;
        },
        success: function (response) {
            return false;
            if (response === "Barter Uploaded Successfully") {
              
                alert(response);
                $.mobile.changePage("#p-barter");
                t.setBarterpageTitle('My Barter');
            } else {
                alert("Try Again!! Barter Not Uploaded");
            }           
        }
    });
 });

 <form method="post" action="http://localhost:xxxx/Mobile/Home/FileUpload" enctype="multipart/form-data" data-ajax="false" id="addBrtForm" name="addBrtForm" >
  <input type="text" name="Title" data-role="none"  />
   <input type="text" name="Description" data-role="none" />
   <input type="file" name="files" data-role="none" multiple />
   <input type="file" name="files" data-role="none" multiple />
   <input type="file" name="files" data-role="none" multiple />
   <input type="file" name="files" data-role="none" multiple />
   <input type="file" name="files" data-role="none" multiple />
   <input type="Submit" name="" value="submit" data-role="none" multiple />
   <input type="Button" name="" value="submit" data-role="none" multiple onclick="hm.files.submitForm()"/>
   </form>

It is working perfectly without "ajaxSubmit" but page is redirecting to "http://localhost:xxxx/Mobile/Home/FileUpload", I don't want that page to come up, I just wanted to catch my response and do something based on that

My controller

  public ActionResult FileUpload(FormCollection fc, List<HttpPostedFileBase> files)
    {
      //some functionilty to save data working perfectely 

        return Json(SuccesMessage, JsonRequestBehavior.AllowGet);
    }

*Note - as I am using jquery mobile so there is no views in my project

What plugin are you using? Does it support uploading files? Refer also [this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) — , Feb 08 '16 at 10:01
http://malsup.com/jquery/form/#faq - i used this plugin and it supports file upload., checking link provided by you, will update after checking that — Manjeet Singh, Feb 08 '16 at 10:07
Not familiar with the plugin, but do you need to cancel the default submit action (i.e add `return false;` as the last line in the script)? — , Feb 08 '16 at 10:10
I tried adding return false inside success & beforeSubmit but its still redirecting to a new page — Manjeet Singh, Feb 08 '16 at 10:15
Stephen Muecke l followed the steps given in [link provided by you](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681), and it is working perfectly — Manjeet Singh, Feb 08 '16 at 11:08

score 1 · Answer 1 · edited May 23 '17 at 12:30

thanks to accepted answer on this post and Stephen Muecke for suggesting me to look on that question.

what I did-

removed action attribute from my form tag
used on click instead of submit
used ajax to post data as given in the reference link.

My edited js is shown below

 var formdata = new FormData($('#addBrtForm').get(0));
            $.ajax({
                url: "http://localhost:xxxx/Mobile/Home/FileUpload",
                type: 'POST',
                data: formdata,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function (response) {
                    if (response === "File Uploaded Successfully") {
                        alert(response);
                        $.mobile.changePage("#p-afterUpload");
                        t.someFunction();
                    } else {
                        alert("Try Again!! File Not Uploaded");
                    }
                },
                error: function (e) {
                    alert("Network error has occurred please try again!");
                }
            });

changed controller action to this -

 public ActionResult FileUpload(UploadModel fm, List<HttpPostedFileBase> files)
{
  //some functionilty to save data working perfectely 

    return Json(SuccesMessage, JsonRequestBehavior.AllowGet);
}

- UploadModel is my model having same Name as I used in my form

what if you're using SendGrid, which is not supported by AJAX apparently? — Luv Tomar, Dec 29 '19 at 23:11
@LuvTomar not sure, haven't worked with Ajax in last 4 years — Manjeet Singh, Jan 03 '20 at 17:15

anand · Answer 2 · 2016-02-08T10:09:26.600

-1

Add id to the submit button.

<input type="Button" name="" id="submit" value="submit" data-role="none" multiple/>

Then in the javascript do like this

         $(function(){
            $('#submit').click(function(e){
                Do Your stuf here
                e.preventDefault();
            });
         }

edited Feb 08 '16 at 10:09

answered Feb 08 '16 at 09:55

anand

1,559
5
21
45

I already added url in action parameter of form tag(is that not sufficient) – Manjeet Singh Feb 08 '16 at 10:01

How to prevent redirect to new page on form submit

2 Answers2