Jquery没有提交自定义按钮的表单

我的需求是通过使用Jquery的东西点击自定义按钮来从表单上传文件。Jquery没有提交自定义按钮的表单

我的形式，细节如下：

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

我的文件定义如下：

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

我的自定义按钮相关的代码如下：

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

每当用户点击在自定义按钮上，表单应该被提交。我已经注册了一个onClick事件事件OL应达到名为createAttachmentRequest()

功能以下是我的createAttachmentRequest()功能：

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; 
    }); 


}

但是当我点击自定义按钮的形式没有提交。我已经搜索了关于SO的各种问题，但迄今尚未找到合适的解决方案。但是，我可以看到打印的警报消息，确认控件正在达到功能createAttachmentRequest()。我的代码出了什么问题？

来源

2017-04-07 Ashok.N

我想你在调用$（“＃CreateAttachmentForm”）。submit（）时，设置$（“＃CreateAttachmentForm”）的eventlistener。您需要在加载页面之前执行此操作。如果你想使用createAttachmentRequest函数，你应该删除$（“＃CreateAttachmentForm”）。submit（function（）部分。 – Mizzcoollizz

问题是因为您在函数中附加提交事件处理程序 - 实际上并未提交表单。

最好完全删除createAttachmentRequest()函数，并使用不显眼的JS代码来附加事件。要做到这一点，从您<contact:contactbutton>元素删除onClickEx属性，然后使用这个JS代码：

$(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 
    }); 
    }); 
});

另外请注意，我删除async: false，因为它是非常糟糕的做法是使用它。如果您检查控制台，您甚至会看到有关其使用的警告。

来源

2017-04-07 07:42:27

感谢你的回应，我只是感到困惑，如果我从'<联系人中删除'onClickEx'属性：contactbutton>'元素，然后点击事件是如何被注册的？请详细说明一下吗？ –

点击提交按钮将在表单上提交'submit'事件，这是通过jQuery'$（“＃CreateAttachmentForm” ）.submit（fn）'事件处理程序 –

我忘了在我的问题中提到一件事，我的'submit'按钮是隐藏字段，用户只能点击自定义按钮，然后提交表单。所以用户没有办法可以直接点击提交按钮。 –

您可以执行下列操作之一：

采取像这样的功能之外提交事件和删除功能：

$("#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; 
});

在函数内部取出提交听众如此：

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; 

}

来源

2017-04-07 07:44:55

Jquery没有提交自定义按钮的表单

回答

相关问题