The ajaxForm plugin saves the redirect to the action page, ignoring the return false;

Question

Hi guys, I have a simple form that is sent when the user clicks the open button in the file view after completing the image selection.

My HTML looks somehow below.

<form id="imgForm" action="action.php" method="post" enctype="multipart/form-data"> <div class="fileUpload btn btn-lg btn-primary"> <span>Choose File</span> <input id="imageToBeUploaded" type="file" class="upload" name="image"/> </div> </form> 

Javascript

 $("body").on('submit', '#imgForm', function(){ $(this).ajaxForm({target:'#uploadStatus'}); console.log("submitting..."); return false; }); /* Uploading Profile BackGround Image */ $('body').on('change','#imageToBeUploaded', function() { //submit the form $("#imgForm").submit(); }); 

My problem is that the form submits but is redirected to the action.php page with the response. I was hoping to stop redirects, but instead return a response to the current page. return false; doesn't seem to work as per the documentation at http://malsup.com/jquery/form/#ajaxSubmit

Any help would be greatly appreciated!

Please note that I need to support IE8 / 9, which means that formData is out of the question!

Thanks.

Answer 1

Just try this javascript / jQuery code and manage your server script.

 $(document).ready(function (e) { /* Uploading Profile BackGround Image */ $('#imageToBeUploaded').on('change', function() { //submit the form $("#imgForm").submit(); alert('Form submitted'); }); $('#imgForm').ajaxForm({ target:'#uploadStatus', beforeSubmit:function(){ alert('File uploading...'); }, success:function(){ alert('File uploaded'); }, }); }); 

Luck ['}

Answer 2

Try running this code:

window.location.href is a property that tells you the current location of the browser URL. Changing the property value will redirect the page.

 $("body").on('submit', '#imgForm', function(){ var a; var b; window.location.href = "../currenturl.htm?parameter1="+a+"&parameter2="+b; or window.location.href = "../currenturl.htm"; //where your browser need to stay(current) url should be mentioned here. }); 

Answer 3

The page you $(this).ajaxSubmit(options); is $(this).ajaxSubmit(options); , not $(this).ajaxForm(options); . Have you tried $(this).ajaxSubmit(options); ? These two are not synonyms. It seems you are mixing your implementations.

In the documentation on how to do this, use ajaxSubmit() :

 $(document).ready(function() { $('#imgForm').on('submit', function(){ $(this).ajaxSubmit({target:'#uploadStatus'}); console.log("submitting..."); return false; }); $('#imageToBeUploaded').on('change', function() { //trigger submit event $("#imgForm").submit(); }); }); 

And ajaxForm() :

 $(document).ready(function() { $('#imgForm').ajaxForm({target:'#uploadStatus'}); $('#imageToBeUploaded').on('change', function() { //trigger submit event $("#imgForm").submit(); }); }); 

You do not want to use delegated events unless you really need to. If the form is loaded after the DOM ready event, then it does not use delegated events.

Answer 4

from: Prevent page reload and redirection in submit ajax / jquery form

 $("body").on('submit', '#imgForm', function(event){ $(this).ajaxForm({target:'#uploadStatus'}); console.log("submitting..."); event.preventDefault(); return false; }); /* Uploading Profile BackGround Image */ $('body').on('change','#imageToBeUploaded', function(event) { //submit the form $("#imgForm").submit(); }); 

Answer 5

 $(document).ready(function (e) { /* Uploading Profile BackGround Image */ $('#imageToBeUploaded').on('change', function() { //submit the form $("#imgForm").submit(); alert('Form submitted'); }); $('#imgForm').ajaxForm({ target:'#uploadStatus', beforeSubmit:function(){ alert('File uploading...'); }, success:function(){ alert('File uploaded'); }, }); }); 

Answer 6

You can try the following:

use $ (this) .closest ("# imgForm"). submit ();

instead: $ ("# imgForm"). submit ();

 $('#imageToBeUploaded').on('change', function() { //submit the form $(this).closest("#imgForm").submit(); $("#imgForm").submit(); }); $('form#imgForm').on('submit',function(e){ e.preventDefault(); $(this).ajaxSubmit({ url: 'upload', uploadProgress: function (event, position, total, percentComplete){ //display status $(".progress-bar").width(percentComplete + '%'); $('.progress-bar').html(percentComplete+'%'); }, success: function(response){ alert('Success'); }, error: function(response, status, e){ alert('Oops something went.'); }, resetForm: true }); }); 

You need this in the script tag < https://code.google.com/p/struts2-jquery/source/browse/trunk/struts2-jquery-plugin/src/main/resources/template/js/plugins/jquery.form .min.js? r = 1645 >

Answer 7

try it

 $(document).ready(function() { $("#imgForm").ajaxForm({ target:'#uploadStatus' }); }); $('body').on('change','#imageToBeUploaded', function() { //submit the form $("#imgForm").submit(); }); 

Answer 8

You should use event.preventDefault (); instead of return false with jQuery

 $("body").on('submit', '#imgForm', function(event){ event.preventDefault(); $(this).ajaxForm({target:'#uploadStatus'}); console.log("submitting..."); return false; }); 

Many people may disagree with me, but returning false usually says that something did not work out, while your ajax submit might work very well, so it can bring mixed results to your original subscriber. In this case, it does not matter, but I will only return false if something really failed or went wrong, or when a boolean value is requested. If the result is empty, I will return null, not false. Just beliefs, I suppose ..

not sure why you have 2 js functions, but you can combine both functions like:

 $(document).ready(function() { /* Uploading Profile BackGround Image */ $('body').on('change','#imageToBeUploaded', function() { //submit the form $('#imgForm').ajaxForm({target:'#uploadStatus'}); console.log("submitting..."); }); });