Prevent Browser from Navigating to Action URL on form submission

Question

Hope you all well. This might be a simple problem and a very simply solution too, but I kind of got stuck on this one and not really sure how to get out of it. Hope, if any of you could help. The problem is as follows,

I have a form that consists of 3 inputs, File + 2 Text inputs. The code of the form is as follows,

<form id="image_upload_form" enctype="multipart/form-data" method="POST">
   Select File : <input type="file" id="image_file" /><br>
   Time to Display :<input type="text" id="time_to_display" /><br>
   Sequence No: <input type="text" id="sequence_no" />
</form>

This form appears inside jQuery's dialogbox so when I press the Save button on the dialog box, it submits the values. the code of that is as follows,

$( "#someDivDialogBox" ).dialog({
    autoOpen: false,
    height: 300,
    width: 576,
    modal: true,
    buttons: {
        Save: function() {
             $("#image_upload_form").submit(function(e) {
                  var url = Util.getBaseURL() + "Uploads/Images?sid=" + Math.random();                        
                  $(this).attr("action", url);
             });

             $("#image_upload_form").submit();

        },
        Cancel: function() {
             // Do Something Here

        },
        close: function() {
             $(this).hide();
        }
     }
});

Upon submission, everything works as planned, data gets saved in the database and returns a Success message, however, the browser navigates to the ACTION URL instead of staying where the form is. How can I stop the browser from navigating to the Action URL of the form.

Hope the information is enough, please any help is greatly appreciated. Thanks a lot and awaiting your replies. Thanks in advance.

Regards

Answer 1

try this

Save: function() {
$("#image_upload_form").submit(function(event) {
    event.preventDefault();