Cannot use javascript to submit() seam form

Hi I have a seam form that we use to upload an attachment to our java code. Everything was working fine until we needed to display a jquery dialog to give the user some visual feedback that the upload was taking place.

To do this we intercept the onsubmit event via javascript, put up the jquery dialog then a second later submit the form via document.forms[...].submit().

Everything looks like it is working, the message appears, a second later we see the browser is transferring data to the server, but seam does not invoke the action of the form. The page simply refreshes and nothing happens.

If I remove the javascript submit() and let the form get submitted in the normal submit button click seam processes the action on the server normally.

My seam form:

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

My javascript function that handles the form onsubmit event:

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
}

Further research shows that the "normal" post includes the conversationId appended to the referer in the headers but the javascript initiated post does not.

Normal post headers:

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 initiated post headers

POST /connectweb/upload.seam HTTP/1.1
开发者_StackOverflow中文版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

...

The html for the form as generated by seam:

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

---

When I have encountered problems before with Seam forms it is because the button itself is processed by Seam. When you click on the button (or hit enter in the form, which acts like a click on the button), you should see an additional parameter in the posted form data for the button.* In your case it would look like:

j_id14:j_id26:Upload

If you submit the form using JavaScript, that parameter is not included in the form post. Without it, Seam doesn't know what button was clicked and thus what action to invoke.

*This data is visible in Firebug/Developer tools below the headers that you posted.

---

Try this:

$(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">