Clear Form field on submit

Message Boards

Prateeksha Mandloi, modified 9 Years ago.

Clear Form field on submit

Regular Member Posts: 112 Join Date: 2/5/14 Recent Posts

Hey all,

I have created a AUI:form on submit of which all the values of form fields get saved in database. I am also adding some fields dynamically, whose values also gets saved in DB.

But my form fields retain those values and does not clear up on submit.

What I want is, bring my form to its initial state on submit , i.e., onSubmit of form :
1) All fields gets blank, and
2) All dynamically added fields must get cleared up., .i.e., 2 is the default number of fields I want, so all 3rd,4th...so on fields must get deleted on form submit.

Can anyone help me. Its really urgent.

Thanks in advance emoticon

Suraj Bihari, modified 9 Years ago.

RE: Clear Form field on submit

Junior Member Posts: 44 Join Date: 12/20/13 Recent Posts

Hi Prateeksha,

Instead of submitting the form on click, you could call a function which submits the form AND clears the fields.

Or you can clear them when rendering the jsp.

HTH!
Kind regards,
Suraj

Prateeksha Mandloi, modified 9 Years ago.

RE: Clear Form field on submit

Regular Member Posts: 112 Join Date: 2/5/14 Recent Posts

Hey Suraj,

Thanks for reply.

Yes, I have called function which submits the form like this:

function <portlet:namespace />saveQuestion() {
submitForm(document.<portlet:namespace />fm);
}

But I am not sure how to clear fields. I have tried reset() and this.form.reset() functions, but nothing works.

Can you suggest any way ??

Suraj Bihari, modified 9 Years ago.

RE: Clear Form field on submit

Junior Member Posts: 44 Join Date: 12/20/13 Recent Posts

Hi Prateeksha, another option is clearing the input fields when rendering the form, i.e. polulating them with empty strings.

<aui:input label="my-label" name="field1" type="text" value="" />

HTH!
Kind regards,
Suraj

Prateeksha Mandloi, modified 9 Years ago.

RE: Clear Form field on submit

Regular Member Posts: 112 Join Date: 2/5/14 Recent Posts

Hi suraj,

I am not getting how to achieve this emoticon

Can you help, how to populate form on render.

I did this: (But its ofcourse not working)

<portlet:renderURL var="saveQuestion">
<portlet:param name="title" value="" />
</portlet:renderURL>

Wherein "title" is the field I want to empty.

Suraj Bihari, modified 9 Years ago.

RE: Clear Form field on submit

Junior Member Posts: 44 Join Date: 12/20/13 Recent Posts

Prateeksha Mandloi:

Wherein "title" is the field I want to empty.

Your should add

value=""

to your input field.

Can your please post your JSP?

Prateeksha Mandloi, modified 9 Years ago.

RE: Clear Form field on submit

Regular Member Posts: 112 Join Date: 2/5/14 Recent Posts

hey suraj,

Here is my jsp. I am making a replica of Polls portlet of Liferay.


&lt;%@page import="com.sun.xml.internal.txw2.output.DataWriter"%&gt;
&lt;%@page import="java.sql.Date"%&gt;
&lt;%@ include file="myinit.jsp" %&gt;

&lt;%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %&gt;

<portlet:defineobjects />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

&lt;%
String CMD = "cmd";
String ADD="add";
String UPDATE="update";

PortletURL redirect = liferayPortletResponse.createRenderURL();

int quesCount = PollsQuestion_CustomLocalServiceUtil.getPollsQuestion_CustomsCount(); 

long questionId;

if(portletSession.getAttribute("questionId")==null) {
	questionId=0;
} else {
	questionId=Long.parseLong(portletSession.getAttribute("questionId").toString());
}
String referringPortletResource = ParamUtil.getString(request, "referringPortletResource");

PollsQuestion_Custom question1;
if(questionId==0){
	question1=null;
}else {
	question1=PollsQuestion_CustomLocalServiceUtil.getPollsQuestion_Custom(questionId);
}
boolean neverExpire = ParamUtil.getBoolean(request, "neverExpire", true);

if (question1 != null) {
	neverExpire = false;
}

List<pollschoice_custom> choices = new ArrayList<pollschoice_custom>();

int oldChoicesCount = 0;

if (question1 != null) {

	choices = PollsChoice_CustomLocalServiceUtil.getChoicesFromQuestion(questionId);
	oldChoicesCount = choices.size();
}

