How to prevent redirect to new page on form submit

4.2k views Asked by At

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

2

There are 2 answers

1
anand On

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();
            });
         }
2
Manjeet Singh On

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

what I did-

  1. removed action attribute from my form tag
  2. used on click instead of submit
  3. 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