We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

How to reset a form using Javascript

aman0711
aman0711 asked
on
Medium Priority
538 Views
Last Modified: 2012-05-07
hi Experts,

                I have a form with three fields Timeline, from and to date. I need to implement Reset to Defaults functionality on this (Actually I already have a reset condition on the form.)  The problem I am facing is :
              * Once the user hits Update, I cant reset the form.  Prior to clicking update, form resets perfectly fine. but once the user hits update and new page loads, it doesnt have the default(Monthly ins this case) in the timeline section.

              Is it doable with javascript?If yes, then how ? :(
<div class="sidebar-panel" style="border:5px solid #99CCFF; width:145px; padding:2px; background:white;">
<div style="font-weight:bold; color:#000000 ">Selection</div>
<div style="font-weight:100; line-height:normal; font-size:9px; margin:5px 0;"> Select from the options below and then click on Update Chart.</div>
 <form:form commandName="sideForm">
<div style="font-weight:bold; color:#000">Timeline</div>
 
<div align="center" style="margin:0 0 5px 0; ">
<div style="margin:0 0 5px 0;"><form:select path="timeline" items="${timeline}" id="tm"/></div>
</div>
<div style="color:black;">
<div class="tofrom">From:</div>
<div class="calimg"><img src="/analytics/static/images/CAL.PNG" name="Calendar" width="18" height="18" id="Calendar" onClick="displayDatePicker('from_date');" /></div>
<form:input path="startDt" id="from_date" size="7" maxlength="10" />
</div>
<div style="color:black;">
<div class="tofrom">To:</div>
<div class="calimg"><img name="Calendar" src="/analytics/static/images/CAL.PNG" width="18" height="18" id="Calendarm" onClick="displayDatePicker('to_date');" /> </div>
 
<form:input path="endDt" id="to_date" size="7" maxlength="12" />
 
</div>
<div style="font-wight:bold; color:#000">*15 Month Max Per Chart</div>
<br />
<div style="float:left; font-size:9px; font-weight:lighter; padding:0; color:black; color:blue"><a href="#" style='text-decoration: none; color:#2525FF;' onClick="document.forms[0].reset();return false">Reset To Defaults</a></div>
<h6 style="font-size:4px; font-wight:lighter; float:right;">
<div style="width:60px; font-size:.5em; font-weight:lighter; background: #FFFFFF ">
<input type="submit" value="Update Chart" onClick="return validateDates()"/>
</div>
</h6>
<div style="clear:both;"></div>
</form:form>
</div>

Open in new window

reset.PNG
Comment
Watch Question

CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:

Instead of:
onClick="document.forms[0].reset();return false">Reset To Defaults
 
try:
onClick="$("option:contains('Monthly')").attr("selected","selected");return false">Reset To Defaults

Open in new window

CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
If you have more than one timeline select list, then give each list an id - ex::
<select id="select1">
	<option value="daily">Daily</option>
	<option value="weekly">Weekly</option>
	<option value="monthly">Monthly</option>
</select>
 
<select id="select2">
	<option value="daily">Daily</option>
	<option value="weekly">Weekly</option>
	<option value="monthly">Monthly</option>
</select>
 
Then use that id on the onclick event - ex:
$("#select1 option:contains('Monthly')").attr("selected","selected");
 
will select Monthly only for select with id="select1"

Open in new window

Author

Commented:
Hi hielo,

                Thanks for the help, it Didnt work :(

                This is what I did.

<a href="#" style='text-decoration: none; color:#2525FF;' onClick="$("option:contains('Monthly')").attr("selected","selected");return false">Reset To Defaults</a>

Open in new window

Author

Commented:
Hi Hielo,

               Actually the timeline dropdown list values are coming from a backend javacode. I havent hardcoded them as HTML <Select> <Option>
CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
what you posted has syntax errors. You onclick should start and end with apostrophes, NOT double quotation marks since the value within the onclick already uses double quotation marks. Copy and paste this:
<a href="#" style='text-decoration: none; color:#2525FF;' onClick='$("option:contains('Monthly')").attr("selected","selected");return false'>Reset To Defaults</a>

Open in new window

CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
sorry, you still need to escape the apostrophes around 'Monthly'. Copy and paste this:
<a href="#" style='text-decoration: none; color:#2525FF;' onClick='$("option:contains(\'Monthly\')").attr("selected","selected");return false'>Reset To Defaults</a>

Open in new window

Author

Commented:
I am sorry, didnt work either (

I am getting an error at the bottom of IE, saying done with errors on page. I have attached the snap shot

reset-error.PNG
CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
Look at my previous post. You probably missed it!

Author

Commented:
Hi hielo,

            I am sorry if I made some mistake but this is the code I used:

<a href="#" style='text-decoration: none; color:#2525FF;' onClick='$("option:contains(\'Monthly\')").attr("selected","selected");return false'>Reset To Defaults</a>

           onClick is starting and ending with apostrophes :(



another-error.PNG
CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
change both of the slash apostrophes:
\'...\'

to:
slash double quotes
\"...\"

Author

Commented:
Hey hielo,

                  Thanks a lot Sir. :) Sorry I kept bugging you for long. Can you please help me in understanding the code you gave? I am very new to this.

                Also, will this code, reset the defaults on From and To fields?
CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview

Author

Commented:
>> Did it work?
yes Sir, perfectly fine :) Thanks a ton.

>> I havent hardcoded them as HTML <Select> <Option>
I meant, those values are stored in backend bean and fetched on the fly. but yes I saw the generated HTML, its <OPTION> :)

>> $("#from_date").val(\"ALPHA\");
so instead can I supply the variable I am using to store a default value?

CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
>>so instead can I supply the variable I am using to store a default value?
try it! You learn better by making mistakes and banging your head against the wall :)

Author

Commented:
lol.. true :)

Thank you so much.. if I get stuck somewhere, I will post another question :-D

Author

Commented:
Thanks a lot Sir :-)
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.