On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.
Course Of The Month
Become a Premium Member and unlock a new, free course in leading technologies each month.
Solved
How to reset a form using Javascript
Posted on 2009-07-09
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 ? :(
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>
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
8-
8
16 Comments
Active 2 days ago
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
Active 2 days ago
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"
Hi hielo,
Thanks for the help, it Didnt work :(
This is what I did.
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>
Hi Hielo,
Actually the timeline dropdown list values are coming from a backend javacode. I havent hardcoded them as HTML <Select> <Option>
Actually the timeline dropdown list values are coming from a backend javacode. I havent hardcoded them as HTML <Select> <Option>
Active 2 days ago
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>
Active 2 days ago
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>
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
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
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:contain
onClick is starting and ending with apostrophes :(
another-error.PNG
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:contain
onClick is starting and ending with apostrophes :(
another-error.PNG
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?
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?
Active 2 days ago
Did it work?
>>Actually the timeline dropdown list values are coming from a backend javacode. I havent hardcoded them as HTML <Select> <Option>
But what does the java code send. What your picture shows looks like an HTML SELECT OPTION field, so I'm assuming that is what your java code is sending. Those are the tags that the browsers understand in order to make select lists.
So the code I posted is meant to look for any <OPTION> tag that contains the word "Monthly" in it (it IS case sensitive) and makes that option the selected option. If it worked for you (and I suspect it did) then indeed, the java page IS sending/generating HTML code)
>>Also, will this code, reset the defaults on From and To fields?
No. It will reset ONLY the SELECT list. Based on the ids of those other fields, you would need:
>>Actually the timeline dropdown list values are coming from a backend javacode. I havent hardcoded them as HTML <Select> <Option>
But what does the java code send. What your picture shows looks like an HTML SELECT OPTION field, so I'm assuming that is what your java code is sending. Those are the tags that the browsers understand in order to make select lists.
So the code I posted is meant to look for any <OPTION> tag that contains the word "Monthly" in it (it IS case sensitive) and makes that option the selected option. If it worked for you (and I suspect it did) then indeed, the java page IS sending/generating HTML code)
>>Also, will this code, reset the defaults on From and To fields?
No. It will reset ONLY the SELECT list. Based on the ids of those other fields, you would need:
<a href="#" style='text-decoration: none; color:#2525FF;' onClick='$("option:contains(\"Monthly\")").attr("selected","selected"); $("#from_date").val(\"ALPHA\"); $("#to_date").val(\"BETA\"); return false'>Reset To Defaults</a>
I used ALPHA and BETA so you can see clearly where you need to specify the default values. If you need the fields empty, then change:
\"ALPHA\"
to:
\"\"
>> 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(\"ALPH
so instead can I supply the variable I am using to store a default value?
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(\"ALPH
so instead can I supply the variable I am using to store a default value?
Active 2 days ago
>>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 :)
try it! You learn better by making mistakes and banging your head against the wall :)
Featured Post
Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Introduction
Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Originally, this post was published on Monitis Blog, you can check it
here
.
In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles.
Reference your jQuery libraries:
(CODE)
Include your new external js/jQuery file:
(CODE)
Write your first lines of code to setup your site for jQuery…
Suggested Courses
Earn Certification
HTML5 Specialist - Certification
Free withPremium
Course of the Month3 days, 17 hours left to enroll
Earn Certification
Certified Web Development Professional
$335.99
630 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.