1
  • 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!

ponder275
  • 903
  • 2
  • 12
  • 33
  • It's not clear to me why you need to call a server-side action method to clear HTML data. Can you explain ? – Andrea Ligios Nov 11 '15 at 09:19
  • 1
    Why not to call that action which displays this form in the first place? – Aleksandr M Nov 11 '15 at 10:21
  • @AndreaLigios I am a new programmer and know how to write Java and am getting better at Struts (with help from this site) but have no experience in writing Java Script so my first thought was to solve the problem with an action class method. We are already using jQuery but I didn't realize I could use it to clear my page. I will give it a try. – ponder275 Nov 12 '15 at 14:24
  • @AleksandrM If I understand your comment correctly that is what I am doing. The Clear button is one of several buttons I have on the form and each button has its own method attached to it. I have one action Class which is called when any of the buttons are clicked, the method associated with the button executes and then Struts passes the results to the display page. – ponder275 Nov 12 '15 at 14:30
  • Your clear button is submit, you are submitting the form. How do you get to this page in the first place? Why not to call this action again? – Aleksandr M Nov 13 '15 at 08:56
  • @AleksandrM I am calling the action again. All of the buttons on the page use the same action which got me to the page in the first place. My original procedure when the Clear button was clicked was to skip validation, go to the action and execute a method which set all of page values (including hidden values) to their default value. It worked fine on my other pages and worked on this page except if you tried to load a file which was too large and then hit clear the error message for the file being too large was generated before the action was called. – ponder275 Nov 13 '15 at 14:06
  • @AleksandrM Based on the advice I received here I found some jQuery code which cleared all of the fields without leaving the page (the return = false keeps the page from being submitted). But that doesn't get rid of the lists which are generated when you do a search. So I have combined the two methods (jQuery function and submit to the action) and everything works great. Thanks for the help! – ponder275 Nov 13 '15 at 14:09

1 Answers1

0

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" />
Aleksandr M
  • 24,264
  • 12
  • 69
  • 143
ponder275
  • 903
  • 2
  • 12
  • 33