Manjeet Singh February 2016

How to prevent redirect to new page on form submit

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" na        

Answers


anand February 2016

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


Manjeet Singh February 2016

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

Post Status

Asked in February 2016
Viewed 2,953 times
Voted 4
Answered 2 times

Search




Leave an answer