Results 1 to 22 of 22
-
05-20-2009, 11:37 PM #1Aspiring Evangelist
- Join Date
- Aug 2003
- Posts
- 424
Using Javascript to reset a select field
Hi,
Whilst it's by no means the most elegant way of doing things, I unfortunately have to use Javascript to reset a form field.
I've worked out I can do this for a checkbox using this code:
Code:document.FormName.FieldName.value='';
Code:document.FormName.FieldName[0].checked = true;
Any help would be greatly appreciated; it seems it's just not my day today!Jon
-
05-21-2009, 11:10 AM #2Junior Guru Wannabe
- Join Date
- Mar 2009
- Location
- New Jersey
- Posts
- 34
hi
here is a simple select statement.
when this comes on the page it will have
four options to select from.
what exactly do you want to do now?
<select>
<option value="abc">abc</option>
<option value="def">def</option>
<option value="ghi">ghi</option>
<option value="jkl">jkl</option>
</select>
-
05-21-2009, 11:14 AM #3Aspiring Evangelist
- Join Date
- Aug 2003
- Posts
- 424
Thank you for your reply. I already have a default value selected in this manner:
Code:<select> <option value="abc">abc</option> <option value="def">def</option> <option value="ghi" selected="selected">ghi</option> <option value="jkl">jkl</option> </select>
Does this make sense? Is this possible?
Thanks again for your help so far.Jon
-
05-21-2009, 11:18 AM #4Junior Guru Wannabe
- Join Date
- Apr 2009
- Location
- Arizona
- Posts
- 33
if I'm understanding what you're asking the following works:
Code:<html> <body> <script language="JavaScript"> function resetForm (form) { form.select.selectedIndex="None"; } </script> <form name="testform" action="" method="get"> <select name="select"> <option value="None">None</option> <option value="1">1</option> <option value="2">2</option> </select> <input type="button" name="Reset" value="Reset" onClick="resetForm(this.form)"> </form> </body> </html>
Last edited by Ranthalas; 05-21-2009 at 11:25 AM.
Dave Costello
Shared Hosting, VPS Hosting, Dedicated Server
*Dell Servers * Dual Xeon Processors * Daily Backups * Raid 1 Disk Redundancy * Control Panel, PHP5, MySQL5 * 24/7 Support with 99.9% Uptime * Dedicated IPs
www.vazio.com support@vazio.com
-
05-21-2009, 11:38 AM #5Junior Guru Wannabe
- Join Date
- Mar 2009
- Location
- New Jersey
- Posts
- 34
see if this helps.
seeing this code you can manipulate as it fits your needs.
if else bug me agin.
<select id=s>
<option id=op1 value="abc">abc</option>
<option id=op2 value="def">def</option>
<option id=op3 value="ghi" selected>ghi</option>
<option id=op4 value="jkl">jkl</option>
</select>
<input id=b1 type=button value="SetOrigValue" onclick=setSelectedIndex(s)>
<script type="text/javascript">
function setSelectedIndex(s) {
for ( var i = 0; i < s.options.length; i++ ) {
if ( s.options[i].value == "ghi" ) {
s.options[i].selected = true;
return;
}
}
}
</script>
-
05-21-2009, 02:06 PM #6Newbie
- Join Date
- Apr 2009
- Location
- Tucson
- Posts
- 10
Here's an example that resets the form to the default value if you had one set with the "selected" parameter. If not, it resets to the first value. This can be flexibly used for any select field.
Code:<html> <body> <script language="JavaScript"> function resetForm (form) { var foundDefault = false; for(var i = 0; i < form.select.length; i++) { if(form.select.options[i].defaultSelected) { form.select.selectedIndex = i; foundDefault = true; } if(!foundDefault) { form.select.selectedIndex = 0; } } } </script> <form name="testform" action="" method="get"> <select name="select"> <option value="1">One</option> <option value="2" selected>Two</option> <option value="3">Three</option> </select> <input type="button" name="Reset" value="Reset" onClick="resetForm(this.form)"> </form> </body> </html>
-
05-21-2009, 07:29 PM #7Aspiring Evangelist
- Join Date
- Aug 2003
- Posts
- 424
Thank you all very much for your replies, I've gone with the above solution which works perfectly. Although as I have around 5 <select>s on the page I have needed to repeat it 4 times (there is 1 I do not have to reset). Is there a more elegant way of doing this other than using the same code over and over? Thank you again.
Jon
-
05-21-2009, 07:38 PM #8Newbie
- Join Date
- Apr 2009
- Location
- Tucson
- Posts
- 10
I quickly melded my script with kjambu's to create a new function that I think will do what you want. You only need one copy of the function, and you just pass it the ID of the select that you want to reset.
Code:<html> <body> <script language="JavaScript"> function resetSelect(s) { var foundDefault = false; for(var i = 0; i < s.length; i++) { if(s.options[i].defaultSelected) { s.selectedIndex = i; foundDefault = true; } if(!foundDefault) { s.selectedIndex = 0; } } } </script> <form name="testform" action="" method="get"> <select name="select" id="s1"> <option value="1">One</option> <option value="2" selected>Two</option> <option value="3">Three</option> </select> <input type="button" name="Reset" value="Reset s1" onClick="resetSelect(s1)"><br /> <select name="select" id="s2"> <option value="1">Banana</option> <option value="2">Apple</option> <option value="3" selected>Orange</option> </select> <input type="button" name="Reset" value="Reset s2" onClick="resetSelect(s2)"><br /> </form> </body> </html>
Nate
-
05-21-2009, 08:11 PM #9Junior Guru Wannabe
- Join Date
- Mar 2009
- Location
- New Jersey
- Posts
- 34
Thanks Nate, i would have done similar to what you have done.
And Jon, sorry i became busy after that and could not reply you.
-
05-22-2009, 09:36 AM #10Aspiring Evangelist
- Join Date
- Aug 2003
- Posts
- 424
Please don't apologise, you've been very kind to help at all!
Nate, thank you very much for that. I didn't mention it before because I didn't see it as relevant, but the javascript code that 'calls' the reset is in a different file. Your example works great when it's on the same page but seems to fail when it's not.
I tried changing all 's.options' to document.FormName.s.options but it doesn't seem to have sorted it. I know it's simple, but where am I going wrong?Jon
-
05-22-2009, 09:42 AM #11Junior Guru Wannabe
- Join Date
- Mar 2009
- Location
- New Jersey
- Posts
- 34
for the situation you are explaining the 'include'
feature may help
you may want to search for a better example, but here is one quick find
http://www.calders.co.nz/internet/we...pt_include.php
hope it helps
-
05-22-2009, 09:55 AM #12Aspiring Evangelist
- Join Date
- Aug 2003
- Posts
- 424
Thanks for the suggestion. I have already added the above function to the page but it is the link itself (resetSelect(s1)) that is not present on the page with the form. There's unfortunately no way around this, so I was looking for a way to correct it through programming.
Jon
-
05-22-2009, 09:59 AM #13Junior Guru Wannabe
- Join Date
- Mar 2009
- Location
- New Jersey
- Posts
- 34
Looks like you have a tricky situation. I wish I were working with you, and we could have fixed the problem. I am sure you will agree that it is hard to visualize such a situation and give a working solution have a nice long weekend Jon
-
05-22-2009, 10:28 AM #14Aspiring Evangelist
- Join Date
- Aug 2003
- Posts
- 424
Okay, thanks again for all your help.
To anyone else, the weird thing is this works:
Code:<script language="JavaScript"> var foundDefault = false; for(var i = 0; i < document.FormName.ElementName.length; i++) { if(document.FormName.ElementName.options[i].defaultSelected) { document.FormName.ElementName.selectedIndex = i; foundDefault = true; } if(!foundDefault) { document.FormName.ElementName.selectedIndex = 0; } } </script>
Code:<script language="JavaScript"> function resetSelect(s) { var foundDefault = false; for(var i = 0; i < document.FormName.s.length; i++) { if(document.FormName.s.options[i].defaultSelected) { document.FormName.s.selectedIndex = i; foundDefault = true; } if(!foundDefault) { document.FormName.s.selectedIndex = 0; } } } resetSelect(elementName); </script>
Jon
-
05-22-2009, 10:45 AM #15Junior Guru Wannabe
- Join Date
- Mar 2009
- Location
- New Jersey
- Posts
- 34
1.
try to print the object s and see what is there in it. something equivalent to s.ToString kind of thing. I am sure s is not holding the right element. if i am not wrong s in itself is an object and using .s. may not be correct syntax. you have to get the element from the object and then use it.
2.
what is the error you are getting. that will gi ve you some more clue.
-
05-22-2009, 10:58 AM #16Aspiring Evangelist
- Join Date
- Aug 2003
- Posts
- 424
Thank you for the advice.
You're correct, 's' is not holding any element, it is in fact just remaining as the letter 's'. Everything works if s is renamed to the name of the form element which further reinforces this is the issue. It seems that resetSelect(name) parses absolutely nothing to it...
..now I'm really confused!Jon
-
05-22-2009, 11:06 AM #17Junior Guru Wannabe
- Join Date
- Mar 2009
- Location
- New Jersey
- Posts
- 34
you are not alone in this
javascript is like that.
see a sdlightly related post of mine on a a similar topic
http://www.webhostingtalk.com/showthread.php?t=863134
-
05-22-2009, 11:37 AM #18Newbie
- Join Date
- Apr 2009
- Location
- Tucson
- Posts
- 10
Jonathanbull,
I reread your original post and I think I understand a little more about what you're trying to do, and I think the issue is just how you're calling resetSelect(). I just tried setting up a duplicate of what you're doing as best I could with the information present here, and I think I have a fix for you. Basically return my function to the way it was. Then when you call it, give it the full document.FormName.ElementName of the select object. So something like this:
resetSelect(document.FormName.MySelect);
Here is a working test of my sample script:
test.js:
Code:function resetSelect(s) { var foundDefault = false; for(var i = 0; i < s.length; i++) { if(s.options[i].defaultSelected) { s.selectedIndex = i; foundDefault = true; } if(!foundDefault) { s.selectedIndex = 0; } } } function resetForm() { resetSelect(document.testform.s1); resetSelect(document.testform.s2); }
Code:<html> <head> <script type="text/javascript" src="test.js"></script> </head> <body> <form name="testform" action="" method="get"> <select name="s1"> <option value="1">One</option> <option value="2" selected>Two</option> <option value="3">Three</option> </select> <input type="button" name="Reset" value="Reset s1" onClick="resetForm()"><br /> <select name="s2"> <option value="1">Banana</option> <option value="2">Apple</option> <option value="3" selected>Orange</option> </select> <input type="button" name="Reset" value="Reset s2" onClick="resetForm()"><br /> </form> </body> </html>
Anyways, try that out. LMK if it doesn't work.
BTW, the issue here is that resetSelect expects a HTMLSelectElement object from the DOM. So you can't just put that in the middle of another method call of another object like you had modified my function to do. So instead you're doing that resolution to the HTMLSelectElement object in the call of the function itself.
If that doesn't work, I have another way to try it using strings and the getElementById function.
Nate
-
05-22-2009, 11:41 AM #19Junior Guru Wannabe
- Join Date
- Mar 2009
- Location
- New Jersey
- Posts
- 34
i agree completely with Nate.
btw what is LMK?
-
05-22-2009, 11:50 AM #20Newbie
- Join Date
- Apr 2009
- Location
- Tucson
- Posts
- 10
LMK = Let Me Know
That might be one of those acronyms that isn't so widely used, but is used a lot around work. It's hard to keep those straight sometimes. For example, I had never heard of H2H (Happy 2 Help) before working here.
Nate
-
05-25-2009, 11:31 AM #21Aspiring Evangelist
- Join Date
- Aug 2003
- Posts
- 424
Sorry about the delayed response, we've got a long weekend over here in the UK and I've been taking full advantage of it!
Thank you so much Nate, the function works perfectly. I've certainly learnt a lot out of all this.Jon
-
05-26-2009, 01:03 PM #22Newbie
- Join Date
- Apr 2009
- Location
- Tucson
- Posts
- 10
H2H =P
Nate