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沒有提交自定義按鈕的表單

回答

相關問題