I want to avoid a file too large error when I clear the screen

Question

• I have a page with a file upload option using

  <input type="file" name="fileUpload" />
  

  and it works fine.

• I also have a Clear button on the screen which calls a method to reset all of the page fields to their default values.

• I use @SkipValidation with the clear() method so you don't get error messages if you clear a page with invalid data.

My problem is:

if I click to upload a file which is too large and then click the Clear button, I get the "File too large" message, because that is generated by the default-stack (at least that is my understanding) and not by my validation code.

I use document.getElementById('commentAction').reset(); in the method but that doesn't help.

How can I reset the page without any error message ?

UDATE Based on the suggestions I received I am using the following jquery.

function clearForm()
{
    $(':input').not(':button, :submit, :reset, :hidden, :checkbox, :radio').val('');
    $(':checkbox, :radio').prop('checked', false);
}

along with the following struts2 for the Clear button

            <s:submit key="button.clear" cssClass="submit" onclick="clearDirtyFlag(); clearForm(); return false"  tabindex="18"/>

It now clears the input fields without leaving the page but I have a list on the page which is generated by the following struts2 code

                <s:iterator value="commentViewList" >
                <div class="row rowaltcolor">
                    <div>
                        <s:url var="commentLink" action="commentAction" method="getCommentDetails">
                            <s:param name="commentId"><s:property value="commentInfo.commentId"/></s:param>
                        </s:url>
                        <div class="col-sm-1 col-xs-12 text-left"><s:a href="%{commentLink}"  tabindex="18"><s:property value="commentTypeCode"/></s:a></div>
                        <div class="col-sm-2 col-xs-12 text-left"><s:property value="commentInfo.name"/></div>  
                        <div class="col-sm-2 col-xs-12 text-left"><s:property value="commentInfo.organization"/></div>  
                </div>
            </s:iterator> 

This list does not get cleared because it isn't a field in the generated html. The list values are hardcoded in the html when I look at the source html. Can I clear the list on the client side or do I need to do that on the server side and re-display the page? Thanks!

Answer 1

For anyone who is googling I thought I should put what solved the problem for me in an answer. Using

function clearForm()
{
     $(':input').not(':button, :submit, :reset, :hidden, :checkbox, :radio').val('');
     $(':checkbox, :radio').prop('checked', false);
}

cleared all of the input fields (including hidden fields) without going to the action. I still used a <s:submit> tag but I used return false to keep the page from being submitted as follows.

<s:submit key="button.clear" cssClass="submit" 
          onclick="clearForm(); clearDirtyFlag(); return false"  tabindex="18" />

For my page that didn't work because I had a list generated by struts on the page I needed to clear so I had to go ahead and call my action and render the page again. So my final submit code was

<s:submit method="reset" key="button.clear" cssClass="submit" 
          onclick="clearForm(); clearDirtyFlag();"  tabindex="18" />