Jquery is not submitting the form with the custom button

1
votes

My requirement is to upload a file from a form upon clicking the custom button by using Jquery stuff.

My form details are below:

<form id="CreateAttachmentForm" method="post"  enctype="multipart/form-data"  action="../../FileUploadServlet" >

My file is defined as below:

<input type="file" id="fileupload1" name="fileupload1" accept="image/*,application/pdf"    "/>

My custom button related code is below:

<contact:contactbutton
        id="printButton"
        style="position:relative; width:90px; top:27px; height:30px; left:160px;"
        textTop="7px"
        defaultButton="false"
        tabindex=""
        accesskey="C"
        onClickEx="createAttachmentRequest();"
        onfocus="if(event.altKey){click();}">
            <u>C</u>reate
</contact:contactbutton>

Whenever the user clicks on the custom button, the form should be submitted.I have registered an onClick event event where the control should reach the function named createAttachmentRequest()

The following is my createAttachmentRequest() function:

function createAttachmentRequest() {
    alert("test ");
    $("#CreateAttachmentForm").submit(function() {

        var formData = new FormData($(this)[0]);

        $.ajax({
            url: 'http://HDDT0214:8080/pqawdTestWebApp/FileUploadServlet',
            type: 'POST',
            data: formData,
            async: false,
            success: function(data) {
                alert(data)
            },
            cache: false,
            contentType: false,
            processData: false
        });

        return false;
    });


}

But the form is not submitted when I click the custom button. I have searched various questions on SO, but no suitable solution found so far.However I could see the alert message printed which confirms that the control is reaching the function createAttachmentRequest().What's wrong with my code?

2
javascriptjqueryforms
I think you are setting the eventlistener for $("#CreateAttachmentForm") when you call $("#CreateAttachmentForm").submit(). You need to do this before the page is loaded. If you want to use the createAttachmentRequest function, you should remove the $("#CreateAttachmentForm").submit(function() part. – Mizzcoollizz

2 Answers

1
votes

The issue is because you're attaching a submit event handler in the function - not actually submitting the form.

It would be best to remove the createAttachmentRequest() function entirely and use unobtrusive JS code to attach the event. To do that, remove the onClickEx attribute from your <contact:contactbutton> element, then use this JS code:

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

    $.ajax({
        url: 'http://HDDT0214:8080/pqawdTestWebApp/FileUploadServlet',
        type: 'POST',
        data: new FormData(this),
        success: function(data) {
          alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });
  });
});

Also note that I removed async: false as it's incredibly bad practice to use it. If you check the console you'll even see warnings about its use.

0
votes

You can do one of the following:

Take the submit event outside the function and remove the function like so:

$("#CreateAttachmentForm").submit(function(e) {
e.preventDefault();
var formData = new FormData($(this)[0]);

$.ajax({
    url: 'http://HDDT0214:8080/pqawdTestWebApp/FileUploadServlet',
    type: 'POST',
    data: formData,
    async: false,
    success: function(data) {
        alert(data)
    },
    cache: false,
    contentType: false,
    processData: false
});
return false;
});

OR

inside the function remove the submit listener like so:

function createAttachmentRequest() {
    alert("test ");
        var formData = new FormData($(this)[0]);

        $.ajax({
            url: 'http://HDDT0214:8080/pqawdTestWebApp/FileUploadServlet',
            type: 'POST',
            data: formData,
            async: false,
            success: function(data) {
                alert(data)
            },
            cache: false,
            contentType: false,
            processData: false
        });

        return false;   

}