hosted by liquidweb


Go Back   Web Hosting Talk : Web Hosting Main Forums : Programming Discussion : Using Javascript to reset a select field
Reply

Forum Jump

Using Javascript to reset a select field

Reply Post New Thread In Programming Discussion Subscription
 
Send news tip View All Posts Thread Tools Search this Thread Display Modes
  #1  
Old 05-20-2009, 11:37 PM
jonathanbull jonathanbull is offline
Aspiring 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='';
and previously someone helped me obtain this for a radio field:
Code:
document.FormName.FieldName[0].checked = true;
...but does anyone have any idea on how to reset a select field?

Any help would be greatly appreciated; it seems it's just not my day today!

__________________
Jon



Sponsored Links
  #2  
Old 05-21-2009, 11:10 AM
kjambu kjambu is offline
Junior Guru Wannabe
 
Join Date: Mar 2009
Location: New Jersey
Posts: 34
Question 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>

  #3  
Old 05-21-2009, 11:14 AM
jonathanbull jonathanbull is offline
Aspiring Evangelist
 
Join Date: Aug 2003
Posts: 424
Quote:
Originally Posted by kjambu View Post
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>
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>
Let say the user drops this menu down and selects jkl (without submitting). What I need is a piece of Javascript that can reset the select to the default value already set (ghi).

Does this make sense? Is this possible?

Thanks again for your help so far.

__________________
Jon

Sponsored Links
  #4  
Old 05-21-2009, 11:18 AM
Ranthalas Ranthalas is offline
Junior 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>

__________________
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


Last edited by Ranthalas; 05-21-2009 at 11:25 AM.
  #5  
Old 05-21-2009, 11:38 AM
kjambu kjambu is offline
Junior 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>

  #6  
Old 05-21-2009, 02:06 PM
Nicodemus Nicodemus is offline
Newbie
 
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>
Nate

  #7  
Old 05-21-2009, 07:29 PM
jonathanbull jonathanbull is offline
Aspiring Evangelist
 
Join Date: Aug 2003
Posts: 424
Quote:
Originally Posted by kjambu View Post
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>
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

  #8  
Old 05-21-2009, 07:38 PM
Nicodemus Nicodemus is offline
Newbie
 
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>
See if that works.

Nate

  #9  
Old 05-21-2009, 08:11 PM
kjambu kjambu is offline
Junior 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.

  #10  
Old 05-22-2009, 09:36 AM
jonathanbull jonathanbull is offline
Aspiring Evangelist
 
Join Date: Aug 2003
Posts: 424
Quote:
Originally Posted by kjambu View Post
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.
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

  #11  
Old 05-22-2009, 09:42 AM
kjambu kjambu is offline
Junior 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

  #12  
Old 05-22-2009, 09:55 AM
jonathanbull jonathanbull is offline
Aspiring Evangelist
 
Join Date: Aug 2003
Posts: 424
Quote:
Originally Posted by kjambu View Post
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
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

  #13  
Old 05-22-2009, 09:59 AM
kjambu kjambu is offline
Junior 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

  #14  
Old 05-22-2009, 10:28 AM
jonathanbull jonathanbull is offline
Aspiring 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>
But this does not:
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>
This seems crazy as all I'm doing is adding the ability to parse information to it

__________________
Jon

  #15  
Old 05-22-2009, 10:45 AM
kjambu kjambu is offline
Junior 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.

Reply

Related posts from TheWhir.com
Title Type Date Posted
Survey: IT Workers Not Confident in Federal Data Center Reliability Web Hosting News 2014-08-21 12:15:40
Swarmify's New Approach to Content Delivery Uses Site Visitors to Accelerate Content Web Hosting News 2014-05-01 08:34:03
OpenStack and the AWS API Debate Web Hosting News 2014-05-09 12:40:29
Linode Resets Passwords After Discovering Customer Hacking Attempt Web Hosting News 2013-04-15 13:25:41
Heroku Works with Security Researcher to Fix Password Vulnerability Web Hosting News 2013-01-10 12:51:17


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Postbit Selector

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump
Login:
Log in with your username and password
Username:
Password:



Forgot Password?
Advertisement:
Web Hosting News:



 

X

Welcome to WebHostingTalk.com

Create your username to jump into the discussion!

WebHostingTalk.com is the largest, most influentual web hosting community on the Internet. Join us by filling in the form below.


(4 digit year)

Already a member?