//int choicesCount = ParamUtil.getInteger(request, "choicesCount", choices.size());
int choicesCount = 0;
if(portletSession.getAttribute("choiceCount")==null) {
	choicesCount = 0;
} else {
	choicesCount = Integer.parseInt(portletSession.getAttribute("choiceCount").toString());
}

if (choicesCount &lt; 2) {
	choicesCount = 2;
}

int choiceName = ParamUtil.getInteger(request, "choiceName");

boolean deleteChoice = false;

if (choiceName &gt; 0) {
	deleteChoice = true;
}
String title = "";
java.util.Date expDate=null;
String questionDescription = "";
if(question1!=null) {
	title = question1.getTitle();
	expDate=question1.getExpirationDate();
	questionDescription = question1.getDescription();
}
%&gt;

<portlet:actionurl name="editchoice" var="editchoice" />
<portlet:actionurl name="deleteChoice" var="deleteChoiceURL" />

 <aui:form method="post" action="<%=editchoice.toString()%>" name="fm" id="fm">

	<aui:input name="redirect" type="hidden" value="<%= redirect.toString() %>" />
	<aui:input name="referringPortletResource" type="hidden" value="<%= referringPortletResource %>" />
	<aui:input name="questionId" type="hidden" value="<%= questionId %>" />
	<aui:input name="choicesCount" id="choicesCount" type="hidden" value="<%= choicesCount %>" />
	<aui:input name="choiceName" id="choiceName" type="hidden" value="" />
	<aui:input name="cmd" type="hidden" value="" />

	<liferay-ui:header backURL="<%= redirect.toString() %>" localizeTitle="<%= (question1 == null) %>" title="New Question" />
	<liferay-ui:error exception="<%= QuestionChoiceException.class %>" message="please-enter-valid-choices" />
	<liferay-ui:error exception="<%= QuestionDescriptionException.class %>" message="please-enter-a-valid-description" />
	<liferay-ui:error exception="<%= QuestionExpirationDateException.class %>" message="please-enter-a-valid-expiration-date" />
	<liferay-ui:error exception="<%= QuestionTitleException.class%>" message="please-enter-a-valid-title" />
	
	<aui:model-context bean="<%= question1 %>" model="<%= PollsQuestion_Custom.class %>" />
	
