javascript - Jquery is not submitting the form with the custom button -

my requirement upload file form upon clicking custom button using jquery stuff.

my form details below:

<form id="createattachmentform" method="post"  enctype="multipart/form-data"  action="../../fileuploadservlet" > 

my file defined below:

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

my custom button related code 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 user clicks on custom button, form should submitted.i have registered onclick event event control should reach function named createattachmentrequest()

the following 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 form not submitted when click custom button. have searched various questions on so, no suitable solution found far.however see alert message printed confirms control reaching function createattachmentrequest().what's wrong code?

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

it best remove createattachmentrequest() function entirely , use unobtrusive js code attach event. that, remove onclickex attribute <contact:contactbutton> element, use 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 removed async: false it's incredibly bad practice use it. if check console you'll see warnings use.