CODEWITHSUNDEEP
jqueryforms
rac3b3nn0n
rac3b3nn0n

Reputation: 881

Prevent Browser from Navigating to Action URL on form submission

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

Upvotes: 5

Views: 4090

Answers (3)

Vigs
Vigs

Reputation: 1331

All of the previous answers are correct that you need to utilize event.preventDefault() to prevent the forms 'default' functionality from occurring when you invoke $("#image_upload_form").submit(); in your Save method, however, there still seems to be some confusion in the comments about how to make use of the information they provided.

I believe the confusion here is with how HTML forms work. When an HTML form is 'submitted', it causes the browser to collect the value in the input elements in the form and then execute an HTTP POST request using the values from those inputs in the POST body. This is achieved in browsers by the browser navigating to the action URL on the form. The OP is setting the value on the form by using the below snippet only once the form is submitted.

var url = Util.getBaseURL() + "Uploads/Images?sid=" + Math.random();                        
$(this).attr("action", url);

Traditionally when you have a form on an HTML webpage you would not interfere with the browsers default behavior of performing an HTTP POST request to the action URL, and then on the server, you would process the incoming HTTP POST request, and then return a HTTP 302 Redirect response (back to the page with the form on it, or to some other page/URL), causing the browser to then load the URL it was redirected to after submitting the form.

If the above functionality is not the desired effect, then you will need to add additional logic in your JS code to read the values from each input element within the form, and then execute an XHR (Ajax) request to the server, and handle whichever response you receive back.

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

function submitImageForm(actionUrl, form) {
    var fileToUpload = $(form).find("#image_file").prop("files")[0];
    var timeToDisplay = $(form).find("#time_to_display").val();
    var sequenceNo = $(form).find("#sequence_no").val();

    var data = new FormData();
    data.append("file", fileToUpload);
    data.append("time_to_display", timeToDisplay);
    data.append("sequence_no", sequenceNo);

    return fetch(actionUrl, {
        method: "post",
        body: data
    });
}

$("#someDivDialogBox").dialog({
    autoOpen: false,
    height: 300,
    width: 576,
    modal: true,
    buttons: {
        Save: function () {
            $("#image_upload_form").submit(function (e) {
                e.preventDefault();
                var actionUrl = Util.getBaseURL() + "Uploads/Images?sid=" + Math.random();
                submitImageForm(actionUrl, form).then(function (response) {
                    // work with the response object here
                });
            });
            $("#image_upload_form").submit();
        },
        Cancel: function () {
            // Do Something Here
        },
        close: function () {
            $(this).hide();
        }
    }
});

Upvotes: 1

saman khademi
saman khademi

Reputation: 842

try this

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

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128791

You need to call preventDefault() on the event (e) you've passed into your submit handler:

$("#image_upload_form").submit(function(e) {
    e.preventDefault();
    ...
});

Upvotes: 0

Related Questions