<aui:fieldset>
      <aui:column>
        <aui:input type="text" name="title" id="title" label="Title:" value="<%= title %>">
        </aui:input>
          <br>          
          <aui:input type="textarea" rows="5" cols="30" name="pollsquestion" label="Question(Required):" class="aui-field-required" placeholder="Type your question here..." value="<%= questionDescription %>"></aui:input>
          <br>
        	 <aui:input dateTogglerCheckboxLabel="never-expire" disabled="<%= neverExpire %>" name="expirationDate" />
        	 <br>
        <aui:field-wrapper label="choices">

			&lt;%
			String CHOICE_DESCRIPTION_PREFIX = "choiceDescription";
		
			String CHOICE_NAME_PREFIX = "choiceName";

			String PERIOD = ".";
			
			for (int i = 1; i &lt;= choicesCount; i++) {
				char c = (char)(96 + i);

				PollsChoice_Custom choice = null;

				String paramName = null;

				if (deleteChoice &amp;&amp; (i &gt;= choiceName)) {					
					 paramName = CHOICE_DESCRIPTION_PREFIX + ((char)(96 + i + 1)); 
				}
				else {					
				 	paramName = CHOICE_DESCRIPTION_PREFIX + c;
				}

				if ((question1 != null) &amp;&amp; ((i - 1) &lt; choices.size())) {
					choice = choices.get(i-1);
				}
				
			%&gt;

				<div class="choice <%= (i == choicesCount)  %>" id="addinput">
					<aui:model-context bean="<%= choice %>" model="<%= PollsChoice_Custom.class %>" />

		<aui:input name="<%= CHOICE_NAME_PREFIX + c %>" type="hidden" value="<%= c %>" />
		<aui:input fieldParam="<%= paramName %>" label="<%= c + PERIOD %>" name="description" />
								
					&lt;%if((((question1 == null) &amp;&amp; (choicesCount &gt; 2)) || (question1 != null )) &amp;&amp; (i == choicesCount) &amp;&amp; (choicesCount &gt; 2)) { %&gt;
						<aui:button cssClass="btn-delete" onClick="<%= renderResponse.getNamespace() + &quot;deletePollChoice(&quot; + i + &quot;);&quot; %>" value="delete" />
					&lt;%} %&gt;					
				</div>
			&lt;%
				}
			%&gt;
			<aui:button-row>
				<aui:button cssClass="add-choice" id="addChoice" value="add-choice" onClick="<%= renderResponse.getNamespace() + &quot;addChoice();&quot; %>" />
			</aui:button-row>
			
		</aui:field-wrapper>               
         <c:if test="<%= question1 == null %>">
			<aui:field-wrapper label="permissions">
				<liferay-ui:input-permissions modelName="<%= PollsQuestion_Custom.class.getName() %>" />
			</aui:field-wrapper>
		</c:if>
 	 </aui:column>
       <br>
       <liferay-ui:success key="success" message="Question saved successfully!" />
       <aui:button-row>
			[color=#212b84]<aui:button type="submit" />[/color]
		
			<aui:button href="<%= redirect.toString() %>" type="cancel" />
		</aui:button-row>
 </aui:fieldset>
</aui:form> 

<div class="listofallQuestion">

<aui:form method="post" name="fmSearch">

<liferay-ui:search-container emptyresultsmessage="empty-list" headernames="question,title,num-of-votes,last-vote-date,expiration-date" delta="5" deltaconfigurable="true" total="<%=PollsQuestion_CustomLocalServiceUtil.getPollsQuestion_CustomsCount()%>"> 
<liferay-ui:search-container-results results="<%=PollsQuestion_CustomLocalServiceUtil.getPollsQuestion_Customs(searchContainer.getStart(), searchContainer.getEnd())%>" />

     <liferay-ui:search-container-row classname="com.liferay.polls.model.PollsQuestion_Custom" keyproperty="questionId" modelvar="question">
         <liferay-ui:search-container-column-text name="Title" property="title" />
        <liferay-ui:search-container-column-text name="question" property="description" />
        <liferay-ui:search-container-column-text name="Expiration Date" property="expirationDate" />
       
              
  </liferay-ui:search-container-row>
  
   <liferay-ui:search-iterator searchContainer="<%=searchContainer %>" />

</liferay-ui:search-container>

</aui:form>

</div>
<script type="text/javascript">	
	
	function <%=renderResponse.getNamespace()%>addChoice(){
		var namespace='<portlet:namespace/>';
		document.getElementById(namespace+'choicesCount').value = '<%= choicesCount + 1 %>';
		document.getElementById(namespace+'fm').action='<%=editchoice.toString()%>';
		document.getElementById(namespace+'fm').submit();
	}
	function <%=renderResponse.getNamespace()%>deletePollChoice(choiceName){
		
		var namespace='<portlet:namespace/>';	
		document.getElementById(namespace+'choicesCount').value = '<%= choicesCount - 1 %>';
		document.getElementById(namespace+'choiceName').value=choiceName;
		document.getElementById(namespace+'fm').action='<%=deleteChoiceURL.toString()%>';
		document.getElementById(namespace+'fm').submit();
	}
	
	function <%=renderResponse.getNamespace()%>saveQuestion() {
		var namespace='<portlet:namespace/>';	
		document.getElementById(namespace+'fm').submit();	
		     
	}
	
	AUI().use('aui-base','aui-form-validator',function(A){
		var rules = {
        <portlet:namespace/>title: {
      required: true,
       },
  <portlet:namespace/>pollsquestion:{
	  required:true,
  },
};
var fieldStrings = {
  <portlet:namespace/>title: {
    required: 'Field cannot be left blank'
  },
  <portlet:namespace/>pollsquestion:{
	  required:'Field cannot be left blank'
  }
};
new A.FormValidator(
  {
    boundingBox: '#<portlet:namespace/>fm',
    fieldStrings: fieldStrings,
    rules: rules,
    showAllMessages:true
  }
);
        });

</script> 
</pollschoice_custom></pollschoice_custom>

Suraj Bihari, modified 9 Years ago.

RE: Clear Form field on submit

Junior Member Posts: 44 Join Date: 12/20/13 Recent Posts

Hey Prateeksha, quickly looking through the code I notice that questionId is retrieved (and stored) in the portletSession. This id is used to retrieve the data prepopulating the fields.

After submitting the form the questionId will still be present (unchanged) and will display the 'title' linked to that question.

By setting the portlet session attribute 'questionId' to 0 (after submitting the form and saving the values,) in your processAction I guess, it should display the initial state of the form.

HTH
Suraj

Enrique Valdes Lacasa, modified 3 Years ago.

RE: Clear Form field on submit

Junior Member Posts: 92 Join Date: 7/29/14 Recent Posts

I found an attribute in aui form field elements called ignoreRequestValue whose description says:

Whether to ignore the value saved from the request object. The default value is false.

After setting it to true, the form field values are prevented from maintaining the values after submission.