Results 1 to 22 of 22
  1. #1
    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

  2. #2
    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. #3
    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

  4. #4
    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

  5. #5
    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. #6
    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. #7
    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. #8
    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. #9
    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. #10
    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. #11
    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. #12
    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. #13
    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. #14
    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. #15
    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.

  16. #16
    Join Date
    Aug 2003
    Posts
    424
    Quote Originally Posted by kjambu View Post
    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.
    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

  17. #17
    Join Date
    Mar 2009
    Location
    New Jersey
    Posts
    34

    Wink

    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

  18. #18
    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);
    }
    test.html:
    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>
    This does mean each reset button resets both select arguments, but I think you only have one reset button for the whole form anyways, right? Make sure you have the "name" parameter of the select element set properly.

    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

  19. #19
    Join Date
    Mar 2009
    Location
    New Jersey
    Posts
    34
    i agree completely with Nate.

    btw what is LMK?

  20. #20
    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

  21. #21
    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

  22. #22
    H2H =P

    Nate

  23. Newsletters

    Subscribe Now & Get The WHT Quick Start Guide!

Related Posts from theWHIR.com

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •