无法使用 javascript 提交（）接缝表单

Question

您好，我有一个接缝表单，用于将附件上传到我们的 Java 代码。一切正常，直到我们需要显示一个 jquery 对话框以向用户提供一些上传正在进行的视觉反馈。

为此，我们通过 javascript 拦截 onsubmit 事件，打开 jquery 对话框，然后稍后通过 document.forms[...].submit() 提交表单。

一切看起来都在工作，消息出现，一秒钟后我们看到浏览器正在向服务器传输数据，但 seam 没有调用表单的操作。页面只是刷新，没有任何反应。

如果我删除了 javascript submit() 并让表单在正常的提交按钮中提交，点击缝会正常处理服务器上的操作。

我的接缝形式：

<h:form onsubmit="return ClickSuperUtil.submitForm();" enctype="multipart/form-data">
    <s:validateAll>
        <h:panelGrid columns="2">
            <h:outputText rendered="false" value="#{messages['document_type']}:" />
            <h:selectOneMenu rendered="false" value="#{document.documentType}" required="true">
                <f:selectItem itemLabel="#{messages['dt_rollover']}" itemValue="ROLLOVER" />
                <f:selectItem itemLabel="#{messages['dt_sg_contribution']}" itemValue="SG_CONTRIBUTION" />
            </h:selectOneMenu>
            <h:outputText value="#{messages['document_format']}:" />

            <h:selectOneMenu value="#{document.documentFormat}" required="true">
                <s:selectItems value="#{uploadHistoryManager.contributionFormatList}" var="contributionFormat" label="#{contributionFormat}" noSelectionLabel="Please Select..."/>
            </h:selectOneMenu>
            <h:outputText value="#{messages['upload_document']}:" />
            <s:fileUpload data="#{document.uploadedDocument}"
                            fileName="#{document.documentName}" fileSize="#{document.documentSize}"
                             />
        </h:panelGrid>
    </s:validateAll>
    <h:commandButton  styleClass="menubutton" value="#{messages['upload']}" action="#{uploader.upload}">
        <f:param name="fileUploaded" value="fileUploaded" />
        <s:conversationId/>
    </h:commandButton>
</h:form>    

我处理表单 onsubmit 事件的 javascript 函数：

ClickSuperUtil.submitForm=function()
{
    if(this.messageDisplayed == null)
    {
        this.showPleaseWaitDialog();
        this.messageDisplayed = true
        setTimeout("document.getElementById('uploadPanel').getElementsByTagName('form')[0].submit()",1000)
        return false
    }
    this.messageDisplayed = null
    return true
}

进一步的研究表明，“正常”帖子包括在标题中附加到引用者的 conversationId，但 javascript 发起的帖子没有。

普通帖子标题：

POST /connectweb/upload.seam HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.2.6)  
Gecko/20100625 Firefox/3.6.6 GTB7.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Referer: http://localhost:8080/connectweb/upload.seam?conversationId=73
Cookie: JSESSIONID=309AA62DD4929392DD9561389F5A36BA

...

Javascript 发起的帖子标题

POST /connectweb/upload.seam HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.2.6)  
Gecko/20100625 Firefox/3.6.6 GTB7.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Referer: http://localhost:8080/connectweb/upload.seam
Cookie: JSESSIONID=309AA62DD4929392DD9561389F5A36BA

...

seam 生成的表单的 html：

<form onsubmit="return ClickSuperUtil.submitForm();" enctype="multipart/form-data" action="/connectweb/upload.seam" method="post" name="j_id14" id="j_id14">
<input type="hidden" value="j_id14" name="j_id14">
<table>
<tbody>
<tr>
<td>Document Format:</td>
<td><select size="1" name="j_id14:j_id22">  
<option value="org.jboss.seam.ui.NoSelectionConverter.noSelectionValue">Please Select...</option>
<option value="CUSCAL">CUSCAL</option>
<option value="ORACLE">ORACLE</option>
<option selected="selected" value="ROCKFAST">ROCKFAST</option>
</select></td>
</tr>
<tr>
<td>Upload Document:</td>
<td><input type="file" name="j_id14:j_id25" id="j_id14:j_id25"></td>
</tr>
</tbody>
</table>
<input type="submit" class="menubutton" value="Upload" name="j_id14:j_id26"><input type="hidden" autocomplete="off" value="H4sIAAAAAA ... /B7CYBAA==" id="javax.faces.ViewState" name="javax.faces.ViewState">
</form>

Answer 1

当我之前遇到过Seam 表单的问题时，这是因为按钮本身是由Seam 处理的。当您单击按钮（或在表单中按 Enter，其作用类似于单击按钮）时，您应该会在按钮的已发布表单数据中看到一个附加参数。* 在您的情况下，它看起来像：

j_id14:j_id26:Upload

如果您使用 JavaScript 提交表单，则该参数不会包含在表单发布中。没有它，Seam 不知道点击了哪个按钮，也不知道要调用什么动作。

*此数据在您发布的标题下方的 Firebug/Developer 工具中可见。

Answer 2

试试这个：

$(document).ready(function(){
  $('#uploadForm').submit(function() {
     //Show some throbber and ensure ClickSuperUtil.submitForm() returns true
     return ClickSuperUtil.submitForm();
  });
});

<h:form id="uploadForm" preprendId="false" enctype="multipart/form-data">